This repository has been archived by the owner on May 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 100
/
visual-style_illustrations.html
143 lines (138 loc) · 11.9 KB
/
visual-style_illustrations.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
<!DOCTYPE html>
<html lang="en" class="js--off">
<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: Illustrations - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/visual-style_illustrations.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/visual-style/illustrations-sample.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: Illustrations – Wikimedia Design Style Guide</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs--off\b/,'js--on');
</script>
<link rel="dns-prefetch" href="https://piwik.wikimedia.org/">
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/matomo-tracking.min.js"></script>
<script src="js/wikimedia-design-style-guide.min.js" async></script>
</head>
<body class="page--visual-style-illustrations" vocab="http://schema.org/" typeof="WebPage">
<header id="header" class="header">
<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>
<h6 class="site__title"><a href="./"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h6>
<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" target="_blank" rel="noopener" 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">
<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"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item"><a href="visual-style_images.html">Images</a></li>
<li class="nav__sub-item is-on"><a href="visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<li><a href="components/links.html">Components</a></li>
<li class="nav__item"><a href="apps/apps.html">Apps</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">
<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
<span class="cdx-message__icon"></span>
<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
</div>
<div class="page__parent-title">Visual Style</div>
<h1 class="page__title">Illustrations</h1>
<section id="illustration-style" class="content__illustration-style">
<h2>Illustration style</h2>
<div class="figure--full">
<figure class="figure figure--illustrations-header">
<img src="img/visual-style/illustrations-header--start.svg" onerror="this.src='img/visual-style/illustrations-header--start@2x.png'" alt="Sample of four illustrations">
</figure>
<figure class="figure figure--illustrations-header">
<img src="img/visual-style/illustrations-header--end.svg" onerror="this.src='img/visual-style/illustrations-header--end@2x.png'" alt="Sample of four illustrations">
</figure>
</div>
<p><strong>Colored backgrounds</strong><br>
Illustrations that appear on a colored background should not include an outline stroke. Elements inside of the illustration should also not contain an outline stroke. Any lines inside of the illustration should have a weight of 2 dp. The illustration can utilize any of the colors available in the Style Guide excluding <span class="color-hint" style="--color-hint: #000;" title="#000">Base0</span>.</p>
<p><strong>White background</strong><br>
Illustrations that appear on a white background should include a 2 dp outline stroke in <span class="color-hint" style="--color-hint: #72777d;" title="#72777d">Base30</span>. Elements inside of the illustration can contain an outline stroke, this stroke should also be a 2 dp stroke in Base30. The illustration can utilize any of the colors available in the Style Guide excluding Base0.</p>
<p><strong>Grey scale</strong><br>
Grey scale illustrations (for use in empty states) should include a 2 dp outline stroke in <span class="color-hint" style="--color-hint: #a2a9b1;" title="#a2a9b1">Base50</span>. Elements inside of the illustration can contain an outline stroke, this stroke should also be a 2 dp stroke in Base50. The illustration should only include base colors excluding Base0.</p>
</section>
<section id="using-illustrations">
<h2>Using illustrations</h2>
<figure class="figure">
<picture>
<source media="( min-width: 415px )" srcset="img/visual-style/illustrations-using.svg">
<source media="( min-width: 320px )" srcset="img/visual-style/illustrations-using--mobile.svg">
<img src="img/visual-style/illustrations-using.svg" onerror="this.src='img/visual-style/illustrations-using.png'" alt="Human centered, inclusive design represented as accessible keyboard metaphor with collection of Wikimedia characters and icons">
</picture>
</figure>
<p>Illustrations should be used as a supporting element alongside text and should never appear alone. Illustrations should be relevant and context-aware of their surroundings, do not include illustrations simply for decoration. Empty states, onboarding, or modals containing messaging are the primary use cases for utilizing illustrations. Utilize the appropriate illustration style depending on the background that the illustration will be presented on.</p>
<p>Illustrations should never appear pixelated. Test the resolution of your illustration for the specific the ratios you will be using it in.</p>
</section>
<section id="creating-illustrations">
<h2>Creating illustrations</h2>
<figure class="illustrations-case-study">
<img src="img/visual-style/illustrations-colored-background.svg" onerror="this.src='img/visual-style/illustrations-colored-background.png'" alt="Illustration on colored background">
<img src="img/visual-style/illustrations-white-background.svg" onerror="this.src='img/visual-style/illustrations-white-background.png'" alt="Illustration on white background">
<img src="img/visual-style/illustrations-grey-background.svg" onerror="this.src='img/visual-style/illustrations-grey-background.png'" alt="Illustration on grey background">
<figcaption class="figure__caption">In production case studies</figcaption>
</figure>
<p>Illustrations should fit within a 200 dp by 200 dp square. Some illustrations may need to be taller than they are wide (and visa versa) but overall illustrations should look balanced within their 200 dp boundary.</p>
<p>Illustrations must adhere to the colors outlined in this Style Guide, however no illustrations should use Base0. Illustrations may include transparent elements or cut outs, however no elements may be depicted as semi-transparent or with a reduced opacity. All elements should either be transparent or displayed at 100% opacity.</p>
<p>When designing a new illustration, focus on legibility. Illustrations consist of a single element or focused composition. Illustrations should be simple, clear, universal and memorable.</p>
<p>Illustrations should be simple. They use monochromatic vector-based shapes with the following properties:</p>
<ul>
<li>Filled areas. Shapes are defined by filled areas as opposed to outlines.</li>
<li>Rounded corners. Corners are slightly rounded (2 dp) to make shapes more friendly and welcoming, but not too much to look goofy.</li>
<li>2 dp outline stroke, except for illustrations that appear on colored backgrounds.</li>
</ul>
<p>Illustrations must adhere to the colors outlined in this Style Guide, however no illustrations should use Base0. As a general recommendation, an illustration should utilize no more than 3 accent or supplementary colors (eg. <span class="color-hint" style="--color-hint: #36c;" title="#36c">Blue50</span>, <span class="color-hint" style="--color-hint: #d33;" title="#d33">Red50</span>, <span class="color-hint" style="--color-hint: #00af89;" title="#00af89">Green50</span> and <span class="color-hint" style="--color-hint: #fc3;" title="#fc3">Yellow50</span>) to avoid visual complexity. Additionally, special care should be taken when using reds with greens or blues in the same composition. Users with red-green color blindness may have difficulty differentiating between red and green elements, especially if they are overlapping. Red and blue elements should also be treated with care so as to avoid the visual illusion of <a href="https://en.wikipedia.org/wiki/Chromostereopsis" target="_blank" rel="noopener">chromostereopsis</a>. Illustrations may include transparent elements or cut outs, however all elements should be shown as either 0 or 100% opacity.</p>
</section>
<section id="resources">
<h2>Resources</h2>
<p>Find the Wikimedia illustration building blocks under <a href="resources.html">“Resources”</a> or directly here as <a href="resources/WikimediaUI_illustrations-building-blocks.sketch" target="_blank" rel="noopener">Sketch source file</a> or as collection of <a href="resources/WikimediaUI_illustrations-building-blocks.zip" target="_blank" rel="noopener">SVGs in a ZIP file</a>.</p>
</section>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list footer__list--connect">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaDesign" title="Follow Wikimedia Product Design team on Twitter">Follow @WikimediaDesign</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" property="license">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<ul class="footer__list footer__list--policy">
<li><a href="https://wikimediafoundation.org/privacy-policy/">Privacy policy</a></li>
<li><a href="https://design.wikimedia.org/accessibility-statement.html">Accessibility statement</a></li>
</ul>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project" property="author" typeof="Organization">A Wikimedia Foundation project</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>