forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisual-style_imagery.html
119 lines (116 loc) · 6.65 KB
/
visual-style_imagery.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
<!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: Imagery - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/visual-style_imagery.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-principles/content-first.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: Imagery – 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-imagery">
<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"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item is-on"><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">Imagery</h1>
<p>Imagery is found in Wikimedia projects as standalone contributions as well as powerful supplementary content to engage and communicate.
</p>
<h3>Imagery selection guidelines</h3>
<p>As the saying goes, an image can tell a thousand words. We use images to help increase understanding and engagement with a subject. When using imagery in our projects, the selections follow the general guidelines:</p>
<ul>
<li><strong>Contextually relevant.</strong> Images relate directly to the article subject.</li>
<li><strong>Neutral point of view.</strong> For example, when showing an image of a shark, use a side profile photograph of a shark rather than an action shot of a shark preying on another animal.</li>
<li><strong>Representation in the most accurate medium.</strong> Use a photograph of Rosalind Franklin in her biographic profile rather than artistic drawing. In an article about Donald Duck, use a cartoon still of Donald Duck instead of a photograph of a duck.</li>
<li><strong>Good resolution quality.</strong></li>
<li><strong>Respects copyright.</strong> We always correctly attribute images, using Creative Commons, Fair use, or Public Domain images stored on Wikimedia Commons, as well as a multitude of other sources so long as they comply correctly with licensing.</li>
</ul>
</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/wiki/Privacy_policy">Privacy policy</a></p>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project">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>