Color may sound like icing on the cake; something you add to pretty up your site. But color is a much more powerful tool. It can be used with great effect on a website. It's particularly useful in organizing elements effectively and in creating well-designed page layouts.

Since examples always help make general principles more tangible, let's take a look at three different examples of how color usage affects page organization.

1. WEBEX

http://www.webex.com

(Note: the links for each of these three sites open up in a new window. You can keep reading while looking at the sites.)

Most of Webex's home page is filled up with color of some sort. In fact, the only parts of the design that reside on a white background are the header and the bottom right corner. Generally, when everything is colored, it makes it hard to use color effectively for organizational purposes. But Webex has done a pretty good job. From a purely graphical standpoint, the use of color in this page is effective. Let's examine why it works:

Horizontal bar
The horizontal blue bar at the top provides good definition to separate the logo and tagline from the main content of the page. Besides providing a backdrop for the main navigation buttons, the clean lines of this bar provide a nice, colorful frame for the site.

Background colors
The center of the page is clearly divided by background colors into two separate sections. The gray background behind the links on the right clearly defines the area and groups that set of five links together nicely.

Buttons and boxes
The blue buttons toward the bottom of the design are a medium blue. Since they are brighter than the surrounding grays, these blue headers stand out nicely, clearly labeling the gray boxes directly underneath them. These visual cues can help visitors understand the organization of the page at a glance.

Smart orange
Notice the action that Webex is attempting to elicit from their visitors - getting them to join a demo. So what color is the "Join a demo" button? Orange - a very bright, vivid color designed to draw attention. In fact, it's the brightest spot on the page. Smart.

Overall, Webex's use of color on their home page has helped them define specific areas of the page, provide overall organization, and draw attention to key pieces of information.

Color as an organizing tool
One can certainly debate whether or not Webex.com is effective from other standpoints. After all, just because a page does well in one area doesn't mean it is effective in other areas. Nevertheless, the designers of this site understood the usefulness of color, and they were able to use it effectively in laying out the page.

2. HP

http://welcome.hp.com/country/us/en/prodserv/desktops.html

This page (which is an inside page on HP's site) is very simple from a color perspective. The design is mostly comprised of grays with only a few splashes of green. But the very minimalist nature of the page shows how helpful color can be in organization.

Use of gray to create distinct areas
The grays in the page definitely don't grab attention. They are used for very subtle coloring. Nevertheless, they plan an important role. Although the grays are light, they help to provide definition for the page. The crisp clean lines and background colors sort the page into four distinct areas very quickly - header, left sidebar, right sidebar, and center column.

Although gray is a fairly mundane color, it works to make the page more visually interesting that if it had a completely white background. By the fact that the coloring is so unobtrusive, the edges of the page don't distract from the center content - a good thing when you're trying to focus attention on something in particular.

Minimalist with a shot of color, please
The overall subtlety of the page lets the green dividers in the middle stand out very clearly. This is one of the advantages of a minimalist approach to color - a little shot of color goes a long way when there's nothing else to distract from it.

Because the green bars are the only color on the page, visitors can very easily figure out at a glance which category they are looking for. This saves visitors time in searching for a particular product.

The simplicity of this page definitely wouldn't win any creativity awards. Nevertheless, it still holds some important color lessons for organization.

3. LOWE'S

http://www.lowes.com

Spurts of color
Lowe's doesn't do quite as well in the area of organizing with color. On their home page, there are spurts of color everywhere, so nothing in particular stands out. This means that color cannot be used as an effective organizational tool. That's a consequence of using color randomly, instead of allocating it in a more focused manner.

In a color war, no one wins
Lowe's would be better off avoiding the attempt to emphasize everything using color. This way, they could move away from the "color war" currently taking place on their home page. Instead, they could harness color to help sort the wealth of information available on their site into meaningful categories.

Jamie Kiley creates powerful and engaging websites that make sure YOUR company gets noticed. Visit www.kianta.com for a free quote. Sign up for Jamie's newsletter and get a quick, free web design tip every two weeks