Page MenuHomePhabricator


Authored By
violetto, Oct 12 2015
Referenced Files
F26224221: WikimediaUI M101 Overview 2018-09-27.png
Sep 28 2018, 1:59 AM
F7998972: WikimediaUI M101 2017-05-09.png
May 9 2017, 5:48 PM
F5289921: WikimediaUI M101 2017-01-15.png
Jan 15 2017, 11:28 PM
F4820195: WikimediaUI M101 2016-11-21.png
Nov 21 2016, 11:35 PM
F4696869: WikimediaUI M101 2016-11-04.png
Nov 4 2016, 10:06 PM
F4604958: M101 2016-10-14.png
Oct 15 2016, 2:40 AM
F4470813: Artboard M101 2016-09-15 WikimediaUI.png
Sep 15 2016, 9:12 AM
F4440909: Artboard M101 2016-09-07.png
Sep 7 2016, 8:24 PM
"Mountain of Wealth" token, awarded by RandomDSdevel."Barnstar" token, awarded by Jan_Dittrich."Yellow Medal" token, awarded by Volker_E.

Mock History

Current Revision

Mock Description

Update 2019-11-07

This mock has been closed in favor of up-to-date Sketch overview file and its SVG copy/companion of the “Resources” section of Design Style Guide.
Instead of keeping this up-to-date, please subscribe to or fork the GitHub repository.

This mockup provides the overview of widgets as template for our interface implementation. The widgets are sharing consistent “WikimediaUI Base stylesheet” design properties and interaction patterns.

Find the source Sketch file for designers in resources folder of Design Style Guide, together with an SVG and PNG export

Please report design shortcomings or bugs in T136371: Design shortcomings of WikimediaUI widgets overview (M101) (tracking)

More details on individual component Pholio mockups:
(Notice that those might be outdated, M101 is featuring the latest changes)

See also the Design Style Guides color palette as mock residing at

  • .

    M101 is based on an em based grid (translated to 8px as .5em) and uses Sketch symbols for instant adaption to changes across widgets.

    Event Timeline

    There are a very large number of changes, so older changes are hidden. Show Older Changes
    Volker_E renamed this mock from Mediawiki UI to WikimediaUI.Sep 15 2016, 9:12 AM
    Volker_E updated the mock's description. (Show Details)

    Just curious, are any of you WMF designers planning to introduce a design for tabs and breadcrumb navigation?

    @SamanthaNguyen As for the tabs, there are plans to add them anytime soon. There is also an implementation of tabs in our UI library OOjs UI, you can find in the demos under “Indexed dialog (tab navigation)”. It didn't go through full design process, therefore it's not yet included here.

    Breadcrumbs are currently not a core functionality of our products, therefore there's no plan to add those.
    Please feel free to file a ticket & share your use case if you think that it is a needed addition.

    @Volker_E Will do! (I'll probably set a reminder to do it during the weekend), thanks for the info :)

    With the latest updates of the Design Style Guide repository, I'll close this mock.
    The Sketch overview file of the “Resources” section is the source of truth together with its SVG copy/companion.
    Instead of keeping this up-to-date, please subscribe to the GitHub repository.

    Volker_E updated the mock's description. (Show Details)