by
Jamie Kiley
Tips about Web
Page Colors and How They Affect the Look and Feel of a
Website
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.
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.
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.
--
Jamie Kiley is a 20-year-old web
designer in Atlanta, GA. Read more of her web design
articles at: http://www.kianta.com/designtips/
*** Reprint Information for
this Article ****
This article showing how to use
web page color may be reprinted for use as content at any
website or in any publication as long as the article is kept
in-tact with included links, text, etc.. And, the resource
at the conclusion of the article must remain with the
article. The articles may not be sold for profit or included
with a consumer product without written permission from the
author. Thank you, and enjoy!
Disclaimer: Even though we have made every effort to
provide solid and accurate information to help you create
your own web page with colors, Online Success for Internet
Business accepts no responsibility or does not insure or
imply any degree of success in a web based business or
website design career by reading the material listed on this
website. Degrees of web or Internet success are greatly
dependent upon the attitudes, attributes and ambition of
each individual designer. Please thoroughly check out any
information you find on this site before indulging in a web
design business or presenting yourself as a webmaster. Use
these "Web Page Color" tips as a guide to make web designing
easier!
|
