WikimediaUI
OpenPublic

Tokens
"Mountain of Wealth" token, awarded by RandomDSdevel."Barnstar" token, awarded by Jan_Dittrich."Yellow Medal" token, awarded by Volker_E.
Authored By
violetto, Oct 12 2015

Mock History

Current Revision

Mock Description

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

Find the source Sketch file for designers to use on Dropbox

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

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


  • Buttons
    Checkbox
    Radio buttons
    Text field
    Toggle switch
    Dropdown
    Combo box
    Date picker
    Stepper control
    Secondary toolbar

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

    There are a very large number of changes, so older changes are hidden. Show Older Changes
    Pginer-WMF added a comment.EditedJun 2 2016, 12:04 AM

    Some small details about the button groups:

    • The normal state shows no separating lines except for one of the options.
    • The hover state shows the selected element with one border line on the left side but no border on the right.
    • The active state shows the selected element slightly taller than the rest.
    Pginer-WMF updated the mock's description. (Show Details)Jun 3 2016, 9:21 PM
    Volker_E updated the mock's description. (Show Details)Jun 6 2016, 3:34 AM

    @Pginer-WMF Button Group is fixed in rev 2016-06-05.

    @Pginer-WMF Button Group is fixed in rev 2016-06-05.

    Awesome. Thanks!

    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)
    SamanthaNguyen added a comment.EditedSep 18 2016, 5:11 PM

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

    Volker_E updated the mock's description. (Show Details)Sep 19 2016, 6:53 AM

    @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 :)

    jrbs added a subscriber: jrbs.Oct 13 2016, 11:56 PM
    stjn added a subscriber: stjn.Jan 16 2017, 7:54 PM