Desktop Wallpaper Web Design

by Josh Lawrence. Posted on July 9th, 2010 in Usability, eCommerce Web Site Design

One of the primary goals of any ecommerce site (and one can argue all websites) is to communicate with your users.  This being the case, one of the biggest challenges for a Designer is to make the important content stand out among the overall design.  How then can we make select content more visible, user friendly, and appealing to users?  Look no further than your own computer desktop wallpaper.

The Simple Desktop Background

You have undoubtedly come across some of the thousands of websites devoted to distributing desktop wallpaper images.  Visitors will find images ranging from scenic photos to unicorns in flight to abstract designs and everything in between.  After using many background images over the years I have come to find a trend among the ones that I particularly like: the simpler the better.  Backgrounds that have less visual clutter allow icons to stand out more and are easier to navigate.  They also make it easier to distinguish between layered windows and applications.  So what, you ask?  Well, the same holds true for web design.

Making Your Content Pop

When designing an interface that is meant to move the users eye from message to message, contrast is of primary importance.  Contrast can be achieved in many ways, with changes in size, line, hue, value, color intensity and so on.  To draw attention to the focal points of your design they must stand out against their background.  In keeping your site’s main background elements in the background by keeping them uncluttered and relatively subdued, you give your content a better opportunity to stand out.

Notice how elements such as the navigation, buttons, and text when placed on a subtle background stand out and draw the users eye in the eFootWear shopping cart:

On the flip side, the following site features a busy background which only serves to distract the user from the content rather than focus on it.  While this design is certainly over the top it illustrates the point well:

Of course there are exceptions to the rule here.  A busy background can serve to accentuate an uncluttered element that rests above it.  Such is the case with My Mascot where the content resides in a white container on top of a detailed wooden texture background.  This works because the contrast between the highly textured background and the flat white background makes the content rise to the foreground:

Remove the white container and the content fades into the background and the texture become the main focus.  Here you can see just how important the background can be to a design:

If you are a Designer this concept should come as no surprise, but it is helpful to see it in action outside of web design using your own desktop wallpaper as an example.  Even if you aren’t a designer you can experiment with this concept by playing around with a few desktop wallpaper images, both busy and subtle, and see how much of a difference it can make in usability.  Afterwords you might think twice before choosing that Jackson Pollock painting to “Set as background image.”

One Comment

July 14th, 2010 at 1:19 pm

Mallory Says:

You have some great tips here! I am currently working on redesigning my company site, and the point you make about keeping your site’s main background elements uncluttered and relatively subdued is so true. It’s hard to figure out how to make the most important info really pop on your site, and this is a great place to start. Thanks!

What Do You Think?