forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisual-style_icons.html
165 lines (157 loc) · 12.4 KB
/
visual-style_icons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<!--[if lte IE 8 ]><html lang="en" class="js-off lte-ie8"><![endif]-->
<!--[if IE 9 ]> <html lang="en" class="js-off ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="js-off">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta property="og:title" content="Visual Style: Icons - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/visual-style_icons.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/visual-style/icons-sample.svg">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: Icons – Wikimedia Design Style Guide</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs-off\b/,'js-on'); // no BEM notation thx to IE
</script>
<!--[if lt IE 9]>
<script>window.html5={'shivCSS':false};</script>
<script src="js/vendor/ie/html5shiv-3.7.3.min.js"></script>
<script src="js/vendor/ie/respond-1.4.2.min.js"></script>
<![endif]-->
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/fonts-loader.js" async></script>
<script>
var _paq = _paq || [];
_paq.push(['setDomains', ['*.design.wikimedia.org.']]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
function embedTrackingCode() {
var u='https://piwik.wikimedia.org/';
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
if (window.addEventListener) {
window.addEventListener('load', embedTrackingCode, false);
} else if (window.attachEvent) {
window.attachEvent('onload',embedTrackingCode);
} else {
embedTrackingCode();
}
</script>
</head>
<body class="page--visual-style-icons">
<header id="header" class="header" role="banner">
<div class="content-box">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav--main" class="is-aural is-focusable">Jump to navigation</a>
<h1 class="site__title"><a href="./"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h1>
<label class="btn--nav-main" for="trigger--nav-main" aria-hidden="true" title="Show main menu">
<i></i> <span>Menu</span>
</label>
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" class="lnk--contribute" title="Fork and contribute on GitHub"><span>Contribute on </span>GitHub</a>
</div>
</header>
<div class="page">
<div class="content-box">
<div class="col col--start">
<input type="checkbox" id="trigger--nav-main" class="trigger--nav-main">
<nav id="nav--main" class="nav nav--main" role="navigation">
<ol>
<li class="nav__item"><a href="index.html">Introduction</a></li>
<li class="nav__item"><a href="design-principles.html">Design principles</a></li>
<li class="nav__item is-on"><a href="visual-style.html">Visual style</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="visual-style.html">Principles</a></li>
<li class="nav__sub-item"><a href="visual-style_colors.html">Colors</a></li>
<li class="nav__sub-item"><a href="visual-style_typography.html">Typography</a></li>
<li class="nav__sub-item is-on"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item"><a href="visual-style_imagery.html">Imagery</a></li>
<li class="nav__sub-item"><a href="visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<!-- <li><a href="components.html">Components</a></li>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="resources.html">Resources</a></li> -->
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content" role="main">
<div class="page__parent-title">Visual Style</div>
<h1 class="page__title">Icons</h1>
<p>Icons help convey a message visually.</p>
<figure>
<img src="img/visual-style/icons-sample.svg" onerror="this.src='img/visual-style/icons-sample.png'" alt="Sample of WikimediaUI icons">
</figure>
<h3>Principles</h3>
<p>Wikimedia icons should be simple and neutral. <sup><a href="#References">[1]</a></sup></p>
<p><b>Reduce to the essential form.</b> Pare down details to convey the icon in as simple a shape as possible. The core idea of the design should be clearly conveyed, whilst remaining easily discernible even at smaller sizes. For example, a keyboard should <i>not</i> be represented by showing all 100+ keys that are in the real object, since this would make it unrecognizable. </p>
<p><b>Universal rather than culturally-specific.</b> Symbols and ideas represented in iconography should be known to a global audience. For example, do not use a dollar sign “$” to represent money, or a four-leaf clover to represent luck.</p>
<p><b>Avoid textual content within the icon.</b> Besides loss of universal recognition when including a specific language element, it may add unnecessary complexity. However, there are exceptions for icons directly related to language/text (for example, the icon for language switching).</p>
<p><b>Abstract forms or concrete objects.</b> Take consideration when deciding to use abstract or concrete objects in designing an icon. In some cases, concrete objects are preferred, such as using a die to convey “random” or a bell to convey an alert. In other cases, abstract symbols may be preferable, such as using an question mark “?” for help rather than a life preserver, or an ellipsis “…” to indicate “more”.</p>
<p><b>Neutral point of view.</b> Avoid concepts such as gestures, animals, religion, humor, ethnicity, and gender.</p>
<h3>Visual style</h3>
<p>Characteristics of a WikimediaUI icon:</p>
<ul>
<li><b>Monochromatic.</b> Solid color icons.</li>
<li><b>Geometric.</b> 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). </li>
<li><b>Front-facing. </b>Icons are flat and front facing, not multi-dimensional.</li>
<li><b>20 x 20 dp default canvas.</b> WikimediaUI icons are put on a 20 x 20 device-independent pixel (`dp`)<sup><a href="#References">[2]</a></sup> canvas per default.</li>
<li><b>Rounded corners.</b> 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.</li>
<li><b>Medium thick stroke.</b> 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.</li>
<li><b>Diagonal cross-out lines.</b> 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 “\”).</li>
</ul>
<h3>Guidelines for creating icons</h3>
<figure>
<figcaption>Icons follow a template. The default canvas is 20 x 20 dp. In order to allow for optical adjustments, a different margin is applied depending on the shape of the icon.</figcaption>
<img src="img/visual-style/icons-optical-adjustment.png" alt="Icon sizes at different shapes for optical adjustment">
</figure>
<p>Different shapes have a different perceived size. A 1 dp margin for square-shaped icon is used whilst a circle uses the full 20 x 20 dp canvas available to reach a similar perceived size.</p>
<p><b>Black icons</b> <br>
Use black (<a href="visual-style_colors.html">Base0</a>) on a transparent background as the boldest representation of an icon. The color can be changed when the icon is used (preferably done automatically by software).</p>
<p><b>Filled areas with no stroke outlines</b> <br>
For example, a donut icon is a filled circle with a hole in the middle rather than an unfilled circle with a thick stroke outline.</p>
<p><b>Pixel-fitting</b> <br>
Ensure icon shape edges are fit to pixels as closely as possible so that shapes are not distorted or fuzzy.</p>
<p><b>Right-to-left (RTL) and left-to-right (LTR) considerations</b> <br>
In cases where the icon is non-symmetrical, consider whether RTL or LTR directionality changes the meaning conveyed before creating the alternate direction variation. For example, the play button is universally seen as a triangle with a straight left edge and does not require two variations, whilst a bullet list icon would show the “bullets” in the list on the right or left side depending on whether it is shown in RTL or LTR language context.</p>
<h3>Usage</h3>
<p><b>Clearance on touch devices</b> <br>
When using icons consider the size of their target area. Even if icons are presented at a smaller size, make sure that the associated active area is at least 44 x 44 dp. Otherwise users may fail to hit the active area, not getting the expected result.</p>
<!-- FIXME: Use of labels -->
<p><b>Adapt and remix</b> <br>
Our icons are free licensed under CC BY 4.0. <br>
The simple style and guidelines make it easy to reuse or adapt existing freely licensed icons that you can find on other repos such as <a href="https://material.io/icons/" target="_blank" rel="noopener">Material icons</a> <sup><a href="#References">[3]</a></sup> or the <a href="https://thenounproject.com/" target="_blank" rel="noopener">Noun project</a> <sup><a href="#References">[4]</a></sup>. You are welcome to use existing icons that align to the proposed style instead of reinventing the wheel icon.</p>
<h3>Resources</h3>
<p>The <a href="https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop#icons-mediawiki-ltr">OOUI icon repository</a> provides a list of the currently available icons.</p>
<h3 id="References">References</h3>
<ol>
<li>Thanks to volunteer contributor <a href="https://phabricator.wikimedia.org/p/SamanthaNguyen/" target="_blank" rel="noopener">@SamanthaNguyen</a> for many suggestions on the “Principles” section in icons on <a href="https://phabricator.wikimedia.org/T155684" target="_blank" rel="noopener">Phabricator task T155684</a>.</li>
<li>1 dp equals 1 px in CSS at 100% zoom level and 1x device. <a href="https://en.wikipedia.org/wiki/Device-independent_pixel" target="_blank" rel="noopener">Device-independent pixel on English Wikipedia</a>.</li>
<li>Google offers a <a href="https://material.io/guidelines/style/icons.html" target="_blank" rel="noopener">Material icons overview and guide to use</a>.</li>
<li>The Noun Project provides curated <a href="https://thenounproject.zendesk.com/hc/en-us/articles/200509798-What-licenses-do-you-use-" target="_blank" rel="noopener">icon sets that are either Creative Commons Attribution (CC BY) or Public Domain (PD)</a>.</li>
</ol>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaUX" title="Follow Wikimedia User Experience team account on Twitter">Follow @WikimediaUX</a></li>
<li><a href="https://lists.wikimedia.org/mailman/listinfo/design" title="Join Wikimedia Design mailing list">Join mailing list</a></li>
</ul>
<p>Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project">A Wikimedia Foundation project</a></p>
<p><a href="https://wikimediafoundation.org/wiki/Privacy_policy">Privacy policy</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>