Color in Web Design

Color in Web Design


Color perception is a tricky business - the way a color makes a person feel, the colors we choose to wear and identify with, is about as subjective a topic as you can yet. But studies in perceptual psychology have also shown certain colors to have certain effects across subjects, albeit with sometimes contradictory results. Use of color on websites becomes an interesting area of investigation. How does one strike a balance between the colors the designer prefers, and the associations that color might bring up for users? What facts can we be sure of when it comes to the effects colors produce?




Color wheel
Not too long ago Mike wrote a post discussing a report from the Journal of Usability Studies, originally published here. The take-away is that a study on color combinations on websites showed that both classical and expressive aspects of aesthetics (meaning both formal guidelines, and more subjective ‘feelings’ produced by colors) both affect users. Particular color combinations were shown to be more effective than others - specifically, “the split-complementary color schemes that utilized a cool primary color (blue) for the top or global part of the page and then used either another cool color (medium blue) or a warm color (orange) for the secondary page components provided the color balance that users found most aesthetically pleasing”, in comparison to double warm colors.

This information is incredibly useful to designers, and raises the question of what further conclusions might be drawn. But searching the web for what others have to say about color in web design brings up the expected contradictions and unsupported facts - for instance, did you know that
“white is associated with youth and freshness,”, or that “orange is associated with fun and youth?” What’s funny is that the first site cites the second for information.

So no definitive source exists. While I typically prefer data to back up guidelines, my desire for further guidelines led me to turn to what some of the seminal thinkers on form and color had to say about what colors mean. Wassily Kandinsky, the early abstract modern artist, developed his own theory of color early in the last century, one that has been much referenced by researchers following him in art theory as well as other fields. Why? Even if modern art isn’t your thing, its hard to deny Kandinsky’s talent (skill?) using color to produce effects on a viewer. The experience of viewing a Kandinsky up close, is, (imo), difficult to reproduce.


Several Circles
So what does he have to say? Blue, found to be effective in main navigation on sites, is associated with depth and restfulness; yellow is its opposite, the most aggressive, insistent, and disturbing color. The mid-point of these two “active colors” is green, a color that feels stationary as a result, and is thus even more restful than blue. Black and white, neither of which are “active colors” themselves, represent silence, but one (white) with possibility, while the other (black) brings up connotations of death or impossibility. These two opposites also combine to form an even more motionless, silent color, grey. Red is an intense warm color, but lacks the quality of reaching out to the viewer that makes us perceive yellow as so aggressive. Orange lies between the two in seeming closeness to the viewer. Brown is passive, and violet’s connotations depend on the amount of red/blue creating it.

What I like about Kandinsky’s ideas is that they are a basic guideline that describe the less tangible qualities (degree of seeming “motion”, for example) over focusing on more debatable connotations.

Extract from "Color in Web Design" http://blog.purevisibility.com/09/color-in-web-design"


Nawal.