The standardization team is currently working on the Wikimedia User Interface style guide, where it will be a one-stop shop for all design resources and specs in the future. But for now, you can obtain these updated resources from the Design Resources section of our team's wiki.
It includes: UI elements for use by designers / others (Sketch • how to use gif) and specs for developers (WMFLabs • LESS file); Three ways of using our icon library -- SVG, SVG sprite, and Icon font. We will keep updating this thread as more resources become available and updated.
-- mm
Links in plain text:
Team wiki - https://www.mediawiki.org/wiki/Wikimedia_User_Interface
Sketch file - http://bit.ly/1k24Ydf (make a copy for yourself, do not edit original file) How to use gif - http://bit.ly/1P7A00g
WMFlabs - http://wikimedia-ui.wmflabs.org LESS file - http://bit.ly/1m6QxGm
Icon SVG - http://bit.ly/1P6DCxQ Icon SVG sprite - https://wikimedia-ui.wmflabs.org/MW/icons.svg Icon font - https://github.com/munmay/WikiFont
-- mm
On Wed, Dec 16, 2015 at 3:26 AM, May Tee-Galloway mgalloway@wikimedia.org wrote:
The standardization team is currently working on the Wikimedia User Interface style guide, where it will be a one-stop shop for all design resources and specs in the future. But for now, you can obtain these updated resources from the Design Resources section of our team's wiki .
It includes:
UI elements for use by designers / others (Sketch • how to use gif ) and specs for developers (WMFLabs • LESS file);
Three ways of using our icon library -- SVG, SVG sprite, and Icon font.
We will keep updating this thread as more resources become available and updated.
-- mm
Thanks May!!! Super helpful.
On Wed, Dec 16, 2015 at 3:34 AM, May Tee-Galloway mgalloway@wikimedia.org wrote:
Links in plain text:
Team wiki - https://www.mediawiki.org/wiki/Wikimedia_User_Interface
Sketch file - http://bit.ly/1k24Ydf (make a copy for yourself, do not edit original file) How to use gif - http://bit.ly/1P7A00g
WMFlabs - http://wikimedia-ui.wmflabs.org LESS file - http://bit.ly/1m6QxGm
Icon SVG - http://bit.ly/1P6DCxQ Icon SVG sprite - https://wikimedia-ui.wmflabs.org/MW/icons.svg Icon font - https://github.com/munmay/WikiFont
-- mm
On Wed, Dec 16, 2015 at 3:26 AM, May Tee-Galloway mgalloway@wikimedia.org wrote:
The standardization team is currently working on the Wikimedia User Interface style guide, where it will be a one-stop shop for all design resources and specs in the future. But for now, you can obtain these
updated
resources from the Design Resources section of our team's wiki .
It includes:
UI elements for use by designers / others (Sketch • how to use gif ) and specs for developers (WMFLabs • LESS file);
Three ways of using our icon library -- SVG, SVG sprite, and Icon font.
We will keep updating this thread as more resources become available and updated.
-- mm
-- mm
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
The standardization team is currently working on the Wikimedia User Interface style guide, where it will be a one-stop shop for all design resources and specs in the future. But for now, you can obtain these updated resources from the Design Resources section of our team's wiki https://www.mediawiki.org/wiki/Wikimedia_User_Interface .
It includes:
- UI elements for use by designers / others (Sketch https://www.dropbox.com/s/qg45uofd173mo62/MediawikiUI.sketch?dl=0 • how to use gif https://upload.wikimedia.org/wikipedia/commons/0/07/How_to_turn_pencil_and_paper_sketch_to_high_fidelity_mock_up_with_Sketch_app.gif ) and specs for developers (WMFLabs http://wikimedia-ui.wmflabs.org/ • LESS file https://github.com/munmay/WikimediaUI/blob/master/MW/custom-variables.less );
- Three ways of using our icon library -- SVG https://www.dropbox.com/sh/tn5jctp80x1q8sp/AAC3oZ7TbN26QK89rE6e_XdIa?dl=0 , SVG sprite https://wikimedia-ui.wmflabs.org/MW/icons.svg, and Icon font https://github.com/munmay/WikiFont.
We will keep updating this thread as more resources become available and updated.
-- mm
Documentation started for apps
Drawers on iOS: https://phabricator.wikimedia.org/M122 Drawers on Android: https://phabricator.wikimedia.org/M118
On Wed, Jan 20, 2016 at 1:38 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
The standardization team is currently working on the Wikimedia User Interface style guide, where it will be a one-stop shop for all design resources and specs in the future. But for now, you can obtain these updated resources from the Design Resources section of our team's wiki https://www.mediawiki.org/wiki/Wikimedia_User_Interface .
It includes:
- UI elements for use by designers / others (Sketch
https://www.dropbox.com/s/qg45uofd173mo62/MediawikiUI.sketch?dl=0 • how to use gif https://upload.wikimedia.org/wikipedia/commons/0/07/How_to_turn_pencil_and_paper_sketch_to_high_fidelity_mock_up_with_Sketch_app.gif ) and specs for developers (WMFLabs http://wikimedia-ui.wmflabs.org/ • LESS file https://github.com/munmay/WikimediaUI/blob/master/MW/custom-variables.less );
- Three ways of using our icon library -- SVG
https://www.dropbox.com/sh/tn5jctp80x1q8sp/AAC3oZ7TbN26QK89rE6e_XdIa?dl=0 , SVG sprite https://wikimedia-ui.wmflabs.org/MW/icons.svg, and Icon font https://github.com/munmay/WikiFont.
We will keep updating this thread as more resources become available and updated.
-- mm
-- mm
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Thanks Kaity.
Here's a quick and dirty way to document UI patterns and components that are *currently* used in Wikimedia projects.
1. Take a screenshot 2. Add to appropriate folder on Dropbox https://www.dropbox.com/sh/l1a4jr2usffz8wy/AAAwMmcYHRn53yZgfD2DHcIwa?dl=0 3. Rename the filename to *platform_location/use case/feature/whatever info helpful for locating use case.png*
mm
On Wed, Jan 20, 2016 at 2:10 PM, Kaity Hammerstein < khammerstein@wikimedia.org> wrote:
Documentation started for apps
Drawers on iOS: https://phabricator.wikimedia.org/M122 Drawers on Android: https://phabricator.wikimedia.org/M118
On Wed, Jan 20, 2016 at 1:38 PM, May Tee-Galloway <mgalloway@wikimedia.org
wrote:
The standardization team is currently working on the Wikimedia User Interface style guide, where it will be a one-stop shop for all design resources and specs in the future. But for now, you can obtain these updated resources from the Design Resources section of our team's wiki https://www.mediawiki.org/wiki/Wikimedia_User_Interface .
It includes:
- UI elements for use by designers / others (Sketch
https://www.dropbox.com/s/qg45uofd173mo62/MediawikiUI.sketch?dl=0 • how to use gif https://upload.wikimedia.org/wikipedia/commons/0/07/How_to_turn_pencil_and_paper_sketch_to_high_fidelity_mock_up_with_Sketch_app.gif ) and specs for developers (WMFLabs http://wikimedia-ui.wmflabs.org/ • LESS file https://github.com/munmay/WikimediaUI/blob/master/MW/custom-variables.less );
- Three ways of using our icon library -- SVG
https://www.dropbox.com/sh/tn5jctp80x1q8sp/AAC3oZ7TbN26QK89rE6e_XdIa?dl=0 , SVG sprite https://wikimedia-ui.wmflabs.org/MW/icons.svg, and Icon font https://github.com/munmay/WikiFont.
We will keep updating this thread as more resources become available and updated.
-- mm
-- mm
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design