3 Case Studies in 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.
About the Author:
There are 605.6 million people online. Can they find your business? Jamie Kiley creates
powerful and engaging websites that make sure YOUR company gets noticed. Visit http://www.kianta.com for a free quote.
Get a quick, free web design tip every two weeks--sign up for Jamie's newsletter: http://www.kianta.com/newsletter.php
Subscribe to our newsletter:
Your Email address:
Privacy Policy: Your e-mail address will never be sold, rented or
given away to anybody. You can unsubscribe at any time.
|
