Section 9.2. THE BASICS OF VISUAL DESIGN


9.2. THE BASICS OF VISUAL DESIGN

As 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. COLOR

Color 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:

  • Always put dark foregrounds against light backgrounds, or vice versato test, pull the design into an image tool like Photoshop and desaturate it (make it grayscale).

  • Never use red versus green as a critical color distinction, since many colorblind people won't be able to see the difference. Statistically, 10 percent of men have some form of colorblindness, as do about 1 percent of women.

  • Never put bright blue small text on a bright red or orange background, or vice versa, because human eyes can't read text written in complementary colors (on opposite sides of the color wheel).

With that out of the way, here are some very approximate guidelines for color usage.


Warm versus cool

Red, orange, yellow, brown, and beige are considered "warm" colors. Blue, green, purple, gray (in large quantities), and white are considered "cool." The yellow CSS Zen Garden in Design 6 feels vividly "hot," despite the cool gray metallic surface used behind the content itself. Sites and interfaces that need to connote respectability and conservativeness often use predominantly cool colors (especially blue). Still, warm and cool colors can combine very effectively to achieve a balanced lookand they frequently do, in classic paintings and poster designs.


Dark versus light background

The pages with light backgroundswhite, beige, and light grayfeel very different from the ones with very dark backgrounds. Light is more typical of computer interfaces (and printed pages); dark pages can feel edgier, more somber, or more energetic, depending on other design aspects. Actually, dark palettes are rarely used in form-style interfaces because desktop-native controls, such as text fields and buttons, don't look good on dark backgrounds.


High versus low contrast

Whether the background is dark or light, the elements on that background might have either high or low contrast against it. Strong contrast evokes tension, strength, and boldness; low contrast is more soothing and relaxing.


Saturated versus unsaturated

Highly saturated, or pure, colorsbrilliant yellows, reds, and greens, for exampleevoke energy, vividness, brightness, and warmth. They are daring; they have character. But when overused, they can tire the eyes, so most UI designers use them sparingly; they often choose only one or two. Muted colors, either dark or light (tones or tints, respectively), make up the bulk of most color palettes. The green-and-blue Zen Garden design, Design 3, gets away with two saturated colors by using white borders, white text, and dark halos to separate the green and blue. (Even so, you probably wouldn't want to stare at that green all day long in a desktop application.)


Combinations of hues

Once you start combining colors, interesting effects happen. Two saturated colors can evoke far more energy, motion, or richness than one alone. A page that combines one saturated color with a set of muted colors directs attention to the saturated color, and sets up "layers" of colorthe brighter and stronger ones appear closer to the viewer, while the grayer and paler colors recede. Strong dimensionality can make a design dramatic. Flatter designs, with more muted or lighter colors, are calmer. See the Few Hues, Many Values pattern for more discussion.

9.2.2. TYPOGRAPHY

By 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.

  • On computer displays, sans-serif fonts often work better at small point sizes, unlike print, in which the serifed fonts tend to be more readable as body text. Pixels aren't big enough to render tiny serifs well. (Some serifed fonts, like Georgia, do look okay, though.) Display technologies such as anti-aliasing affect legibility greatly, so test the candidate fonts on your application's destination platforms.

  • Avoid italicized, cursive, or otherwise ornamental fonts; they are unreadable at small sizes.

  • Highly geometric fonts, with circular letters (e, c, d, o, etc.), tend to be difficult to read at small point sizes. Those letters are hard to differentiate. Futura, Univers, and some other mid-twentieth-century fonts are like this.

  • All-caps is too hard to read for body text, though it's okay for headlines and short texts, if the font is chosen carefully. Capital letters tend to look similar, and are hard for a reader to differentiate.

  • Set large amounts of text in a medium-width column when possiblesay around 10 to 12 English words, on average. Don't right-justify narrower columns of text; let it be "ragged right."

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 CROWDING

Some 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 CURVES

A 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 RHYTHM

Texture 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.

[3] On an interesting etymological note, the English words "text," "texture," and "textile" all derive from the same Latin root, texere, meaning "to weave." Isn't that evocative?

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 designs


9.2.6. IMAGES

Each 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 REFERENCES

A 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 MOTIFS

A 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.




Designing Interfaces
Designing Interfaces: Patterns for Effective Interaction Design
ISBN: 0596008031
EAN: 2147483647
Year: 2005
Pages: 75

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net