3 Case Studies On Using Color For Organization

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.

How To Make Better Use Of Web Site Page Titles And META Data
A special search engine optimization case study on manufacturers shows how any business can do a better job with web site page titles and META data. New case studies explain how to improve them.
We got down to the basics with web site page titles and META data as part of a new study on how manuf...
Basic Shoutbox
This is an interesting and helpful tutorial for designing an Advanced Shoutbox. The author explains in this two part article that your blog or website can have a place for visitor comments. The author starts by showing you how to....
Online Press Rooms Save the Media Time and Frustration
When Web site usability guru Jakob Nielsen tested how well major corporate sites met the needs of reporters, he gave them a D grade. Jo...
Good Website Design
Now days, every organization either big or small owns a website. But, there are just few websites who have higher return on investment (ROI) or large amount of visitors visiting websites everyday. This is because they have a well-designed attractive website.
Form Email
Learn to send mail with the php mail(); function.
Color Adjustments: Color Theory (Video Included)
Lets proceed to the color adjustments. To work with color efficiently you have to understand the foundations of the color separation. If you know this theory, feel free to skip this page. If you dont, please read this at least once.
Using and Converting to Color-Safe Palettes
When you design web pages in HTML, as you probably know, you can use a tremendous range of colors (over 16 million) for fonts, tables, backgrounds and so forth using the COLOR attribute of the various HTML tags...
If/Else Statements
1. If and Else statements are special pieces of code that tell your server to do something under a certain condition. If and Else statements therefore are conditional statements. An example of a likely piece of code that uses these statements is:
CSS Link Specificity
Love Hate is how I taught myself to remember the order. The acronym for the order (LVHA) just wasnt terribly easy to remember on its own. It didnt spell anything, or really give a sensical meaning to me. But Love Hate works. So what is LVHA?
An Easy Way to Choose Attractive Color Combinations
Lots of people struggle to come up with attractive color combinations when designing logos, banners or web sites. So, heres an easy technique that only takes a few minutes...