Friday, April 30, 2010

Colors & Usability In Web Design

How difficult is it to choose a nice color theme for your application or web site? This seemingly trivial task could take days of your time and you could still be far from being effective.

Though it seems easy to pick a bunch of nice colors and be done with it. It is far more complicated to choose colors that are effective and yet pleasing on the eyes. It is less of a science and more of an art, but fortunately there are best practices and thumb rules making it easier.

When I started meddling with the colors of our product, one things that struck me was that there is no universally accepted definition of what colors are nice and pleasing.

Color themes
The Color Wheel offers a good guide to choosing the right contrast and matching saturation, but if you do choose colors that are not recommended by the wheel, you are cautioned against its usage but there is no obvious rule to stop you.

A more common approach is to look at nature or a picture atleast, to get a hang on what works well. There are creatures that want to present itself and some that want to hide. The monarch butterfly is a beautiful thing to watch, note the bright contrast of black on orange. Start with a couple of colors as your base colors and then use a color wheel to figure out what shades would work better.

ColorSchemer is a free and extremely useful online tool to suggest variations.

Contrast for readabilityA better way to select your color palette is based on usability. Good contrast is an absolute necessity if you expect your users to stare at your application everyday. You will see a lot of light gray text on white background these days, which looks pleasing on first glance, be rest assured your everyday user would be irked by the eye strain over time.

Start with the base colors you have picked up for your theme and select a couple of background colors which offer good contrast for readability, Though white text on black offers the maximum contrast, its not always the most creative one. Now you can start experimenting with the wheel for good readability.

No comments:

Post a Comment