Page MenuHomePhabricator

Unify and refine WikimediaUI icon set
Closed, ResolvedPublic

Description

As result of joint work of designers across departments, we're aiming to update the WikimediaUI icon set according to the identified
Wikimedia User Interface Style Guide's icons principles:

  • Reduce to the essential form.
  • Universal rather than culturally-specific.
  • Avoid textual content within the icon.
  • Abstract forms or concrete objects depending on context.
  • Neutral point of view.

Visual principles:

  • Monochromatic. Solid color icons.
  • Geometric. Comprised of simple and ideally symmetrical geometric shapes. Symmetrical icons tend to be more universally applicable (an open book rather than a closed book with binding on left or right side).
  • Front-facing. Icons are flat and front facing, not multi-dimensional.
  • 20 x 20 dp default canvas. WikimediaUI icons are put on a 20 x 20 device-independent pixel (dp) canvas per default.
  • Rounded corners. Corners are rounded to make shapes more friendly and welcoming. For the default canvas use 2 dp rounded corners. Note that rounded corners are applied only on the exterior of an icon shape, not interior corners.
  • Medium thick stroke. Lines and outline should be visible at smaller sizes without effort, for the default icon canvas use a 2 dp thick stroke as standard. Endpoints of lines are square in keeping with simple geometric shapes.
  • Diagonal cross-out lines. For icons that appear to be crossed-out, the cross-out line starts from the top-left of the icon and continues at a 45 degree angle to the bottom right (similar to a backslash “\”).

  • This task is meant to receive feedback on our updates to the single icons, which is best accomplished at M229 as it features revisions. The icons have gone through several design critique rounds internally. Still, we need to make sure, that we're not missing out on details and invite to early-on feedback.
    In follow-up tasks and patches, we will care for the icons applications in Foundation products when the main questions are clarified.

    Related Objects

    Event Timeline

    There are a very large number of changes, so older changes are hidden. Show Older Changes

    Change 402756 had a related patch set uploaded (by VolkerE; owner: VolkerE):
    [oojs/ui@master] WikimediaUI theme: Align size and position of overhauled icons

    https://gerrit.wikimedia.org/r/402756

    Change 402757 had a related patch set uploaded (by VolkerE; owner: VolkerE):
    [oojs/ui@master] WikimediaUI theme: Align refined WikimediaUI icons in size and position

    https://gerrit.wikimedia.org/r/402757

    Change 402756 abandoned by VolkerE:
    WikimediaUI theme: Align size and position of overhauled icons

    Reason:
    Merged into If5722df41e75a1d4bdf8afc83c81670d1be3a1b8

    https://gerrit.wikimedia.org/r/402756

    Change 402759 had a related patch set uploaded (by VolkerE; owner: VolkerE):
    [oojs/ui@master] WikimediaUI theme: Add additional 'interactions' & 'media' pack icons

    https://gerrit.wikimedia.org/r/402759

    Change 400091 merged by jenkins-bot:
    [oojs/ui@master] WikimediaUI theme: Unify and refine WikimediaUI icons

    https://gerrit.wikimedia.org/r/400091

    Change 402757 merged by jenkins-bot:
    [oojs/ui@master] WikimediaUI theme: Align refined WikimediaUI icons in size and position

    https://gerrit.wikimedia.org/r/402757

    Change 420723 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [oojs/ui@master] Make Apex theme also use 20px icons

    https://gerrit.wikimedia.org/r/420723

    Change 420696 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [VisualEditor/VisualEditor@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420696

    Change 420694 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/VisualEditor@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420694

    Change 420776 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/TemplateData@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420776

    Change 420779 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/Cite@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420779

    Extensions using custom OOUI icons (that I know of):

    • Cite
    • Echo
    • Flow
    • Graph
    • Math
    • ProofreadPage
    • Score
    • TemplateData
    • VisualEditor
    • wikihiero

    I am going through everything that had 24px icons and triaging, I'll put a list here later.

    Change 420783 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/Graph@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420783

    Change 420784 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/ImageTweaks@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420784

    Change 420786 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/Math@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420786

    Change 420789 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/ProofreadPage@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420789

    Change 420792 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/Score@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420792

    Change 420794 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
    [mediawiki/extensions/wikihiero@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420794

    I searched the mediawiki/extensions repository for width="24" height="24" and viewBox="0 0 24 24" to find 24px icons that might need updates.

    Needed updates, already done (https://gerrit.wikimedia.org/r/#/q/topic:T177432-20px-grid-icons):

    • Cite
    • Graph
    • ImageTweaks
    • Math
    • ProofreadPage
    • Score
    • TemplateData
    • VisualEditor
    • wikihiero

    Might need updates, but I am not planning to do them (I'm unfamiliar with the extension, there are mixed OOUI and non-OOUI icons, or just a lot of them) – we should file tasks for these:

    • CodeEditor
    • CodeMirror
    • ContentTranslation
    • Echo
    • Flow
    • Kartographer
    • MobileFrontend

    Probably don't need updates (non-OOUI icons):

    • LoginNotify
    • MultimediaViewer
    • Popups
    • SocialProfile
    • Theme
    • UniversalLanguageSelector
    • Wikibase
    • WikimediaMessages

    Change 420723 merged by jenkins-bot:
    [oojs/ui@master] Make Apex theme also use 20px icons

    https://gerrit.wikimedia.org/r/420723

    Change 402759 merged by jenkins-bot:
    [oojs/ui@master] WikimediaUI theme: Add additional 'interactions' & 'media' pack icons

    https://gerrit.wikimedia.org/r/402759

    Change 420696 merged by jenkins-bot:
    [VisualEditor/VisualEditor@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420696

    Change 421109 had a related patch set uploaded (by Jforrester; owner: Jforrester):
    [mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (52b59d337)

    https://gerrit.wikimedia.org/r/421109

    Change 420776 merged by jenkins-bot:
    [mediawiki/extensions/TemplateData@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420776

    Change 421109 merged by jenkins-bot:
    [mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (52b59d337)

    https://gerrit.wikimedia.org/r/421109

    Change 420694 merged by jenkins-bot:
    [mediawiki/extensions/VisualEditor@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420694

    Change 420779 merged by jenkins-bot:
    [mediawiki/extensions/Cite@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420779

    Change 420783 merged by jenkins-bot:
    [mediawiki/extensions/Graph@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420783

    Change 420784 merged by jenkins-bot:
    [mediawiki/extensions/ImageTweaks@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420784

    Change 420786 merged by jenkins-bot:
    [mediawiki/extensions/Math@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420786

    Change 420789 merged by jenkins-bot:
    [mediawiki/extensions/ProofreadPage@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420789

    Change 420792 merged by jenkins-bot:
    [mediawiki/extensions/Score@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420792

    Change 420794 merged by jenkins-bot:
    [mediawiki/extensions/wikihiero@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/420794

    Change 421297 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
    [mediawiki/extensions/ContentTranslation@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/421297

    MobileFrontend

    We currently use OOUI in Special:MobileOptions and no changes are needed. There are two broken icons (oo-ui-icon-edit and oo-ui-icon-wikiText) in mobile VisualEditor but the editor itself is currently broken in mobile and @Nirzar is pursuing. @Nirzar has been careful to deliver icons with a builtin 2px padding so we believe that everything else is ready for this icon size change. @Nirzar and @alexhollender later will adjust these icons to the visual spec as part of a future design debt task that's on their radar.

    Change 421297 merged by jenkins-bot:
    [mediawiki/extensions/ContentTranslation@master] Update icons for new 20px grid

    https://gerrit.wikimedia.org/r/421297

    Volker_E raised the priority of this task from High to Needs Triage.Mar 27 2018, 5:06 PM
    Volker_E moved this task from Backlog to Done on the UI-Standardization-Kanban board.

    Short question (not from me) the ltr icon https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_stripeToC-ltr.svg has now illogical rtl alignment.
    Compare the old one (apex theme) is exact mirrored: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_listBullet-ltr_apex.svg
    Is this intended??

    The stripeToC icon in context:

    Screenshot from 2018-08-27 16-57-01.png (31×159 px, 2 KB)

    That does look backwards to me. I'll upload a patch to swap the LTR and RTL versions of this icon, and @Volker_E or @Jdforrester-WMF can tell me off if I'm wrong.

    Change 455747 had a related patch set uploaded (by Catrope; owner: Catrope):
    [oojs/ui@master] Swap LTR and RTL versions of the stripeToC icon

    https://gerrit.wikimedia.org/r/455747

    @Perhelion @Catrope This makes indeed no sense. Thanks for raising it, has slipped into production. https://phabricator.wikimedia.org/M229/791/ is showing unclarity on where the icon is used. I've added the location in T141801 a while ago, but was not explicit enough with my peer designers on it. The reason for the old special ToC icon treatment used beforehand was also confusing, see for example https://doc.wikimedia.org/oojs-ui/v0.17.10/demos/#icons-mediawiki-ltr

    We might want to revisit if we want to use a special icon like this or rather reuse something like 'listBullet' there. But that's low-priority for now.

    Change 455747 merged by jenkins-bot:
    [oojs/ui@master] Swap LTR and RTL versions of the stripeToC icon

    https://gerrit.wikimedia.org/r/455747