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 subtle—master 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 the text difficult to read:

With that out of the way, here are some very approximate rules for color usage:

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, readability—the cognitive part—comes first when choosing type. Small text—or what’s called “body text” in print and on websites—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—they have different graphic characteristics, textures, and colors 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, and use the “squint test” if you need a fresh and objective look at the font. 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 and texture. Serifs add a level of scale that’s much smaller than the letterform itself, and that adds refinement to the font’s texture—the 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. See Figure 11-9.

Figure 11-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 or Baskerville. All-caps and capitalized words speak more formally than lowercase; italics speak informally. In the CSS Zen Garden designs shown earlier, Design 8 (Figure 11-8) uses an all-caps, sans-serif font to speak in a cool and removed voice. Meanwhile, Design 5 (Figure 11-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 look—wait for it—old-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.

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 (Figure 11-2), which shoves the headlines right against the text. Likewise, the compact layout of Design 6 (Figure 11-6) 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, you might achieve a friendlier and less rarified look. Design 5 (Figure 11-5) illustrates this well.

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 nonrectangular shapes. Likewise, a page with many different angles has more apparent motion than a page with a single repeated angle on it; see Design 7 (Figure 11-7) for a dramatic example. Design 6 uses angles to create uneasiness and visual interest.

Curves can also 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 (Figure 11-8) uses a single large elliptical curve for a dramatic effect—it 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 nonrectangular 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.

Texture adds richness to a visual design. As described in the Typography section, text forms its own texture,^[11] 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, such as 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 11-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 screen—it rarely works. All but the subtlest 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 11-10. Details of textures in four CSS designs

Each of the CSS Zen Garden designs reproduced here uses imagery. Some of the images are photographs; 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, design is more important than content.

Your situation is probably different. In most web pages and 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 being said, you should look at the functional icons and images in your design—such as toolbar icons and website image links—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?

These kinds of pictures appeal to our deepest human instincts, and they all predispose the viewer to respond positively—as 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, so if you’re not sure something works, test it with users.

A design might remind you of something cultural—a brand, movie, art style, historical era, literary genre, or 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 1970s pop art. That’s almost certainly deliberate. The feel of the page is informal, lively, and playful—note the angles, color, typography, and denim texture. 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 Zen Garden designs that are 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 1970s pop-art 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, 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 and Themes for platforms and individual applications. 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 cultural—someone who has never seen a checkbook wouldn’t respond in the same way as someone who has.

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 can work very effectively in small areas such as sidebars or navigation links. (Their contrast to the main font makes them stand out.) If you have several headlines or titled sections, use the same headline font for them. You also can pull smaller graphic elements—line width and color, for instance—out 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 design name/author pair 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 things—users will assume that similarity in form means similarity in function. Chapter 4 discusses element repetition as part of a visual hierarchy; see the Grid of Equals pattern there. Repetition also lies at the heart of other layout patterns such as Thumbnail Grid (Chapter 5), Thumbnail-and-Text List (Chapter 10), and Small Multiples (Chapter 7).

Place an image or gradient into the page’s background that visually recedes behind the foreground elements.

Your page layout has strong visual elements (such as text blocks, groups of controls, or windows), and it isn’t very dense or busy. You want the page to look distinctive and attractive; you may have a visual branding strategy in mind. You’d like to use something more interesting than flat white or gray for the page background.

Backgrounds that have soft focus, color gradients, and other distance cues appear to recede behind the more sharply defined content in front of them. The content thus seems to “float” in front of the background. This pseudo-3D look results in a strong figure/ground effect—it attracts the viewer’s eye to the content.

Fancy explanations aside, it just looks good.

Use a background that has one or more of these characteristics:

Figure 11-12. Diffuse versus strong focal points

As you design an interface with a Deep Background, consider what happens when the user changes the size of the page. How will the background accommodate a larger (or smaller) size? Will it rescale to fit, or will the window just clip an unscaled image? Clipping is probably less unsettling to the user; it’s how most web pages behave, and it feels more stable. Besides, you don’t have to worry about changing aspect ratios, which is problematic with many images.

In Figure 11-13, four Mac OS background images illustrate the relative difficulties of reading text and icons over complex backgrounds. The first two make it quite hard to distinguish the folders and application shortcuts; the third is easier, and the fourth is the easiest by far. Note the characteristics of these four backgrounds: high versus low contrast with the text, hard versus soft focus, and general “noisiness.”

Figure 11-13. Four Mac OS backgrounds of varying readability

Some websites make heavy use of textures that lend the whole site a distinctive look. In the example from Ecoki, shown in Figure 11-14, the textures are everywhere; but because they are lightweight and low-contrast, they don’t interfere with the readability of the text.

Figure 11-14. Ecoki home page

The version of the Mercedes-Benz website shown in Figure 11-15 uses an image as a background. This image has some very strong focal points—the cars, of course—and they are the central features of the page. But the outer parts of the image, which are much softer, are Deep Background for other content: the search box, the four small images at the bottom, and the “4MATIC All-Wheel Drive” tag line.

The most interesting aspect of this figure is the darker band running down the lefthand side. The site needed a navigation bar with small text, but layering those links directly over the background image wouldn’t have worked—the words may have been unreadable over small detail, and would have gotten lost in the composition. A translucent smoked-glass background highlights those white links by increasing contrast; it balances the page (which otherwise is right-weighted); it doesn’t obscure the nice background image; and it adds a sense of layered depth.

Figure 11-15. Mercedes-Benz

Choose one, two, or at most three major color hues to use in the interface. Create a color palette by selecting assorted values (levels of brightness) from within those few hues.

You want a relatively conservative color scheme for an application or site. You want to avoid a flashy, rainbow-colored, “angry fruit salad” look, but you still want the interface to have some character.

Where colors are concerned, sometimes less is better. Too many color hues scattered throughout the interface, especially when they’re bright and saturated, can potentially make a design noisy and cluttered. The colors compete for the user’s attention.

But when you use many subtle variations on a single color, you can create a design that has depth and dimension. Consider the blue-green, yellow-green, and orange colors used in the example in Figure 11-16 and reproduced in the color strips in Figure 11-17. Notice how the more saturated colors move forward, while the paler colors appear to recede. (Grayer tones will tend to recede as well, hence the drop-shadow effect seen in the Mint page.)

Figure 11-17. Colors used in Mint’s interface

As mentioned earlier, pick one, two, or even three main hues. You get black and white for free, but gray counts. In fact, gray works very well in multiple values and brightness levels; it’s very versatile, especially if you add a little color to make it more blue (cool) or more beige (warm).

Within those hues, vary the color value to get a range of bright and dark shades. You also can vary the saturation at the same time; this can produce subtler color combinations than you would get by varying just the value. Use as many of these colors as you want to compile a color palette for the application.

You can, of course, use other colors in the interface besides these hues; just use them sparingly. Icons, ads, and other features that take up relatively small spaces don’t have to fit this restricted color scheme. You might want to choose only one or two accent colors too, such as using red or cyan to mark points of interest. In fact, using a single hue for the “background” of the UI actually emphasizes these minor colors because they don’t get lost in a sea of color hues.

The graph in Figure 11-18 uses two hues, blue and pink, to show its data. Blue represents boys’ names and pink represents girls’ names. Within those colors, the color value represents the popularity of those names in 2003. A third color, dark gray, shows the frame around the data—the grid lines, the numbers, and the title—and a dark blue highlights the selected name (“Dale”).

This color combination is very effective, both cognitively and aesthetically. The hues and values mean something with respect to the data, and the coding is very easy to follow—you hardly even need the legend after you’ve looked at it once. Aesthetically, the whole thing has a layered richness that isn’t garish, as rainbow hues would have been. And in U.S. culture, people understand light blues and pinks as “baby” colors, so the emotional and cultural connection is there, too. See http://babynamewizard.com.

Figure 11-18. Baby Name Wizard

Figure 11-19 shows two websites that make very restrained use of color. The first balances hot and cool colors, while the second uses a single color for most of the design, reserving the hot orange color to accent the call-to-action buttons.

Figure 11-19. OnlineMBARankings.com and AdLucent.com

http://quince.infragistics.com/Patterns/Few%20Hues.aspx

Instead of using ordinary right angles, use curves or diagonals for some of the interface’s box corners. Make these corner treatments consistent across the interface.

The interface uses rectangular elements such as boxes, buttons, menus, and tabs.

The repetition of visual motifs helps unify a design. When you devise a single “corner” motif and use it consistently in many places, it gives a distinctive look to the whole design. It’s certainly less boring than ordinary right-angled corners.

Many websites use curved corners. Others use diagonal lines, and a few use cutouts. What you choose depends on the overall look of your site. Do you have a logo, an image, or a font that has eye-catching visual elements to it? Use one of those visual elements. Are you going for something soothing (as curves often are), edgy, or energetic? Try out several different ideas.

Not all of the rectangular elements in the interface need to use corner treatments—don’t use too much of a good thing. But group boxes or panels usually do, and tabs commonly are done this way, too. If you use corner treatments on one element in a repeated group, do them all for consistency.

Furthermore, not every corner on a given box needs to use a corner treatment. Sometimes two opposing corners get it, such as the upper right and lower left. Sometimes it’s just one corner, usually the upper left or upper right.

Everywhere the element is repeated, make sure it resembles the others. In other words, curved corners should use the same type of curve (though not necessarily the same radius). Angles should all be the same angle—don’t mix a 45-degree angle motif with a 20-degree angle, for instance. Also, curved and right angles tend to mix badly on visually busy sites. Use Corner Treatments this with care.

The JetBlue website in Figure 11-20 at the top of the pattern repeats its curved corners all over the site: in menu bars, the main content box, tabs, and buttons. Pandora, shown in Figure 11-21, does the same, even for “callout” pop ups containing lyrics.

http://quince.infragistics.com/Patterns/Corner%20Treatments.aspx

Figure 11-21. Pandora

The Getty Museum’s site in Figure 11-22 uses bars across the tops of its content boxes, and curves on the bottom corners. (The tabs also use curved corners, which is common.)

Figure 11-22. Getty.org

When drawing borders and other lines, use the same color, thickness, and curves used by one of the design’s major fonts.

Your design contains a font carefully chosen for its visual effect, such as the font used in headlines, a title, or a logotype.

The repetition of visual motifs helps unify a design. Fonts and borders work at similar scales in a design—only a few pixels wide—and when they reinforce each other visually, their effect is magnified. When they clash (especially if you use many different kinds of borders), their contributions are weakened.

First, pick a font from your design. Title and headline fonts often work well, as do fonts used in logotypes, but sometimes body text works, too. Observe its formal properties: color, primary line thickness, texture, curve radius, angles, and spacing.

Now try to draw borders and lines that use some of those same properties. The color should be the same as the font’s, though you can cheat on thickness and make borders a bit thinner than the font’s strokes. If the font has pronounced circular curves, as many modern sans-serif fonts do, try using that same curve radius on the border corners.

If it’s a particularly interesting font, ask yourself what makes it interesting. See if you can pull those visual elements from the font into the rest of the design.

You don’t need to do this with all the borders in your interface, of course; just a few will do, especially if the lines are thick. Be careful not to make borders too thick or coarse. Thick borders make a strong statement, and after a point, they overwhelm whatever’s inside them. Images usually can handle a thicker border than lightweight body text, for instance. You can use single-pixel lines effectively in combination with heavier borders.

In Figure 11-24, Mochimedia uses its logotype’s “fat curves” all over the design. The heavy black border strongly echoes the logotype; so do the icons, the headline, the top menu bar, and the cartoon character itself.

Figure 11-24. Mochimedia

Many sites use very thin borders and separator lines that reflect the visual qualities of a body font. In Good’s website, shown in Figure 11-25, the one-pixel dotted lines echo the delicate serifed body font in the sidebar. (A sans-serif font might be better echoed by a solid line.)

Figure 11-25. Detail of Good’s site

Dakine’s website from several years ago mixes it up a bit. In Figure 11-26, it uses many varied design elements, but the jagged white lines do in fact echo the logo font. All together, they lend a feeling of motion, tension, and edginess to the page, which was undoubtedly what its designers were after—Dakine sells sports equipment to a young demographic.

Figure 11-26. Dakine

Use one-pixel-wide lines in borders, horizontal rules, and textures.

You want a refined and sophisticated look to your interface.

Here are some of the many ways you can use hairlines in an interface:

Hairlines look particularly good when placed near very thin sans-serif fonts. Remember that a gray line looks thinner than a black line, even if both are a single pixel wide. The same is true for other lighter colors, such as the teal used in Figure 11-27 at the top of this pattern. The less contrast between the line and its background, the thinner and lighter it appears.

Another way you can lighten a hairline—and add another texture while you’re at it—is to make it a dotted line instead of a solid line. As of this writing, finely drawn dotted lines are becoming common on the Web, even as underlines for links.

A trick to increase the tension and edginess in a design is to push a hairline flush up against the bottom of a line of text. Design 8 of the CSS Zen Garden designs does exactly that with its title and headlines (see Figure 11-8, back in the introduction).

The website in Figure 11-28 shows hairlines used in many places: as a faint grid in the background, as horizontal rules, and as very lightweight borders around the boxes. The hairlines work with the background texture and excellent typography to create a very rich look.

Figure 11-28. Colly.com

Likewise, hairlines are used in several ways in the design studio site shown in Figure 11-29. Note their usage in the logo, in the dotted separator lines, and in the diagonal texture used around the thumbnails and at the bottom of the page.

Figure 11-29. RibbonsOfRed.com

Use at least two contrasting fonts—one thin and lightweight, another heavier and darker—to separate different levels of information and add visual interest.

Text makes up important elements on the page, and you want the page’s organization to be very clear at first glance. You want the page to look dramatic.

When two fonts differ in weight, they form a strong and vibrant visual contrast. Aesthetically, contrast contributes to a dramatic and eye-catching look. High typographic contrast, which includes size, texture, and color—but especially weight—guarantees that your page will not look dull.

You can use this contrast to structure the text on the page. For instance, heavier-looking letters can form titles and headlines, thus helping build a visual hierarchy. The bold text in Figure 11-30 pulls the eye toward it. Thus, contrasting font weights contribute to the cognitive perception of the page as much as the aesthetics. (See Chapter 4 for a discussion of visual hierarchy.)

This pattern has many possible applications. This book already mentioned the use of bold text for headlines, but applications might include:

If you’re using fonts that are larger than body text, make sure the contrast is strong enough to be noticed. When the font family offers several weights, as does Helvetica Neue, pick ones that are at least a couple of steps apart—if the contrast is weak, it looks accidental, not intentional. (The same goes for other font attributes. If you make two text elements different sizes, make them really different; if you want to mix font families, make sure they don’t look too much alike!)

In Figure 11-31, a film site from the National Film Board of Canada uses three very different font sizes in a harmonious and compact composition. Its drama and starkness reflect the seriousness of the film’s subject.

Figure 11-31. Detail of Waterlife.nfb.ca

The playful design in Figure 11-32 has a more complex visual hierarchy, rendered with many font styles and sizes. Contrasting Font Weights is used to emphasize the “WORKFLOW” headline, the arrows, the column titles, and particular phrases within the body text. The weighted phrases are not only a heavier font weight; they are also white, while the surrounding body text is gray. This gives the phrases even more contrast against the dark background, thus increasing their visual weight.

Figure 11-32. A page from KaleidoscopeApp.com

Finally, Figure 11-33 shows one of the most dramatic type size differences I have ever seen on the Web. Because they are dark, the enormous headline letters remain in balance (sort of) with the body text. Within the block of body text, Contrasting Font Weights is again used for emphasized words and phrases; likewise for the URL in the upper left, which places a heavier font next to a lighter one.

Figure 11-33. JonBrousseau.com

Open up the look-and-feel architecture of your application so that users and third parties can design their own graphics and styles.

Your user base includes a large population of people who know your interface well. For those people, the interface has relatively low cognitive requirements—it’s not used in high-stress situations, for instance—so it’s not necessary to make all elements easily recognizable.

Furthermore, these users like to tinker. They value style, and they are inclined to set software preferences to suit their tastes.

When people rearrange and customize their personal space, physical or virtual, they derive a sense of ownership of that space. This is a basic human need (though not all people act on it; many people are perfectly content with software’s “factory settings”). Changing simple color and font preferences is one common way to customize someone’s software environment, but Skins and Themes go far beyond color schemes and fonts.

There’s evidence all over the Internet that users really like themes. Actually, we’re talking about two groups of users here: those who download and use themes, and those who not only use them but also design them. Those who design them see themes as an opportunity to be creative, and to get their work out into the public eye. Many are graphic artists. These people may get to know your UI design very, very well.

In any case, there are numerous applications and web services out there that have skins or themes, and the sheer number of user-designed themes is enormous. The number of person-hours spent on these works is testimony to the power of the creative impulse. For the designers, skinnable applications fulfill another basic human need: creativity.

(The difference between a skin and a theme in this context is vague. Some applications or sites use one, and some use the other. As of this writing, themes seems to be the term of choice for the concept of user-designed interface styles, while the term skins appears to apply more to physical skins on laptops or mobile devices. That wasn’t the case when the first edition of this book was written.)

Exactly how to design and implement a skinnable application depends entirely on the UI technologies you use, so it’s very hard to generalize anything here.

First, remember that any native Windows application can already be changed by a skin or theme. Several popular browsers can be “themed” as well, as shown in Figure 11-34.

Second, themes for web services such as WordPress (see Figure 11-35) affect far more than just the graphic styling shown on the blog pages. Their themes also determine how blog posts are laid out, what content appears in the sidebars, and even what information gets shown or hidden for each entry. Designing a UI architecture to support this is hard, and beyond the scope of this book. I encourage you to look at existing examples of themed applications and websites.

One objection that is sometimes raised about skins is that they make interfaces harder to use. That’s true about many badly designed skins. Ask yourself, though: how much does that matter? Does each application have to be cognitively perfect? (Look-and-feel defaults aren’t perfect, though they’re certainly more usability-tested than skins are.) For an application that someone already knows well and that doesn’t require high cognitive demands, there’s a point at which its basic usability is “good enough” and personal aesthetic preferences take over. When skins are available, people make that choice for themselves, whether or not they’ve educated themselves about usability.

To an extent, you can—and should, as part of a designer’s responsibility—decide at which level to permit theming and skinning. You may only allow colors, fonts, and backgrounds to be changed. You may permit bitmap-level skinning that preserves layout while changing the look-and-feel of controls. Or you may allow full customizability; it’s up to you to decide if that kind of freedom is likely to make the interface criminally hard to use.

I’m going to speculate that excellent application design—such as well-chosen functionality, easily understood organizational models, appropriate navigation, good page layout, and standard widgetry—can make an interface more resilient to bad themes. Design it as well as you can, and then put it out there for people to customize at a level you decide is appropriate. See what happens!

Figure 11-35 shows four of the many themes available for WordPress blogs. Vast numbers of themes are also available for other blogs and website systems, such as Blogger and Drupal. Most such themes are further customizable by the end users (especially those who know how to edit HTML and CSS).

Figure 11-35. Four WordPress themes

http://quince.infragistics.com/Patterns/Skins.aspx