Design/projects/Wikimedia Style Guide

From MediaWiki.org
Jump to: navigation, search


Wikimedia Style Guide is a set of guidelines for designing digital products at Wikimedia Foundation. We use the Wikimedia Style Guide to bring consistency in how our interfaces look and behave. These guidelines impact how our communities and users interact with our products.

This style guide is made to help designers and developers working on Wikimedia projects, either as part of Wikimedia Foundation or in a volunteer capacity.

Wikimedia Style Guide has few unique focus areas like accessibility, internationalization, and localization. These areas are important for building products for Wikimedia movement.

Our interfaces are our brand —  Wikimedia Style Guide also includes visual design principles that drive the aesthetics of our products.

Process[edit]

Wikimedia Foundation design team maintains the style guide. We’re a multidisciplinary team with experience in user experience design and research, engineering, information architecture, HCI, visual design, and usability.

Our process involves following our primary design principles to explore possible solutions for visual identity, user interface components and patterns.

Wikimedia Style Guide is always evolving and we encourage participation in growing this project.

Scope[edit]

Wikimedia Style Guide will include following set of guidelines

  1. Introduction
  2. Design Principles
  3. Visual style
    1. Principles
    2. Color
    3. Typography
    4. Iconography
    5. Imagery
    6. Illustrations
  4. Components
    1. Buttons and links
    2. Textfields
    3. Dropdowns
    4. Radio buttons and Checkboxes
    5. Toggle Switches
  5. Patterns
    1. Cards
    2. Tags
    3. Dialogs
    4. Lists
    5. Loading and waiting
  6. Resources
    1. For Designers
    2. For Developers

Roadmap[edit]

Wikimedia Style Guide is currently being worked on as part of Design Team's goal.

Goal Scope Quarter Status
Wikimedia Style Guide V1.0
  • Introduction
  • Design Principles
  • Visual style
    1. Principles
    2. Color
    3. Typography
    4. Iconography
    5. Imagery
    6. Illustrations
Q3 2017-2018 In progress In progress