Free Software

"3 Case Studies On Using Color For Organization
by Jamie Kiley

One of the aspects of web design that fascinates me the most is color. Color is a very useful tool that can be used with powerful effects in 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)

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:

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.

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

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

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.

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 greys with only a few splashes of green. But the very minimalist nature of the page shows how helpful color can be in organization.

The greys in the page definitely don't grab attention. They are used for very subtle coloring. Nevertheless, they play an important role. Although the greys 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 grey 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.

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)

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.

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.