 |
|
 |
|
Using Color |  |
|
|
Arguably, the most important graphic element on your web page is its use of color. Working with color on the Web, as opposed to the print world, can be tricky because surfers use different computers, platforms, browsers, and monitors. There are extra considerations and limitations in terms of palette, technique and style. But many of the basic design tenets of using color in other media apply to Web work as well. So we will cover both fundamental design considerations and special Web tweaks, using an example site to illustrate the principles.
Primary Design Considerations: The first step is to decide on your basic color palette--the colors you will use for background, text, links, and your overall color scheme. Here a little psychology comes in handy; know your audience and your message and choose colors that will communicate the mood you want. Neon or primary colors tend to evoke action and excitement, and convey a younger, hipper, more casual message than, say, a more subtle and traditional color scheme. Pastels give the viewer a gentler feel, while earth tones are great for a homey, inviting mood.
A 'Safe' Palette: Select from three to five related or complementary colors to create your palette, including at least one light and one dark color. Choose from what has become known as the 'browser-safe' palette, 216 colors that remain fairly stable across differing browsers, platforms, and resolutions. To see how colors look together, you can download a nifty little free utility called the RGB color box.
Only use colors not in this palette if you are sure your viewers are using high-end monitors at 24 million colors, or are prepared for some unpleasant surprises at lower resolutions, when the browser attempts to find the closest match. If you are using a high-resolution monitor, check your page with the resolution lowered to 256 colors (and even 16 colors) to make sure the colors degrade well. If so, then use them.
Color Coding Basics: All colors can be expressed using a numbering system called 'hexadecimal', which consists of the number 0-9 and the letters A-F, and describes the combination of Red, Green and Blue used to make up the color. In HTML, you use hexadecimal values to describe colors. Most graphics programs will show you the hex codes for your colors, and don't forget you can just use the nvalue.gif to look them up.
The first and most basic use of color on your page will be found in the <BODY> tag, where you'll define the colors for your background (using BGCOLOR), text, and links (using mainly LINK and VLINK for visited links.) Part of the <BODY> tag from the Oliver's Lodge restaurant site looks like this: <body background="olivback.gif" bgcolor="#FFFF99" text="#663300" link="#660000" vlink="#660000">. The background color is set to a light parchment color, the text to a readable dark brown, and the links to maroon. Note that we also used a background image, which is simply a parchment texture tile, but still specify a background color that is identical in color. This is so that if a person has images turned off, and therefore won't see the parchment background, they will still see a similarly colored background so the text will show up nicely. Otherwise those surfers would see a default gray background.
You can also use certain color names, (i.e. "white" or "cyan" but this is limited in terms of browser support and number of colors.
Graphics: By making wise color choices, you can create attractive, colorful sites that achieve a desired mood without any graphics at all, making the site extremely fast-loading and user-friendly. Using table-cell background colors is another way to provide color interest without graphics. Just use the coding <td bgcolor="hexcode">cell contents here</td>.
But even if you do use graphics, using a set palette for your page allows for coordinating the graphics to that palette with two advantages: the page will look more consistent and cohesive, and it will load faster.
Using these hints to become aware of the interplay between psychology, demographics, design sense, and technical and bandwidth considerations, you can use color well to create an attractive, effective and user-friendly site.
|
|
