Strategic Color Communication
Use Color To Establish A Mood
Try this when you begin. Write the name of your Website on the top of a
sheet of paper and then underneath it scribble down 20 to 30 words
that describe the 'mood and feel' that you want give your visitors. Do
this, and very quickly your sheet will be covered with words like slick,
breezy, professional, funky, informative and friendly. Now circle the best
five words that describe your new site, and keep your descriptions somewhere you
can see while you're working.
When selecting color for Web design, choose the background color first.
The background color occupies more color space and provides contrast to
the text, title, and graphics.
Know your audience:
Black can communicate raw, somber or slick. White backgrounds tend to
communicate simplicity -- clean, organized, corporate, or sterile.
Use caution with very bright colors, such as orange or yellow,
for your background color. These colors can make it difficult to read.
If the purpose of your site is to create an energetic mood -- and you do
not want people reading much of anything -- then by all means, use
bright colors.
If you are communicating up-to-the-minute medical information to an
older crowd, you may want to use a white (or a light gray) background with large
(HTML size 4 or larger) black type that will be easy for the elderly to
read.
If your goal is to deliver concert information to a teen audience, you
may want to use bright colored backgrounds with contrasting type (orange
background with white type, for example).
If your goal is to sell products and services to a specific audience,
you may want to use a background color appropriate to your industry (green
for agriculture, blue for marine, white for medical, pastels for
cosmetics, and so forth).
Carefully select a background color scheme that will establish the type
of mood specific to the kind of information you'd like to communicate to
your audience. There really are no hard rules to follow here. The color
you ultimately choose will be based on:
Back to Top of Page
Limit
your Palette
Once you've settled on your mood the fun begins. Sit down and select
two, three, or at most, four colors to build your entire site around. In
general I've found that monotone and duotone sites have an intensity that
is hard to reproduce with more colors. If that quality is important in
your site, keep the colors down. You can enlist some free help at this
stage of the process. Check out this free online tool to help you choose a
harmonious color scheme:
http://www.colorschemer.com/online/
Use
Color to Guide Your Users
Use color to attract
A red box on a solid white background will immediately attract the eye.
The strategic use of color can help you lead your viewers' eyes throughout
your Web pages.
A word or phrase printed in a different color from the surrounding
words in a continuing sequence will be more easily remembered by the
viewer. For example, when announcing the details and specific date of
a special event, the date is best printed in a color which differs
from the rest of the text.
Use color to categorize
Color can help communicate a complex navigational system or assist your
users in determining where they are within your site structure. Color is
an awesome tool for categorizing and defining unique sets of information
for your audience.
Use color with strategic intent
Always use color for the sake of achieving your overall communication
goal. Color for the sake of color can be nice, but the strategic use of
color will help you deliver consistent communication to your audience.
If your color only exists as 'window dressing', then frankly it isn't
working hard enough. Every site needs a 'content hierarchy' or 'content
ladder of importance'. There's a good chance that your 'Latest News' might
be at the top of your sites ladder of importance, and your copyright
message might be at the bottom of it. Color (along with size and screen
position) is your key in helping your users understand your
hierarchy. The more they use your site, the more they learn to scan for
certain colors and text styles.
Most importantly, stay true to the purpose of the site. Some
audiences (for example the rave culture) will comfortably identify with
color selections and styles that a wider audience simple won't tolerate.
Invest the extra time
to make sure your color choices aren't damaging your visitor's experience.
Remember that your color selection by itself is unlikely to guarantee a
return visit from a user. However it could be more than enough to
guarantee they don't.
Back to Top of Page
Approaches to choosing colors
Crisp & Clean Colors
Crisp and clean colors are usually very bright and fun. They work
well when you use similar tones together, for example, a bright orange-red
with a lighter peach color. Also, throw in a contrasting color to mix
things up a bit. Remember, if you stick with colors that don't contrast
much, you're going to find yourself in trouble when you go to put text on
your colored background.
When you choose colors for a crisp and clean design, keep it to three
at the most. Once you get into four or five colors, things won't stand out
as much.
Corporate Colors
Corporate colors are bold and bright, but not so bright that
they're fluorescent or hard on the eyes.
Use bold colors like red, blue, and green to imply that your company is
strong and stable. Tans and beiges will reflect the professional and
conservative aspect of your company. By mixing subtle colors with bold
colors you'll get the best of both worlds.
Vintage Retro Colors
Vintage colors are ones that have that "really old and
worn out" look to them. Try and imagine an old t-shirt that you used to
wear all the time; pale orange, grayish-blue, green turned yellow-green,
etc.
To get a vintage look, try using three similar tones. For example
choose a dark, faded green, a faded green-yellow, and a very pale green
(that almost looks gray).
Ultra-Hip Colors
Ultra-Hip colors are extremely fun to work with. They are very bright and
jump right off of your screen. Try using colors that you would normally
consider "on the edge" - colors that you normally wouldn't use. Some of
them have an almost glassy feel, such as a very pale gray with a hint of
magenta or aqua.
When putting together a scheme of Ultra-Hip colors, there are two ways
to go. The first is to use colors of the same hue. A good thing about this
method is that you can use 4 or 5 colors without overdoing it, because the
colors aren't competing with each other: they're complementing each other.
The lighter hues are balanced by the darker hues, and the brighter hues
are balanced by the more saturated hues.
The second method for choosing an Ultra-Hip color scheme is to take
colors that you never thought would look good together and put them to
use. You'll be surprised at how Ultra-Hip the result will be. Good colors
to work with are beige or brown. Both are often seen as unattractive
colors that don't work well with bright colors, but you'll get a very
modern look if you use them with flashy color: magenta and beige, aqua and
brown, bright blue and beige - they all yell HIP!
Back to Top of Page
Color Combinations
