Design/Archive/Wikimedia Foundation Design/Agora icon set

From mediawiki.org
This page described the Wikimedia Foundation icon philosophy, licensing statement, and design guide. Included here are an archive of existing icons, a list of needed icons, and their associated design discussions.

Philosophy[edit]

This project is related to the themes and intentions of the Wikimedia Foundation Agora design guide project, the MediaWiki Style Guide, and the development of Athena.

All icons will be styled in some family with the Wikipedia mark.

Licensing[edit]

The icon set will be released under the Creative Commons Zero license. We are a free culture shop.

Rationale[edit]

The primary goal of building this icon set is to help solidify the visual identity of the various projects of the Wikimedia Foundation. Rather than using another freely available icon set, the WMF design team is building its own icon package because:

  • Existing free icon sets are insufficient:
    • They often contain icons that are crudely or inconsistently designed;
    • They often contain a mix of styles, having been accreted over time
    • They often contain archaic symbology (e.g., a floppy disk for "save")
    • They are often incomplete for our purposes;
    • They are often designed for operating systems rather than singular applications;
    • They are often designed to mimic other icon sets;
    • Individual icons have often been repurposed ad infinitum, thus diluting the symbolic meaning of any individual icon;
  • We are a top-five property, and should have our own visual identity;
  • We have multiple teams working on multiple projects. A shared icon set will help us avoid "style drift".

Design guide[edit]

The following considerations should be kept in mind when designing an icon for the set:

  • Icons within the set should look to Wikipedia's "W" glyph for style inspiration regarding lines and overall weight.
  • Icons must be monochromatic. While styles (such as gradients, or three-dimensional effects) can be applied to them, they cannot contain multiple colors. This allows for:
    • Maximum flexibility within color schemes;
    • Application of individual colors, shades, and styles to the icons to attract (or demote) attention;
    • Better recognition at lower resolutions
  • As much as possible, icons should be recognizable at a 16x16 pixel size.
    • Optimal size should be 32x32. Note that on retina screens, 16x16 is actually 32x32.
    • Icons should work well at 40x40 (which is the recommended size for touch interfaces)
  • As much as possible, icons should survive the "blur" test: if you allow your eyes to blur, can you distinguish two icons from each other? (Easy to test if you wear glasses, or just take out your contacts).
  • Icon source files must be vector images and exported to SVG files (which can then be exported to PNG for bitmap versions).

Layout Guidelines[edit]

Icons, when shown with labels, should not be sized radically different than the text size. Icons should never be placed to the right of a label.

When placed to the left of a label, the font size/height should not be any smaller than 80% of the height of the icon when centered horizontally, and no smaller than 90% when placed on the same line.

Icon templates[edit]

Files should be named according to the following convention: WMF-Agora-Name_of_Icon-COLORHEX, where COLORHEX is the hexidecimal value of the primary color of the icon ("Name_of_Icon" obviously should describe what the icon does or its function).

If an icon has additional styles (such as shading, or is enclosed in a circle, or some other decoration), this should be inserted as a type before the COLORHEX (e.g., WMF-Agora-Checkmark-gradient-#CC0000).

Icon list[edit]

This is a list of the icons of the Foundation as they are developed. This should include the most current image of an icon and discussion regarding each.

Current implementation of main menu.

General[edit]

  • Dismiss - an 'X' in a circle
    Note this doesn't match the Vector theme for jquery.ui's close 'X' used in Visual Editor and elsewhere, nor the simple × glyph used in post-edit feedback (bug 48067). It is the close button used by Extension:CentralNotice.
  • Search - Magnifying glass(?)
  • Settings/Preferences - Gear
  • Info - Information
  • Save
  • Edit
    Pencil in Flow
  • View History
  • Item has been changed
    mini-pencil icon in Flow
  • Talk/Discussion
  • Contributions
  • Forbidden/ Not Allowed
  • Email User
  • Leave a Message
  • Feed/ Flow
  • Notifications
  • Wiki Love Symbol
  • User Talk
  • Move Page
  • Block User
  • Moderation actions
    • Hide content
    • Delete content
    • Suppress content ("oversight")
    • Flow used to use a Flag icon for the set, now just an action menu
  • Talk/Discussion - Speech Bubbles
    • Flow uses a squared-off bubble for topic post count
  • Single Message - Single speech bubble
  • History - Clock
  • Delete - Trashcan
  • Move
  • Watch/Unwatch
    Note inconsistent between desktop & mobile, bug 54307
  • Email User
  • View Contributions
  • Feedback
  • Thank
  • Collapse/Expand
    Note: Vector left-hand navigation, category expansion, and LiquidThreads all use different v/> icons; Flow topic history has ^/v icons.
  • Permalink

Site chrome[edit]

Navigation[edit]

  • Forward - Chevron Right
  • Backward - Chevron Left
  • Article Actions Menu Activator - Currently, Page with Three dots
    • Chevrons alone will not work
    • Appears that it simply needs to look like an affordance
    • Three dots alone is good for Android users, but for iPhone users maybe not so much

Page related[edit]

  • Select Page Language - Pau's awesome Icon
    • Not monochromatic, likely.
  • Font Settings - Two characters of different sizes (F?)
    • Problem with non-Latin scripts?
  • Save Page Edits
    • Nearly always will be a button
    • Tickmark next to Button Text


Mobile specialized[edit]

  • Save Page for Offline Reading - Pin icon
  • Share Page
  • Table of Contents
  • Page Turn
    This icon is described at Mobile_design/Contributors

Commons[edit]

  • Upload File/ Select a Media file to Donate
  • Rotate Left
  • Rotate Right

Wikipedia specific[edit]

  • Featured Article - Star
  • Random Article - Dice
  • What's Nearby - Map pin icon
  • Contact Us - Paper Airplane
  • Protected - Padlock
  • Semi-Protected
  • Featured Article Quality

Feature/Extension specific[edit]

AFTv5[edit]

  • Feature this Post
  • Hide this Post
  • Request Oversight/Oversight
  • Decline Oversight
  • View Activity
  • Mark as Resolved
  • Yes - thumbs up
  • No - thumbs down
  • Flag this Post
  • Happy
  • Sad
  • Neutral
  • Reply

Wikidata[edit]

  • Link
  • Unlink
  • Edit
  • Remove

Moodbar/Feedback dashboard[edit]

  • Happy
  • Sad
  • Confused

WikiLove[edit]

  • Wikilove Symbol Heart

New Pages Feed[edit]

  • Reviewed (Green Checkmark)
  • Nominated for Deletion (Currently black on the list view, black trash icon)
  • Unreviewed (Red Exclamation Mark)

Curation Toolbar[edit]

  • Close
  • Learn More Chevron

Echo[edit]

  • Welcome Message
  • Edit Reverted
  • Page Nominated for Deletion
  • User sent you a Message
  • Response to your feedback
  • Teahouse Talkback

Flow[edit]

Flow-specific items include

  • topic counts icon/indicator
  • view controls (full view / collapsed view / small view )

Language-related extensions[edit]

  • Language selection
  • Display settings
  • Input settings

Existing icons[edit]

This is a list of existing icons and where they are utilized and found in commons. Note that some or many will be replaced by the icons in the Icon list above.
  1. watchlist
  2. page actions
  3. user icon

See also[edit]