Recently I have been going through the book Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell. One of the sections that talked about deep background explains some very important and interesting details. I tried to apply the learning in one of the project I was recently working in and it came out well. Here’s an excerpt from the book –  

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 it. 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.)  

Color gradients. Bright, saturated colors are okay, 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 are generally easy to program.)  

Depth cues. Fuzzy detail and vertical color gradients are two features that tell our visual system 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 distract the viewer from seeing the parts of the page they should look at instead. 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.

————————————————————————————————-

“It is especially important that the user-interface designer’s ego be submerged, so that the user’s needs, not the designer’s, are the driving factor. There is no room for a designer with quick, off-the-cuff answers.”           

-Foley, VanDam, Feiner, and Hughes
Computer graphics, principles & practice