[Design] Design resources on wiki

[May Tee-Galloway]

​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

[May Tee-Galloway]

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

Post by May Tee-Galloway
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
.
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

[Sherah Smith]

Thanks May!!! Super helpful.

Post by May Tee-Galloway
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

Post by May Tee-Galloway
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

Post by May Tee-Galloway
resources from the Design Resources section of our team's wiki
.
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
https://lists.wikimedia.org/mailman/listinfo/design

[May Tee-Galloway]

​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
<Loading Image...>
​
) 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

[Kaity Hammerstein]

Documentation started for apps

Drawers on iOS: https://phabricator.wikimedia.org/M122
Drawers on Android: https://phabricator.wikimedia.org/M118

Post by May Tee-Galloway
​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>
​.
- 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
https://lists.wikimedia.org/mailman/listinfo/design

[May Tee-Galloway]

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 <

Post by Kaity Hammerstein
Documentation started for apps
Drawers on iOS: https://phabricator.wikimedia.org/M122
Drawers on Android: https://phabricator.wikimedia.org/M118

Post by May Tee-Galloway
​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>
​.
- 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
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design