forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
visual-style_images.html
100 lines (97 loc) · 6.67 KB
/
visual-style_images.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
<!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: Images - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/visual-style_images.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-style-guide.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: Images – 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-images" 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 is-on"><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><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="page__parent-title">Visual Style</div>
<h1 class="page__title">Images</h1>
<p>Images are found in Wikimedia projects as standalone contributions and as supplementary content to engage and communicate with individuals.</p>
<section id="image-selection">
<h2>Image selection</h2>
<p>We use images to help increase understanding and engagement with individuals. When using images in our projects, the selections follow general guidelines:</p>
<ul>
<li><strong>Contextually relevant.</strong> Images relate directly to the subject of the article. An article about bicycles should contain images that relate to, support, and enrich content about bicycles.</li>
<li><strong>Neutral point of view.</strong> When showing an image of a shark, consider a side profile photograph of a shark instead of 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 an 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> Images should be high quality.</li>
<li><strong>Respects copyright.</strong> Images should be correctly attributed. Use Creative Commons, Fair use, or Public Domain images stored on Wikimedia Commons, and other sources that comply correctly with copyright licensing.</li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<p>For project-specific details, see the <a href="https://www.wikidata.org/wiki/Q6618850" target="_blank" rel="noopener">Image use policy</a> pages (e.g. <a href="https://en.wikipedia.org/wiki/Wikipedia:Image_use_policy" target="_blank" rel="noopener">English Wikipedia</a>), and <a href="https://www.wikidata.org/wiki/Q16745099" target="_blank" rel="noopener">Manual of Style/Images</a> guideline pages (e.g. <a href="https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Images" target="_blank" rel="noopener">English Wikipedia)</a>, that exist at some projects.</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>