9.2. THE BASICS OF VISUAL DESIGNAs you looked at the Zen Garden examples, you might have observed how they achieve such different impressionsa page's color scheme may cause you to either smile or cringe, for example. Using these examples as a touchstone, we can talk about some of the principles of good visual design. You might recall that we've already covered some visual design principles in Chapter 4, Layout, and Chapter 6, Information Graphics. Those chapters explored how the human visual system responds cognitively to certain inputs. The time it takes for someone to click on an orange square out of a field of blue squares, for example, doesn't depend upon a user's aesthetic sense or cultural expectations. But now we're talking about emotional and visceral reactionsdoes a single orange square add tension, brightness, balance, or nothing at all to a design? The answer depends on so many factors that it's genuinely hard to get it "right" without a lot of practice. The cognitive aspects of these design choices certainly play a part; for starters, you can make a page hard or easy to read (a cognitive effect). But each person is unique. Each person has a different history of experiences, associations, and preferences; and each person is part of a culture that imposes its own meanings on color, typography, and imagery. Furthermore, the context of the design affects the user's response. Users see your design as a part of a genre (such as office applications, games, or e-commerce sites), and they will have certain expectations about what's appropriate, trite or original, dull or interesting. Branding also sets expectations. So here's the problem: as soon as you learn a "rule" for evoking an emotional reaction using a design principle, you can find a million exceptions. That said, if you know your audience well, visceral and emotional responses are surprisingly predictable. For example, most readers of this book probably thought that the first CSS example was a calm, soothing design, but that the second one was noisier and more tense. Why is that? The answer lies in a combination of many factors working in concert: color, typography, spaciousness, angles and shapes, repeated visual motifs, texture, images, and cultural references. 9.2.1. COLORColor is immediate. It's one of the first things you perceive about a design, along with basic forms and shapes. Yet the application of color to art and design is infinitely subtlemaster painters have studied it for centuries. We can only scratch the surface here. When devising a color scheme for an interface, first rule out anything that makes it impossible to read:
With that out of the way, here are some very approximate guidelines for color usage.
9.2.2. TYPOGRAPHYBy choosing a font (properly called a typeface) for a piece of text, you decide what kind of voice that text is "spoken" in. The voice might be loud or soft, friendly or formal, colloquial or authoritative, hip or old-fashioned. As with color, readabilitythe cognitive partcomes first when choosing type. Small text, or what's called "body text" in print and on web sites, demands careful choice. The following considerations for body text also apply to "label fonts" in GUIs, used to caption text fields and other controls.
Now for the visceral and emotional aspects. Fonts have distinctive voices, or colors, if you prefer. They have different graphic characteristics and textures on the page. For instance, some fonts are dense and dark, while others are more open. Look at the thickness of strokes and the relative sizes of letter openings for clues. Some fonts have narrower letters than others, and some font families have "condensed" versions to make them even narrower. The separation between lines of text (the leading) might be distant or close, making the block of text look either more open or more solid. Serifs and curves add another dimension to font color or texture. Serifs add a level of scale that's much smaller than the letterform itself, and that adds refinement to the font's texturethe thick sans-serif fonts look blunt, strong, or even coarse in comparison (especially Helvetica). The curves and angles used in each letterform, including those that form the serifs, combine to form an overall texture. Compare an old-fashioned typeface such as Goudy Old Style to another classic serifed font such as Didot; they look very different on the page (Figure 9-9). Figure 9-9. Eight fonts, as rendered on Mac OS X. Notice the different sizes, densities, textures, and formalities.Though it's not always easy to explain why, some fonts speak with a formal voice, while others speak with an informal voice. Comic Sans and other playful fonts are certainly informal, but so is Georgia, when compared to Didot. All-caps and capitalized words speak more formally than lowercase; italics speak informally. In the CSS Zen Garden designs shown earlier, Design 8 uses an all-caps, sans-serif font to speak in a cool and removed voice. Meanwhile, Design 5 (which uses Georgia) speaks in a warm and informal voice. Cultural aspects come into play here too. Old-fashioned fonts, usually with serifs, tend to lookwait for itold-fashioned, although anything set in Futura (a sans-serif font) still looks like it came from a 1963 science textbook. Verdana has been used so much on the Web that it's now standard for that medium. And Chicago always will be the original Mac font, no matter what context it's used in. 9.2.3. SPACIOUSNESS AND CROWDINGSome of the CSS Zen Garden designs use plenty of whitespace, while others crowd the page elements together. Spaciousness on a page gives an impression of airiness, openness, quiet, calmness, freedom, or stateliness and dignity, depending on other design factors. Crowded designs can evoke urgency or tension under some circumstances. Why? Because text and other graphic elements need to "breathe"when they're colliding against each other, or against the edges or borders of the page, they cause visual tension. Our eyes want to see margins around things. We get slightly disturbed by designs such as CSS Zen Garden Design 2 (the black one with white arrows), which shoves the headlines right against the text. Likewise, Design 6's compact layout somehow contributes to the busy, industrial feel of the page, though it doesn't have collisions like Design 2. However, not all crowded designs evoke that kind of tension. Some connote friendliness and comfort. If you give the text and other elements just enough space, and reduce the interline spacing (leading) to the smallest amount that is comfortably readable, then you might achieve a friendlier and less rarified look. Design 5, the one with the daisy, illustrates this well. 9.2.4. ANGLES AND CURVESA page composed of straight up-and-down lines and right angles generally looks calmer and more still than a page containing diagonal lines and non-rectangular shapes. Likewise, a page with many different angles has more apparent motion than a page with a single repeated angle on itsee Design 7 for an dramatic example. Design 6 uses angles to create uneasiness and visual interest. Curves also can add motion and liveliness, but not always. A design made with a lot of circles and circular arcs can be calming and restful. But a curve swooping through a page sets the whole design in motion, and a few carefully chosen curves in an otherwise rectangular design add sophistication and interest. Design 8 uses a single large elliptical curve for a dramatic effectit contrasts strongly against the otherwise rectilinear design, so its impact is high. Wherever two curves intersect, notice what the geometrical tangents to those curves are doing. Are the tangents at right angles? That results in a calmer, more still composition; if they cross at a more acute angle, the design has more tension and apparent motion. (Again, these aren't hard-and-fast rules, but they're generally true.) When using angles, curves, and non-rectangular shapes, think about where the focal points are: at sharp angles, where lines cross, and where multiple lines converge, for instance. Use these focal points to draw the viewer's eye where you want it to go. 9.2.5. TEXTURE AND RHYTHMTexture adds richness to a visual design. As described in the "Typography" section, text forms its own texture,[3] and you can control the look of that texture by choosing good fonts. For many pages and interfaces, fonts are the most important texture element.
But other kinds of textures deserve attention too. Blank regions, like the strips of empty space down the sides of a web page, can look much better when filled with a texture. You also can use textures to surround strong visual elements and set them off, as done in Designs 6 and 7. Textures add visual interest, and depending on what they look like, they can add warmth, richness, excitement, or tension. The most effective textures in interface design are subtle, not vivid checkerboards of eye-hurting colors. They use gentle color gradations and very tiny details. When spread over large areas, their impact is greater than you might think. Figure 9-10 shows some of the margin textures in the CSS designs. Single-pixel dots, parallel lines, and finely-drawn grids are nice geometric textures; they're easy to generate and render, and they add refinement to a design. See the Hairlines pattern. Be careful when using textures behind words on a computer screenit rarely works. All but the most subtle textures interfere with the readability of small text. You can put them behind large text, but watch the way the edges of the letterforms interact with the different colors in the texture, as that can visually distort the letters. Try fading a texture into a solid color as it approaches a block of text. Figure 9-10. Details of textures in four CSS designs9.2.6. IMAGESEach of the CSS Zen Garden designs reproduced here uses imagery. Some are photographs, and others are iconic semi-abstract pictures. In all cases, the images exist purely to set the mood of the design. These particular designs can go as far as they need to set that mood, since in the CSS Zen Garden, the design is more important than the content. Your situation probably is different. In most applications and web applications, content and ease of use are more important than style. You should use purely decorative images sparingly and with great care on functional GUIs, since they tend to be distracting. That said, you should look at the functional icons and images in your designsuch as toolbar icons and Illustrated Choices (see Chapter 7)and see if they make the emotional statement you want the whole design to make. Use the same criteria listed here: color, texture, angles, curves, spacing, and so on. Specifically, color schemes, angles, and curves should be consistent across an icon set. Don't make them look too much alike, though, or users won't see the differences easily. Larger icons usually "feel" better than small ones, partly because you can draw them more generously, and partly because of the crowding and space issues discussed earlier. Back to decorative imagery. Photographs are extraordinary tools for evoking emotional responses. How many web pages have you seen showing happy, smiling faces? Kids flying kites? Competent-looking businesspeople in crisp suits? How about roads winding through beautiful mountain scenery? Sunsets or beaches? Rolling grassy hills under sunny blue skies? (You may find this one on something other than a web page.) These kinds of pictures appeal to our deepest human instincts, and they all predispose the viewer to respond positivelyas long as the context is right. If you try to put powerful images like these on an unassuming little utility application, users might laugh or criticize it as marketing overkill. This is a delicate area, and if you're not sure something works, test it with users. 9.2.7. CULTURAL REFERENCESA design might remind you of something culturala brand, movie, art style, historical era, literary genre, or an inside joke. A familiar reference may evoke memories or emotions strong enough to trump all these other design factors, though the best designs make cultural references work in concert with everything else. Design 7 might remind you of a 1950s movie poster. That's almost certainly deliberate. The feel of the page is informal, lively, and playfulnote the angles, color, and typography. The emotional reaction from most American adults probably will be "silly," "nostalgic," "retro cool," or something like that. Everything in this design works together to produce a specific gut reaction. Some other CSS designs not shown here replicate the styles of Bauhaus, Art Nouveau, Dadaism, comic books, and even Soviet-era Communist propaganda posters. Obviously, if you make overt cultural references, consider your audience. A 10-year-old will not get the 1950s movie-poster reference. Chances are good that a young adult in India won't either. But if your audience is sufficiently well-defined for you to know that a cultural reference will be familiar to them, then it can be a good "hook" to engage a viewer emotionally with your design. Cultural references rarely are used in functional application designs, but you can see them in Skins for applications such as Winamp. Its library of user-contributed skins include a Klingon style, an iPod imitation, and one that looks like an Etch-a-Sketch. The user-contributed GNOME backgrounds and themes are a rich source of references, too. You also can find cultural references in applications like Quickbooks, in which some pages are designed to look like checks and bills. They actually move beyond a stylistic treatment and become an interaction metaphor, but the metaphor still is entirely culturalsomeone who's never seen a checkbook wouldn't respond in the same way as someone who has. 9.2.8. REPEATED VISUAL MOTIFSA good design has unity: it hangs together as one entity, with each element supporting the others structurally and viscerally. That's a hard goal to achieve. I can't give you hard-and-fast rules on how to do it; it takes skill and practice. But one thing that contributes greatly toward visual unity is the repetition of visual elements or motifs. We've already talked about angles and curves; you can use diagonal lines of the same angle, or lines with similar curvature, as repeated elements in a design. The Corner Treatments pattern talks about a common way to do this. Also consider typography. Use only one main body-text font, though other fonts work very effectively in small areas like sidebars or navigation links. (Their contrast to the main font make them stand out.) If you have several headlines or titled sections, use the same headline font for them. You also can pull smaller graphic elementsline width and color, for instanceout of your fonts into the rest of the design. See the Borders that Echo Fonts pattern. When similar groupings of text or controls repeat along a line, a visual rhythm results. You can see this especially in the "Select a Design" sections of Designs 3, 4, and 8. They show each of the design name/author pairs in a well-defined grouping, and then repeat that grouping along a column. You easily could accomplish the same effect with form fields, palette buttons, and other UI elements. Rhythms like these can be powerful design tools. Use them with care, and apply them to groups of comparable thingsusers will assume that similarity in form means similarity in function. Incidentally, visual rhythm is what makes Small Multiples (Chapter 6) look so attractive when done well. |