Let’s talk about Web design and color. Thank goodness the heady days of “just because you can” are fading, but I still see sites with the “box ‘o Crayolas” color scheme. You know, where every element has a different color (or worse, every letter in a headline is a different color)? At a glance, you can’t read much; and if you’re inclined to look further, you’ll end up with a headache. A lot of inexperienced designers, excited at the Web’s color possibilities, overload their designs with color. Remember: restraint is a virtue.
Here’s a very detailed discussion of color. But for simplicity, I’ll propose some simple guides. But first, a caveat. For every rule, there’s an exception. If you’ve got a good reason for breaking a rule, go ahead.
- Work in threes. Pick two main colors, probably of a complimentary nature, and a lesser-used accent color.
- If you’re using a colored background, it counts as one of your main colors.
- If you’re using photos, the dominant color in your photo(s) counts as one of your main colors. Recolor your photos to match your scheme if necessary.
- Avoid using the same intensity for all colors (aka “saturation”). Try printing your design in all grays — if all the elements are the same shade of grey, you need some variety in saturation.
- You can usually use lighter versions of a main color without it seeming like another color has been added to the design.
- Want your design to seem trendy? Use the current hot fashion colors (pink and chocolate are big right now, for example, as are irregular stripes and diagonals). But be ready to change — very soon, they’ll seem dated.
- Colors subconsciously imply meanings or emotions (e.g. red for warning, heat, energy, etc.). Be aware of this, but also that different cultures may apply different meanings.
- Colors generally appear darker on PC monitors than on Macs. Also, older monitors are generally darker. So if you’re designing dark colors without much contrast on a new Mac, be aware that the colors may be indistinguishable on an old PC.
Remember, design supports content and function — not the other way around. When in doubt, be subtle: use fewer, more muted colors. If your gaudy color scheme draws more attention than the content and functions, you’ve wasted the users’ time. Just because you can isn’t a good enough reason…
