Firefox download page

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

Use When
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.

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

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

Soft Focus
Keep lines fuzzy and avoid too much small detail—sharp lines interfere with readability of the content atop it, especially if that content is text or small icons. (You can kind of get away with sharp lines if they are low-contrast, but even then, text doesn’t work well over them unless the text contrasts strongly with the background.)

Color Gradients
Bright, saturated colors are OK, but again, hard lines between them are not. Allow colors to blend into each other. In fact, if you don’t have an image to use in the background, you can create a simple color gradient in your favorite drawing tool — it still looks better than a solid color. (You don’t need to store or download pure gradients as images, either. On the Web, you can create them by repeating one-pixel-wide strips, either horizontally or vertically. In systems where you can use code to generate large areas of color, gradients generally are easy to program.)

Depth Cues
Fuzzy detail and vertical color gradients are two features that tell our visual systems about distance. To understand why, imagine a photograph of a hilly landscape — the farther away something is, the softer and hazier the color is. Other depth cues include texture gradients (features that get smaller as they get farther away) and lines radiating from vanishing points.

No Strong Focal Points
The background shouldn’t compete with the main content for the user’s attention. Diffuse (weak) focal points can work, but make sure they contribute to a balanced composition on the whole page, rather than distracting the viewer from seeing the parts of the page he should look at instead. See below.

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.

Examples
In the illustration below, 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.”

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 below, the textures are everywhere; but because they are lightweight and low-contrast, they don’t interfere with the readability of the text.

Ecoki home page

The version of the Mercedes-Benz website shown below 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 Backgrounds 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 smokedglass 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.

Mercedes-Benz

Mint

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

Use When
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.

Why
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 illustration above and reproduced in the color strips below. 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.)

Colors used in Mint’s interface

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

Examples
The graph below 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 babynamewizard.com.

Baby Name Wizard

The illustration below 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.

OnlineMBARankings.com and AdLucent.com

In Other Libraries
Infragistics.com

JetBlue

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

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

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

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

Examples
The JetBlue website in the illustration above 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 below, does the same, even for “callout” pop ups containing lyrics.

In Other Libraries
Infragistics.com

Pandora

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

Getty.org

A MoMA online exhibit from 2002

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

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

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

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

Examples
In the illustration below, 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.

Mochimedia

Many sites use very thin borders and separator lines that reflect the visual qualities of a body font. In Good’s website, shown below, 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.)

Detail of Good’s site

Dakine’s website from several years ago mixes it up a bit. In the illustration below, 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.

Dakine

Front page of HermitageMuseum.org

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

Use When
You want a refined and sophisticated look to your interface.

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

• To demarcate Titled Sections by underlining the titles
• To separate different content areas, either with horizontal or vertical rules or with closed borders
• As guidelines to lead the eye through a composition
• Between areas of different background colors to clarify the boundary between them
• In textures, such as a grid or a block of horizontal lines
• In icons, images, and drawn graphics
• As borders around controls, such as buttons

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

Examples
The website below 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.

Colly.com

Likewise, hairlines are used in several ways in the design studio site shown below. 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.

RibbonsOfRed.com

TED

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

Use When
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.

Why
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 the illustration above pulls the eye toward it. Thus, contrasting font weights contribute to the cognitive perception of the page as much as the aesthetics.

How
This pattern has many possible applications. Applications might include:

• Creating very strong, magazine-like headlines and subheads
• Separating labels from data in a two-column listing
• Separating navigational links from information
• Indicating selection, such as selected links or list items
• Emphasizing words in a phrase
• Separating one word from another in a logotype

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!)

Examples
In the illustration below 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.

Detail of Waterlife.nfb.ca

The playful design below 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.

A page from KaleidoscopeApp.com

Finally, the illustration below 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.

JonBrousseau.com