UI Patterns and Techniques

Deep Background

From Mac OS/X
Use when:	Your page layout has strong visual elements (text blocks, groups of controls, windows, etc.) 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 it. The content thus seems to "float" in front of the background. A strong figure/ground effect is accomplished by this pseudo-3D look -- 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 make sure that there's not much small detail -- sharp lines will interfere with readability of the content atop it, especially if that content is text. (You can kind of get away with sharp lines if they are low-contrast, but even then, text doesn't work well over them.) 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's still better-looking than a flat color! Pure gradients don't need to be stored or downloaded as images, either. On the Web, they can be created by repeating one-pixel-wide strips; in systems where code can be used to generate large areas of color, gradients are generally easy to program. Depth cues. Fuzzy detail and distance-like color gradients are two features that tell our visual systems about distance. Others 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 content for the user's attention. Diffuse focal points can work, but be careful that they contribute to a balanced composition on the whole page, rather than distracting the viewer from seeing the parts of the page they should be looking at instead. As you design a UI 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? The latter 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 images that look even a little bit representational.) Drop shadows are often seen in conjunction with Deep Backgrounds. They, too, contribute to a pseudo-3D look.
Examples:
From Netscape 7 This example shows the use of a gradient behind the UI controls of a desktop application. The cylindrical gradient works with other visual features -- barely-visible drop shadows, contouring around the bottom buttons, even the shading in the etched line containing the Search box -- to create a finished "two-and-a-half-D" look.
From http://starbucks.com/ongoodgrounds/, courtesy of Communication Arts Interactive Annual In both of these examples, a subtle image is used as the background. Notice that the detail in the second one is washed out behind the text; this not only makes the text easier to read, but it also calls attention to it by surrounding it with "white space."