Firefox download page
Place an image or gradient into the page’s background that visually recedes behind the
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:
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.)
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.)
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
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.
Few Hues, Many Values
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 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
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
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 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
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
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 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
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.)
Borders That Echo Fonts
A MoMA online exhibit from 2002
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 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.
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
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.
Front page of HermitageMuseum.org
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:
- To demarcate Titled Sections by underlining the titles
- To separate different content areas, either with horizontal or vertical rules or with
- 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.
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.
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.
Contrasting Font Weights
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 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.
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!)
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.