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.html
114 lines (113 loc) · 7.69 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
<!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: Principles - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/visual-style.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/visual-style/principles-color-type.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: 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/wikimedia-design-style-guide.min.js" async></script>
</head>
<body class="page--visual-style" 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 is-on"><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>
<div class="page__parent-title">Visual Style</div>
<h1 class="page__title">Principles</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>
<p>Wikipedia – our most prominent project – is a modern encyclopedia with its roots in traditional knowledge sharing. Our design choices acknowledge the past, and look ahead to the future.</p>
<p>Paper was once the medium for spreading knowledge. Our encyclopedic knowledge was stored in the pages of leatherbound books. Today, we find it online. We access it from our computers, smartphones, and tablets.</p>
<p>We take our design cues from printed media, reflecting values like trustworthiness and academical objectivity.</p>
<figure class="figure figure--full">
<img src="img/visual-style/principles-paper-ink.svg" onerror="this.src='img/visual-style/principles-paper-ink.png'" alt="Paper and ink" role="img">
</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 class="figure figure--full">
<img src="img/visual-style/principles-paper-shadow.svg" onerror="this.src='img/visual-style/principles-paper-shadow.png'" alt="Sheet of paper dropping shadow on the background" role="img">
</figure>
<p>Paper casts subtle shadows onto a base surface. Paper is organic in nature. It has rounded corners.</p>
<figure class="figure figure--full">
<img src="img/visual-style/[email protected]" alt="Example screenshot of Wikipedia article about Dieter Rams">
</figure>
<p>We follow our design principles of content first. Content precedes chrome.</p>
<blockquote>Chrome is the visual design elements that give users information about or commands to operate on the screen's content (as opposed to being part of that content).
<cite><a href="https://www.nngroup.com/articles/browser-and-gui-chrome/" target="_blank" rel="noopener">Browser and GUI Chrome</a>, Nielsen 2012</cite>
</blockquote>
<p>Content goes on paper. Chrome stays on the base layer.</p>
<figure class="figure figure--full">
<img src="img/visual-style/principles-color-type.png" alt="Color and font guideline samples">
</figure>
<p>Our color choices are inspired by ink on paper: black, white, and blue. Our typography reflects traditional print typefaces.</p>
<figure class="figure figure--full">
<img src="img/visual-style/principles-style-tile.png" alt="Comparison of some of our guided attributes with “old medium” newspaper">
</figure>
<p>Our goal is to invoke the old and the new, to evoke joy and trust.</p>
</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>