HWG-News Tips Early April 2000
Effective Use of Color
HWG-News features member-submitted "tips" in each issue, in the space
between articles and announcements. These were the tips submitted for
8 April 2000
newsletter, for the following category:
Effective Use of Color
When designing web pages, the effective use of color can
often make someone more likely to browse the site. Not
surprisingly, a bad choice of color can be the quickest
way to get someone to hit the back button. How do you
get a clean, attractive, and expressive color scheme for
a web page, that stands out from the crowd, but isn't
garish or distracting?
This issue's winner!
Hi, I always try to match the color in some way, physically or
psychologically, to the item that is on the web site, for instance
'pipestone pipes' the color that goes with the pipe, maroon-red and
grey. A shopping site has a chocolate feel to it to make women feel
comfortable, a housing company to the color of the house, etc.
-- Submitted by Gloria Hazell <firstname.lastname@example.org>
Other Tips for Effective Use of Color
I've found it useful to take my cue from other areas of design, for example
interior design and fashion. There are always colours that are "hip" and
"trendy", and these can generally be used for the web as well. More
important than the colours you choose, however, is to keep white as your
primary base. It gives your page a nice, clean look every time. Check out
"Color Harmony" a book on colour schemes. It comes with free software called
a "Palette Picker" that will give you endless colour schemes, as well as the
emotions, moods, messages, these colours will invoke.
-- Submitted by Nancy Macedo <email@example.com>
Less is more. Don't make excessive use of different colors. Instead, try
lowering your choice to as little colors as possible. Too many different
colors will make your page look 'childish'.
Try not to use unusual colours on the background if your page holds lots
of information. If your page is packed with information your visitors are
likely to be willing to print the page. Not all browsers are capable of
filtering the background for printer output. If you use a dark background
and light colours, make a printable version (black letters on white
background) available for the most important pages!
-- Submitted by Florian Kunze <Florian@BlueSky.org>
allows one to quickly evaluate text and background color combinations.
-- Submitted by Tom Powell <firstname.lastname@example.org>
The colors you choose for a web design should depend largely on
the topic of the site after factoring colors you must use to
compliment a client's existing logos and colors. For example if
the site is about money, you might consider greens and golds to
carry through the site theme. A balance of color, contrasting but
complimentary colors and theme appropriate are all keys to
effective color design.
-- Submitted by <email@example.com>
I like to use various shades of one color or complimentary colors (like
blues and purples). If you use the colors on various objects and side
backgrounds and use white for the main part of the page, you can also use
colors for text instead of black or white. In my opinion, effective use of
various shades of a dominant color can make for a very attractive color
scheme. Additionally, if you apply textures, filters, or other special
effects to the colors, they won't be flat and boring.
-- Submitted by Bill Gentry <firstname.lastname@example.org>
Use striking colors as lines or a dot or something that will attract
attention but not on text and background. Uniform color scheme should be
practiced. Use different contrast of colors for the text and the background
unless it is a design. The colors used should match the overall theme of the
site(for corporate site usually the company color is used). And be imaginative.
-- Submitted by Robert Dela Cruz <email@example.com>
One of the things I do is browse many sites. I decide whether I like the
site and why or why not. I jot down some notes about what I like or
don't like. I also have "user" friends navigate the same sites and take
notes (just a quick "how do I like this site" visit, since the initial
seconds are what determines whether people stay or leave or even ever
come back). Often, if the background is black and the text is blueish or
green, it is hard to read. Too many fancy doo-dads also annoy me. The
site must be clean. There are also many books available on color and are
helpful when designing a site. What colors have a calming effect? Which
ones are warm and inviting? Basically, know some psychology when
building a web site.
-- Submitted by Hoh, John (MED, GE-Marquette) <John.Hoh@amermsx.med.ge.com>
Black text on a white ground is the easiest to read. Set background, text
and links in contrast (most users expect links to be blue). Match the
background to the tone of any background image to aid anti-aliasing. The
commonest form of colour blindness is red/green so make sure you have strong
contrast in the blue element and in overall brightness.
Check in all available colour depths, greyscale, monochrome and a cheap LCD
screen. Check usability with your grandparents.
-- Submitted by Derek Moody <firstname.lastname@example.org>
I find the best use of colour is to look at complimentary colours, they can
provide a very useful tool to producing colours that can blend with each
other and be able to work together to produce a harmonious site. I have
carried out a research study into this area for my degree and have put
together a section on my site that shows the colours available, both in tone
and tint combinations. Emphasis is on using safe colours. There is also a
section on the site which allows the visitor to interact with the different
screen colours and see how they affect each other. The site is still under
construction, but should be completed by the end of April. www.manchula.com
-- Submitted by M Foulkes <email@example.com>
Effective use of color is not a new problem unique to web sites;
graphic designers, photographers, and others working in print media
have grappled with it for years. My tip: Learn from those who have gone
before. Many excellent books and other resources are available on this
and other fundamentals of design -- use them! Familiarize yourself with
subjects like color wheels and the emotional responses evoked by different
color combinations and you'll have some powerful tools at your disposal.
-- Submitted by Tracey [Baker] Wagner <firstname.lastname@example.org>
I have found that the best looking color combinations, that are catchy and
flashy usually sort of just "happen". When starting with a blank page, I
usually go surfing to some of the "weekly winner" sites, just to get
creative juices flowing.. then when I have the concept, I just start playing
w/ different combinations, variations, and textures. Transparency is
another big helper too.
-- Submitted by Shelly Timmerman <email@example.com>
First, unless the company behind the site is selling/providing a product or
service that is "flashy" and "explosive" (games, for example) by nature, I
try to stay away from "loud", or bright colors; picking 3-4 colors from the
16 safe browsing colors category. The colors I settle on should attempt to
"convey the mood, attitude and the product and/or service" the company
behind the site is trying to sell. For example, at one pizza store site, I
used a tomato color for the main page's left navigation bar. I used black
for its top navigation bar, because I felt the black background brought
attention to a navigation scheme that was important but secondary to the
site's intent. I stick to plain white backgrounds with black legible font
text (such as Arial, Helvetica, Times New Roman, or even Verdana -- all of
which are very commonly installed fonts across a wide platform of computers)
for the written content. I try to use black text, in the same font size and
family for the actual links, with wording that implies that "this is a
link", at which point the text "evolves" on a mouseover event.
Bottom-line: I try to keep things as simple and easy to use as possible. I
rely more on textual and color-shading effects as opposed to graphics
wherever possible. And I always ask for the user's input about any aspect
of the site.
-- Submitted by Ray Ban <firstname.lastname@example.org>
Consider the following when choosing color schemes: Design in black and
white, adding color for emphasis. Color should never be the only visual
cue for anything. Distinguish between features that a user *must * be
able to see in order to use the web page and those that would be *nice*
to see. Test whether color contrast is sufficient to be read by people
with color blindness or by those with low-resolution monitors, print
pages on a black and white printer. Avoid red-green, green-yellow, and
blue-yellow combinations when possible. Use the 216 common browser-safe
colors to ensure cross-platform consistency.
-- Submitted by Glenda Watson Hyatt <Glenda@eaglecom.bc.ca>