1
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Chapter8.Visual Design</title><meta name="generator" content="DocBook XSL Stylesheets V1.65.1"><link rel="home" href="index.html" title="GNOME Human Interface Guidelines 2.0"><link rel="up" href="index.html" title="GNOME Human Interface Guidelines 2.0"><link rel="previous" href="feedback-interrupting.html" title="Allowing Interruptions"><link rel="next" href="design-window.html" title="Window Layout"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Chapter8.Visual Design</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="feedback-interrupting.html">Prev</a></td><th width="60%" align="center"></th><td width="20%" align="right"><a accesskey="n" href="design-window.html">Next</a></td></tr></table><hr></div><div class="chapter" lang="en"><div class="titlepage"><div><div><h2 class="title"><a name="design"></a>Chapter8.Visual Design</h2></div></div><div></div></div><div class="toc"><dl><dt><span class="sect1"><a href="design.html#design-color">Color</a></span></dt><dd><dl><dt><span class="sect2"><a href="design.html#Palette">Palette</a></span></dt><dt><span class="sect2"><a href="design.html#hsv">Hue, Brightness, Contrast</a></span></dt></dl></dd><dt><span class="sect1"><a href="design-window.html">Window Layout</a></span></dt><dd><dl><dt><span class="sect2"><a href="design-window.html#id2547183">General</a></span></dt><dt><span class="sect2"><a href="design-window.html#layout-dialogs">Dialogs</a></span></dt><dt><span class="sect2"><a href="design-window.html#window-layout-spacing">Spacing and Alignment</a></span></dt></dl></dd><dt><span class="sect1"><a href="design-text-labels.html">Text Labels</a></span></dt><dd><dl><dt><span class="sect2"><a href="design-text-labels.html#layout-label-position">Spacing and Alignment</a></span></dt><dt><span class="sect2"><a href="design-text-labels.html#layout-capitalization">Capitalization</a></span></dt></dl></dd><dt><span class="sect1"><a href="design-fonts.html">Fonts</a></span></dt></dl></div><p>Visual design is not just about making your application look pretty. Good visual design is about communication. A well-designed application will make it easy for the user to understand the information that is being presented, and show them clearly how they can interact with that information. If you can achieve all that, your application <span class="emphasis"><em>will</em></span> look good to the user, even if it doesn't have any fancy graphics or spinning logos!</p><div class="sect1" lang="en"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="design-color"></a>Color</h2></div></div><div></div></div><p>Color is a good tool for communicating information in a user interface. For example, it can be used to:</p><div class="itemizedlist"><ul type="disc"><li><p>strengthen a desktop's look and feel by enhancing a theme</p></li><li><p>accent a dynamic alert in a system management application</p></li><li><p>emphasize an element in a long list to expedite scanning</p></li><li><p>add aesthetically pleasing details to an icon</p></li></ul></div><p>However, color should always be regarded as a useful addition to your design, not as a necessity. Never depend upon colors alone to display important information, and keep in mind that if colors cannot be perceived correctly (for example, the user has an 8-bit system, or is color-blind), your application should still be usable. </p><div class="sect2" lang="en"><div class="titlepage"><div><div><h3 class="title"><a name="Palette"></a>Palette</h3></div></div><div></div></div><p>A 32-color palette has been developed for the GNOME desktop. The palette may be downloaded from <a href="http://developer.gnome.org/projects/gup/images/ximian-palette" target="_top">http://developer.gnome.org/projects/gup/images/ximian-palette</a>. To use it in The GIMP, save it to your <tt class="filename">~/.gimp_1.2/palettes</tt> folder, and restart The GIMP. A single, consistently-used palette helps give a unified look and feel to the desktop while minimizing visual distractions. If you need a color that is darker or lighter than the colors in this basic palette (e.g., for anti-aliasing), choose a color that is closest to the hue you need, then darken or lighten as required.</p><div class="figure"><a name="id2545550"></a><p class="title"><b>Figure8.1.The basic GNOME 32-color palette</b></p><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="177"><tr style="height: 23px"><td><img src="images/ximian-palette.png" height="23" alt="The basic GNOME 32-color palette"></td></tr></table></div></div><div class="table"><a name="id2545590"></a><p class="title"><b>Table8.1.RGB and hexadecimal values for the basic palette</b></p><table summary="RGB and hexadecimal values for the basic palette" border="0"><colgroup><col><col><col><col><col><col><col><col></colgroup><thead><tr valign="top"><th align="left" valign="top">Color</th><th align="left" valign="top">Description</th><th align="left" valign="top">RGB</th><th align="left" valign="top">Hex</th><th align="left" valign="top">Color</th><th align="left" valign="top">Description</th><th align="left" valign="top">RGB</th><th align="left" valign="top">Hex</th></tr></thead><tbody valign="middle"><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-1.png" height="27"></td></tr></table></div></td><td align="left">Basic 3D Hilight</td><td align="left">234 232 227</td><td align="left">#EAE8E3 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-2.png" height="27"></td></tr></table></div></td><td align="left">Basic 3D Medium</td><td align="left">186 181 171</td><td align="left">#BAB5AB</td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-3.png" height="27"></td></tr></table></div></td><td align="left">Basic 3D Dark</td><td align="left">128 125 116</td><td align="left">#807D74 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-4.png" height="27"></td></tr></table></div></td><td align="left">3D Shadow</td><td align="left">86 82 72</td><td align="left">#565248 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-5.png" height="27"></td></tr></table></div></td><td align="left">Green Hilight</td><td align="left">197 210 200</td><td align="left">#C5D2C8 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-6.png" height="27"></td></tr></table></div></td><td align="left">Green Medium</td><td align="left">131 166 127</td><td align="left">#83A67F </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-7.png" height="27"></td></tr></table></div></td><td align="left">Green Dark</td><td align="left">93 117 85</td><td align="left">#5D7555 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-8.png" height="27"></td></tr></table></div></td><td align="left">Green Shadow</td><td align="left">68 86 50</td><td align="left">#445632 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-9.png" height="27"></td></tr></table></div></td><td align="left">Red Hilight</td><td align="left">224 182 175</td><td align="left">#E0B6AF </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-10.png" height="27"></td></tr></table></div></td><td align="left">Red Medium</td><td align="left">193 102 90</td><td align="left">#C1665A </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-11.png" height="27"></td></tr></table></div></td><td align="left">Red Dark</td><td align="left">136 70 49</td><td align="left">#884631 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-12.png" height="27"></td></tr></table></div></td><td align="left">Red Shadow</td><td align="left">102 56 34</td><td align="left">#663822 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-13.png" height="27"></td></tr></table></div></td><td align="left">Purple Hilight</td><td align="left">173 167 200</td><td align="left">#ADA7C8 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-14.png" height="27"></td></tr></table></div></td><td align="left">Purple Medium</td><td align="left">136 127 163</td><td align="left">#887FA3 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-15.png" height="27"></td></tr></table></div></td><td align="left">Purple Dark</td><td align="left">98 91 129</td><td align="left">#625B81 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-16.png" height="27"></td></tr></table></div></td><td align="left">Purple Shadow</td><td align="left">73 64 102</td><td align="left">#494066 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-17.png" height="27"></td></tr></table></div></td><td align="left">Blue Hilight</td><td align="left">157 184 210</td><td align="left">#9DB8D2 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-18.png" height="27"></td></tr></table></div></td><td align="left">Blue Medium</td><td align="left">117 144 174</td><td align="left">#7590AE </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-19.png" height="27"></td></tr></table></div></td><td align="left">Blue Dark</td><td align="left">75 105 131</td><td align="left">#4B6983 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-20.png" height="27"></td></tr></table></div></td><td align="left">Blue Shadow</td><td align="left">49 78 108</td><td align="left">#314E6C </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-21.png" height="27"></td></tr></table></div></td><td align="left">Face Skin Hilight</td><td align="left">239 224 205</td><td align="left">#EFE0CD </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-22.png" height="27"></td></tr></table></div></td><td align="left">Face Skin Medium</td><td align="left">224 195 158</td><td align="left">#E0C39E </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-23.png" height="27"></td></tr></table></div></td><td align="left">Face Skin Dark</td><td align="left">179 145 105</td><td align="left">#B39169 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-24.png" height="27"></td></tr></table></div></td><td align="left">Face Skin Shadow</td><td align="left">130 102 71</td><td align="left">#826647 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-25.png" height="27"></td></tr></table></div></td><td align="left">Accent Red</td><td align="left">223 66 30</td><td align="left">#DF421E </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-26.png" height="27"></td></tr></table></div></td><td align="left">Accent Red Dark</td><td align="left">153 0 0</td><td align="left">#990000 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-27.png" height="27"></td></tr></table></div></td><td align="left">Accent Yellow</td><td align="left">238 214 128</td><td align="left">#EED680 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-28.png" height="27"></td></tr></table></div></td><td align="left">Accent Yellow Dark</td><td align="left">209 148 12</td><td align="left">#D1940C </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-29.png" height="27"></td></tr></table></div></td><td align="left">Accent Green </td><td align="left">70 160 70</td><td align="left">#46A046 </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-30.png" height="27"></td></tr></table></div></td><td align="left">Accent Green Dark</td><td align="left">38 199 38</td><td align="left">#267726 </td></tr><tr><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-31.png" height="27"></td></tr></table></div></td><td align="left">White</td><td align="left">255 255 255</td><td align="left">#ffffff </td><td align="left"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="49"><tr style="height: 27px"><td><img src="images/palette-32.png" height="27"></td></tr></table></div></td><td align="left">Black</td><td align="left">0 0 0</td><td align="left">#000000 </td></tr></tbody></table></div></div><div class="sect2" lang="en"><div class="titlepage"><div><div><h3 class="title"><a name="hsv"></a>Hue, Brightness, Contrast</h3></div></div><div></div></div><p>Users with vision disorders, such as color-blindness or low vision, require alternatives to default settings. A good user interface anticipates these needs by providing customizable preferences and support for accessible themes. Even better is an application that is already configured with carefully-chosen color and contrast defaults.</p><p>An estimated 11% of the world population has some sort of color-blindness. Those affected typically have trouble distinguishing between certain hues such as red and green (deuteranopia or protanopia), or blue and yellow (tritanopia). Therefore it is necessary to allow the user to customize colors in any part of your application that conveys important information. This means that your application must effectively convey information using just the colors from any theme that the user chooses.</p><p>A useful tool for reviewing information about color-blindness and checking legibility of images for color-blind users is <a href="http://www.vischeck.com/" target="_top">Vischeck</a>, an online tool that simulates the way an image or a website might appear to a user who has deuteranopia, protanopia, or tritanopia. </p><div class="figure"><a name="id2546971"></a><p class="title"><b>Figure8.2.How the earth looks to a user with normal color vision (left), deuteranopia (middle), and tritanopia (right). (Images from <a href="http://www.vischeck.com" target="_top">http://www.vischeck.com</a>).</b></p><div class="informaltable"><table border="0"><colgroup><col><col><col></colgroup><tbody valign="top"><tr><td align="center"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="160"><tr style="height: 160px"><td><img src="images/earthNorm.png" width="160" alt="Photo of earth as a normally-sighted user would see it"></td></tr></table></div></td><td align="center"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="160"><tr style="height: 160px"><td><img src="images/earthDeutan.png" width="160" alt="Photo of earth as a user with red-green color-blindness would see it"></td></tr></table></div></td><td align="center"><div class="mediaobject"><table border="0" summary="manufactured viewport for HTML img" cellspacing="0" cellpadding="0" width="160"><tr style="height: 160px"><td><img src="images/earthTritan.png" width="160" alt="Photo of earth as a user with blue-yellow color-blindness would see it"></td></tr></table></div></td></tr></tbody></table></div></div><p>Other users have more problems with contrast levels rather than hue on their screen. Some users require a high level of contrast between background and foreground colors, such as black on white, white on black, or some other high-contrast combination. Others can experience discomfort unless they use low-contrast settings, such as gray text on a lighter gray background.</p><p>You can meet these needs by ensuring your application supports the accessible GNOME themes (found in the gnome-themes module in cvs), which include high and low contrast themes, and large print themes. This means you must supply default and large sizes of high-, low- and regular-contrast icon sets with your application. </p><div class="itemizedlist"><p class="title"><b>Guidelines</b></p><ul type="disc"><li><p>Use the GNOME color palette. If you need a darker or lighter shade, start from one of the colors from the palette and darken or lighten as needed.</p></li><li><p>Do not use color as the only means to distinguish items of information. All such information should be provided by at least one other method, such as shape, position or textual description.</p></li><li><p>Ensure your application is not dependent on a particular theme. Test it with different themes, especially high and low contrast accessibility themes, which use fewer colors, to ensure your application respects the settings. For example, all text should appear in the foreground color against the background color specified in the chosen theme.</p></li><li><p>Select colors carefully. When they need to be recognizably different, select the light colors from orange, yellow, green or blue-green, and darker colors from blue, violet, purple or red, as most people affected by color-blindness already see blue, violet, purple and red as darker than normal.</p></li></ul></div></div></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="feedback-interrupting.html">Prev</a></td><td width="20%" align="center"><a accesskey="u" href="index.html">Up</a></td><td width="40%" align="right"><a accesskey="n" href="design-window.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">Allowing Interruptions</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">Window Layout</td></tr></table></div></body></html>
|
