forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
visual-style.html
314 lines (293 loc) · 17.4 KB
/
visual-style.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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!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">
<link rel="stylesheet" href="css/wmui-style-guide.min.css">
<title>WikimediaUI Style Guide – Visual Style</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]-->
</head>
<body>
<header id="header" class="header" role="banner">
<div class="container">
<div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-offset-0">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav" class="is-aural is-focusable">Jump to navigation</a>
<h1 class="site__title"><a href="./"><span class="site__logo"></span>Wikimedia Style Guide</a></h1>
</div>
<div class="col-xs-hidden col-sm-5">
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" class="lnk--contribute">Contribute on Github</a>
</div>
</div>
<div class="header-navbar" class="navbar-collapse">
<label for="header-navbar-boolean">
<span class="hidden-desktop"></span>
</label>
<input type="checkbox" id="header-navbar-boolean" class="header-navbar-boolean">
<nav class="nav toc" role="nav">
<ol>
<li><a href="index.html">Introduction</a>
<ul class="toc__sub-sections">
<li><a href="#how-to-contribute">How to contribute</a></li>
</ul>
</li>
<li><a href="design-principles.html">Design principles</a>
<ul class="toc__sub-sections">
<li><a href="#this-is-for-everyone">This is for everyone</a></li>
<li><a href="#content-first">Content first</a></li>
<li><a href="#open-to-collaboration">Open to collaboration</a></li>
<li><a href="#trustworthy-yet-joyful">Trustworthy yet joyful</a></li>
<li><a href="#design-for-consistency">Design for consistency</a></li>
</ul>
</li>
<li class="is-on"><a href="visual-style.html">Visual style</a>
<ul class="toc__sub-sections">
<li><a href="#core-visual-identity">Core visual identity</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</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>
</header>
<div class="page">
<div class="content-box container">
<div class="col-xs-hidden col-sm-4 col-md-3">
<nav id="nav" class="nav toc" role="nav">
<ol>
<li><a href="index.html">Introduction</a>
<ul class="toc__sub-sections">
<li><a href="#how-to-contribute">How to contribute</a></li>
</ul>
</li>
<li><a href="design-principles.html">Design principles</a>
<ul class="toc__sub-sections">
<li><a href="#this-is-for-everyone">This is for everyone</a></li>
<li><a href="#content-first">Content first</a></li>
<li><a href="#open-to-collaboration">Open to collaboration</a></li>
<li><a href="#trustworthy-yet-joyful">Trustworthy yet joyful</a></li>
<li><a href="#design-for-consistency">Design for consistency</a></li>
</ul>
</li>
<li class="is-on"><a href="visual-style.html">Visual style</a>
<ul class="toc__sub-sections">
<li><a href="#principles">Principles</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#iconography">Iconography</a></li>
<li><a href="#imagery">Imagery</a></li>
<li><a href="#illustrations">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-xs-12 col-sm-8 col-md-9 col-md-offset-0">
<main id="content" class="content" role="main">
<h1 class="page__title">Visual Style</h1>
<p>Wikimedia projects are associated with learning, editorship, and books. They are neutral and transparent. They are about reading and writing. <!-- They remind you of ink and paper. --></p>
<section id="principles">
<h2>Principles</h2>
<p>Wikipedia is our most prominent project. <br>It's an encyclopedia. It's a modern encyclopedia. We have a certain perception of visual identity when we talk about encyclopedias. An identity which reflects wisdom. At the same time, traditional encyclopedias have a dated look and feel. This is also the big difference between traditional knowledge sharing and Wikipedia.
Wikipedia is continously evolving and we need to incorporate that into it's look and feel.</p>
<!-- <p>Wikipedia is in an unique position of an old idea but fresh content. That is exactly what we want to convey with our visual style.</p> -->
<p>Paper was the largest medium for spreading knowledge. Today it is
computers. We borrowed values that are tied to printed media. Values
like trustworthyness and academical objectivity.</em>
</p>
<figure>
<img src="img/visual-style/principles-paper-ink.png" alt="Paper and ink">
</figure>
<p>We start with basic elements like paper and ink, then extend it further
to match the needs of our visual character.</p>
<figure>
<img src="img/visual-style/principles-paper-shadow.png" alt="Sheet of paper dropping shadow on the background">
</figure>
<p>Paper casts subtle shadows onto a base surface. paper has slightly
rounded corners due to it's organic nature.</p>
<figure>
<img src="img/visual-style/principles-content-chrome.png" alt="Example screenshot of Wikipedia article about Dieter Rams">
</figure>
<p>We follow our design principles of content first. content precedes
chrome. content goes on paper, chrome stays on the base layer. <em><think
of better wording&rt;</em> make it obvious what is chrome.</p>
<figure>
<img src="img/visual-style/principles-color-type.png" alt="Color and font samples from our guideline">
</figure>
<p>Our color choices are inspired from black, white, and ink blue.
Typography has roots in traditional typefaces.</p>
<figure>
<img src="img/visual-style/principles-style-tile.png" alt="Comparison of some of our guided attributes with “old medium” New York Times">
</figure>
<p>It is an uncommon mix of new and old media. Joyful yet trustworthy.<br>The
topics in this section are execution of these ideas.</p>
</section>
<section id="colors">
<h2>Colors</h2>
<p>The <a href="https://phabricator.wikimedia.org/M82" target="_blank">color palette</a> represents our character and brings a hint of freshness to our products.</p>
<img src="img/Color-palette-2017-01-15.png" alt="color palette">
<p>Making the content readable for everyone was our main goal. Accessibility considerations have been our top priority. Each color in the palette indicates its <a href="https://www.w3.org/WAI/intro/wcag" target="_blank" title="Web Content Accessibility Guidelines 2.0">WCAG</a> conformance level (“AA” or “AAA”). It's based on colors' contrast against white or black.</p>
<h3>Base colors</h3>
<p>Base colors define the content surface and the main color for content. Different shades of paper and ink are useful to emphasise or de-emphasise different content areas.</p>
<p>Base colors go from pure white (Base100) to true black (Base0). Intermediate shades of grey include a tint of blue for greater harmony with our accent color.</p>
<p>When applying text on a surface, you need to <a href="http://webaim.org/resources/contrastchecker/" target="_blank">check the color contrast</a> between the text and the background: </p>
<ul>
<li>Base100…50 are safe text colors for a black surface.</li>
<li>Base50…0 are safe text colors for a white surface. </li>
</ul>
<div class="color-palette color-section">
<ol>
<li>
<strong class="color-name">Base100</strong>
<div class="color-swatch" style="background-color: #fff;">
<code class="color-code color-hex">#fff</code>
<code class="color-code color-rgb">RGB 255, 255, 255</code>
<code class="color-code color-hsb">HSB 0, 0%, 100%</code>
<span class="color-wcag-level">AAA</span>
</div>
</li>
<li>
<strong class="color-name">Base90</strong>
<div class="color-swatch" style="background-color: #f8f9fa;">
<code class="color-code color-hex">#f8f9fa</code>
<code class="color-code color-rgb">RGB 248, 249, 250</code>
<code class="color-code color-hsb">HSB 210, 1%, 98%</code>
<span class="color-wcag-level">AAA</span>
</div>
background</span>
</li>
<li>
<strong class="color-name">Base80</strong>
<div class="color-swatch" style="background-color: #eaecf0;">
<code class="color-code color-hex">#eaecf0</code>
<code class="color-code color-rgb">RGB 234, 236, 240</code>
<code class="color-code color-hsb">HSB 220, 3%, 94%</code>
<span class="color-wcag-level">AAA</span>
</div>
background</span>
</li>
<li>
<strong class="color-name">Base70</strong>
<div class="color-swatch" style="background-color: #c8ccd1;">
<code class="color-code color-hex">#c8ccd1</code>
<code class="color-code color-rgb">RGB 200, 204, 209</code>
<code class="color-code color-hsb">HSB 213, 4%, 82%</code>
<span class="color-wcag-level">AAA</span>
</div>
</li>
<li>
<strong class="color-name">Base50</strong>
<div class="color-swatch" style="background-color: #a2a9b1;">
<code class="color-code color-hex">#a2a9b1</code>
<code class="color-code color-rgb">RGB 162, 169, 177</code>
<code class="color-code color-hsb">HSB 212, 8%, 69%</code>
<span class="color-wcag-level">AAA</span>
</div>
</li>
<li>
<strong class="color-name">Base30</strong>
<div class="color-swatch" style="background-color: #72777d;">
<code class="color-code color-hex">#72777d</code>
<code class="color-code color-rgb">RGB 114, 119, 125</code>
<code class="color-code color-hsb">HSB 210, 9%, 49%</code>
<span class="color-wcag-level">AA / <span class="color-dark">AA</span></span>
</div>
</li>
<li>
<strong class="color-name">Base20</strong>
<div class="color-swatch color-dark" style="background-color: #54595d;">
<code class="color-code color-hex">#54595d</code>
<code class="color-code color-rgb">RGB 84, 89, 93</code>
<code class="color-code color-hsb">HSB 207, 10%, 36%</code>
<span class="color-wcag-level">AAA</span>
</div>
</li>
<li>
<strong class="color-name">Base10</strong>
<div class="color-swatch color-dark" style="background-color: #222;">
<code class="color-code color-hex">#222</code>
<code class="color-code color-rgb">RGB 34, 34, 34</code>
<code class="color-code color-hsb">HSB 0, 0%, 13%</code>
<span class="color-wcag-level">AAA</span>
</div>
</li>
<li>
<strong class="color-name">Base0</strong>
<div class="color-swatch color-dark" style="background-color: #000;">
<code class="color-code color-hex">#000</code>
<code class="color-code color-rgb">RGB 0, 0, 0</code>
<code class="color-code color-hsb">HSB 0, 0%, 0%</code>
<span class="color-wcag-level">AAA</span>
</div>
</li>
</ol>
</div>
<!--<img src="img/colors-base.png" alt="Base colors">-->
<h3>Accent colors</h3>
<p>Accent colors are used to emphasise actions and highlight key information. Blue is a natural choice in our context, where it has been the default color used for links, conveying the idea of action.</p>
<p>There are three shades provided for situations where you need a lighter (Accent90), regular (Accent50) or darker (Accent10) version.</p>
<p>Accent50 provides a blue which is suitable to be used for text and as background. When used as link text it provides sufficient contrast with black text to notice the difference. When used as background, it provides enough contrast with white text to keep the text readable.</p>
<img src="img/colors-accent.png" alt="Accent colors">
<h3>Utility colors</h3>
<p>Red, green and yellow are Utility colors. They can act as accent colors bringing the additional meaning that is commonly associated with them.</p>
<p>Intentions</p>
<img src="img/colors-utility.png" alt="Utility colors">
<h3>Additional colors</h3>
<p>For some uses such as charts and data visualisation, a broader color palette may be needed. When extending the default palette with new colors, make sure to aim for level AA contrast with other colors according to their use, and how they are perceived for different color-blind conditions.</p>
</section>
<section id="typography">
<h2>Typography</h2>
<p>Because so much of Wikipedia and wiki projects rely on writing and reading, typography is a key component of Wikimedia design. You need to consider the typeface, size, style and spacing of your text to make it achieve a good <a href="https://en.wikipedia.org/wiki/Readability">readability</a>.</p>
<p><em>This section is currently under development. See dev branch of this repo for up-to-date discussion results.</em></p>
</section>
<section id="icons">
<h2>Icons</h2>
Icons help convey a message visually.
<h3>Icon style</h3>
<img src="img/icons-sample.png" alt="Sample of icons">
<p>Icons should be simple. They use monochromatic vector-based shapes with the following properties:</p>
<ul>
<li><b>Filled areas.</b> Shapes are defined by filled areas as opposed to outlines.</li>
<li><b>Rounded corners.</b> Corners are slightly rounded to make shapes more friendly and welcoming, but not too much to look goofy.</li>
<li><b>Medium thick strokes.</b> Strokes should be visible at smaller sizes without effort.</li>
<li><b>Diagonal cross-out lines.</b> Icons with a cross-out line will have it from the top-left to the bottom right (like “\”).</li>
</ul>
<h3>Using icons</h3>
<p>The <a href="https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-ltr">icon repository</a> provides a list of the currently available icons.</p>
<p>When using icons you need to consider the size of their target area. Even if icons are presented at a smaller size, you need to make sure that the associated active area is at least 48x48sp. Otherwise users may fail to hit the active area, not getting the expected result.</p>
<h3>Creating icons</h3>
<p>Icons follow a template. The default canvas is 24x24px. In order to allow for optical adjustments, a different margin will be applied depending on the shape of the icon.</p>
<figure>
<img src="img/icons-optical-adjustment.png" alt="Optical adjustment for icons">
<figcaption>Different shapes have a different perceived size. A 1px margin for square shapes is used so that other shapes such as circles can expand to reach a similar perceived size.</figcaption>
</figure>
<p>Icons are created using black (<a href="#colors">Base0</a>). Their color can be changed when the icon is used (preferably done automatically by software).</p>
<p>The simple style and guidelines make it easy to reuse or adapt existign freely licensed icons that you can find on other repos such as <a href="https://material.io/icons/">material icons</a> or the <a href="https://thenounproject.com/">noun project</a>. You are welcome to use existing icons that align to the proposed style instead of reinventing the wheel icon.</p>
</section>
</main>
</div>
</div>
<footer id="footer" class="footer">
Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.
</footer>
</div>
</body>
</html>