 The background of a page is an important element. Since it occupies the entire screen, a good choice will probably go unnoticed while a bad choice can easily drive your users insane. Here are a few ideas to keep in mind when designing backgrounds for the web.
The plain white background
It is always a safe choice. Many will argue it is a boring one, and that would be a valid point if you didn’t have more elements on the page. If your page looks boring it is not the background’s fault.
White usually stands for:
- Elegant
- Simple
- Good contrast for text
- Easy to combine with other colors
Of course, if you are lacking good foreground elements, your page is going to be dull. Also, if you are not going for the elegant/simple/safe feeling, white will probably not be the right choice.
Solid color
Besides white that looks more like the absence of background than the use of a solid color, the easiest approach is to use a single color for the page’s background. It is easy because it saves on bandwidth (no need to download background images) and allows setting a personality without complicated artifacts.
The main thing to keep in mind with a solid color is contrast. For instance, if you happen to consider red a good background choice, be sure you find a foreground color that will give the visitors enough contrast. Alternatively you will have to consider making your text bigger or adding borders/shadows for improved readability.
NOTE: For a list of colors that you can use with CSS visit the W3CSchools CSS Colors page.
Gradients
A good idea on paper but usually poorly executed. Gradients are tricky because of the way they interact with the rest of the elements on a page. Unless you can come up with a very good implementation, chances are your page will look tacky.
Repetitive background image
The problem with this one is exactly that: it is a repetitive background image. It will often be cut-out at the right and bottom ends hence looking disorganized. Repetitive backgrounds can also be uncomfortable and often downright ugly.
The best route is subtleness; the idea is that your visitor enjoys the background as a part of the composition but barely notices it while browsing the foreground content.
A big image
If you don’t mind the toll on bandwidth (and hence the loading time), a full-size background image can be a good choice.
This kind of background will draw a lot of attention and the colors of the graphic will often make readability a problem. A good solution is to put the foreground content in a box or group of boxes. Another solution is to make the background image less noisy by toying with its hue/saturation/contrast/lightness.
It is important to keep in mind that the Internet is browsed using several different monitor resolutions (sizes). If you feed the wrong image size to a visitor the whole effect of the background could be lost. This can be solved by fixing the size of your page, having several versions of the background or using one big picture that won’t lose its appeal if cropped by a smaller resolution.
Tips
Ask yourself the big questions:
- Does it look good?
- Is it saying the things that I want to say?
- Is it working well with the rest of the elements?
Look at the big picture
It can be hard to stand back and look at the design from the point of view of a visitor. There are tricks that you can use to see it in a different light:
- Take a screenshot of the page, make it smaller and blur it
- Take a screenshot of the page and replace the foreground elements with boxes
By taking away from the foreground, the background role becomes more apparent.
Don’t be afraid to throw it away
If you feel it is not working and you are stuck, stop, save a copy for future reference and forget about it. You have to be able to realize when something is not right and start from scratch. Don’t let your emotional attachment for something you have been working on refrain you from ending up with a good design. You can always come back later.
Author : Esopo, Read 2599 times, Comments: 0| Rating : |   | | Tuesday, 6. December 2005 |
Add new comment/Comments
| Your rating : Poor Excellent |
  Do you have something to say? Then say it! NetBulge.com is devoted to web development. We are always looking for fresh and relevant ideas. If you are a web designer with a voice, this is the place to make it heard.
Join us!
Featured * Programmer’s editor. Although at first look it seems similar to all the other free code editors out there, PsPad is a well oiled machine with many strong features that makes it, in my opinion, the best of them all (and I’ve tried quite a few.) At the very least, a good tool to have around. Web design, web development, technical communication, and IT made simple for both professionals and non-geeks. http://www.christopherjason.com | 
46%