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
/
design-principles.html
164 lines (158 loc) · 10.9 KB
/
design-principles.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
<!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="Design Principles - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/design-principles.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-principles/trust.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Design Principles – 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--design-principles" 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 is-on"><a href="design-principles.html">Design principles</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="design-principles_accessibility.html">Accessibility</a></li>
</ul>
</li>
<li class="nav__item"><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"><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>
<h1 class="page__title">Design principles</h1>
<p>When making design decisions, we need to choose among possible solutions. Design principles help to decide what to prioritize.</p>
<p>Our design principles:</p>
<ul>
<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>
<p>These are described below and aligned to our <a href="https://design.wikimedia.org/">statement of purpose</a>. Find further <a href="https://meta.wikimedia.org/wiki/Design"> details at Design on Wikimedia Meta-Wiki</a>.</p>
<section id="this-is-for-everyone">
<h2>This is for everyone</h2>
<p>We aim to support a very diverse audience. This is a core part of our mission. We strive to help users overcome any barriers that may exist between them and the knowledge our projects provide. These barriers could include accessibility, languages, device and network capabilities, levels of technical expertise, or many other circumstances. When improving the experience for a given group of people, we need to make sure we are not increasing the barriers for others.</p>
<figure class="figure figure--full figure--this-is-for-everyone">
<picture>
<source media="( min-width: 415px )" srcset="img/design-principles/this-is-for-everyone.svg">
<source media="( min-width: 320px )" srcset="img/design-principles/this-is-for-everyone--mobile.svg">
<img src="img/design-principles/this-is-for-everyone.png" alt="Human centered, inclusive design represented as accessible keyboard metaphor with collection of Wikimedia characters and icons">
</picture>
</figure>
</section>
<section id="content-first">
<h2>Content first</h2>
<p>People come to Wikimedia projects for their content. Our solutions should help to facilitate its creation, consumption, and sharing — without getting in the way. Our content (facts, images, quotes, etc.) is our most representative element and needs to be emphasized in our solutions.</p>
<figure class="figure figure--full">
<picture>
<source media="( min-width: 415px )" srcset="img/design-principles/[email protected]">
<source media="( min-width: 320px )" srcset="img/design-principles/[email protected]">
<img src="img/design-principles/[email protected]" alt="Wikipedia Page Preview in action. Wikipedia15 anniversary visual marks – Amelia Earhart, International Space Station, pyramids of Gizeh and a kiwi bird">
</picture>
</figure>
</section>
<section id="open-to-collaboration">
<h2>Open to collaboration</h2>
<p>Our projects are collaborative. Discussion and sharing are key factors to consider. To support diversity and a global mission, our solutions need to provide room for extension and customization to meet particular needs and foster different perspectives.</p>
<figure class="figure figure--full">
<picture>
<source media="( min-width: 415px )" srcset="img/design-principles/open-to-collaboration_Wikimania_2016.jpg">
<source media="( min-width: 320px )" srcset="img/design-principles/open-to-collaboration_Wikimania_2016--mobile.jpg">
<img src="img/design-principles/open-to-collaboration_Wikimania_2016.jpg" alt="Wikimania 2016 atendees group photo with Wikimedia logo in foreground">
</picture>
<figcaption class="figure__caption">
<a href="https://commons.wikimedia.org/wiki/File:Wikimania_2016_-_group_photo_03.jpg">Group photo</a> during Wikimania 2016 in Esino Lario with volunteers attending from all around the world.
</figcaption>
</figure>
</section>
<section id="trustworthy-yet-joyful">
<h2>Trustworthy yet joyful</h2>
<p>Wikimedia projects provide reliable educational knowledge. At the same time, our projects are a source of entertainment and satisfy human curiosity. This requires us to find the right balance: we need to convey trust with our solutions and remain entertaining and fresh.</p>
<figure class="figure figure--full figure--trustworthy-yet-joyful">
<picture>
<source media="( min-width: 415px )" srcset="img/design-principles/[email protected]">
<source media="( min-width: 320px )" srcset="img/design-principles/trustworthy-yet-joyful--mobile.svg">
<img src="img/design-principles/[email protected]" alt="Screenshot of trending readers topic graph" role="img">
</picture>
</figure>
</section>
<section id="design-for-consistency">
<h2>Design for consistency</h2>
<p>It is important to rely on familiar concepts to facilitate understanding. People relate quickly and orient easily when we keep consistency in our design and maintain common patterns – independent while careful of their platforms, languages or form factors.</p>
<figure class="figure figure--full">
<picture>
<source media="( min-width: 415px )" srcset="img/design-principles/[email protected]">
<source media="( min-width: 320px )" srcset="img/design-principles/[email protected]">
<img src="img/design-principles/[email protected]" alt="Screenshots of various Foundation software products with consistent user-interface attributes" role="img">
</picture>
<figcaption class="figure__caption">Screenshots of Galaxy Wikipedia article in Egyptian Arabic on Android, <a href="https://en.m.wikipedia.org/wiki/Galaxy" target="_blank">English on mobile web</a> and Japanese on iOS.</figcaption>
</figure>
</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>