“I see skies of blue…clouds of white
Bright blessed days…dark sacred nights
And I think to myself…what a wonderful world.”– Louis Armstrong, 1967
Colors evoke an emotional language all their own. Colors can grab attention, supply contrast, accentuate and understate. A room can seem tense and small, or serene and airy just by painting the walls a different color. A woman’s face can look soft or severe depending on the makeup colors she chooses.
“Vision is the primary source for all our experiences,” states Jill Morton in her 2005 essay, “Why Color Matters”(1). “We become bored in the absence of a variety of colors and shapes… Color addresses one of our basic neurological needs for stimulation.”
That’s why when designing a web site, colors play important part. The Internet is a visual and a psychological medium (2). While the visual functionality of a web site is influenced mainly by the text on the screen and page layout, color takes interaction a step further by making a psychological impact.
People react to colors on a visceral level, and emotion is often the driving force behind decision making (3). If a color scheme on a web site can help stir positive feelings among users, the site will be able to fortify a stronger connection with those users.
This essay will examine the human response to color and will attempt to establish a set of best practices when incorporating color on a web site.
COLOR = FEELINGS
“Colors, like features, follow the changes of the emotions.” Pablo Picasso (1881-1973), Spanish artist.
Color is one of the most difficult aspects of design to get right, observed author/designer Mark Boulton (4), because the color preferences of human beings are highly subjective.
Color transmits meanings to people in two primary ways. The first is natural associations. People find comfort when colors remind them of similar things (5). The second is psychological symbolism. For example, a light shade of blue might elicit associations with the sky and a psychological sense of calm.
Color theorists and psychologists have been able to break down some general color preferences by culture, age, gender and class. Being aware of these preferences can help web designers pick the right colors.
Symbolic cultural differences exist for many colors. For example, the color red means good luck and celebration in China, but is the color of mourning in South Africa, observed Jennifer Kyrnin (6) on her About.com design website. In India, red means purity, while in the United States red suggests excitement, danger, love, passion, intensity, “stop” and Christmas (when paired with green).
Adults, meanwhile, tend to gravitate toward more subdued colors. Saturated colors “have the feel of coming straight out of the tube” at adults and seem to lack sophistication, observed Roger Nuttall (3) on his British-based online design website.
Gender differences also reveal themselves in color preferences, Kyrnin notes that in many cultures, men tend to prefer cooler colors (blues and greens) while women tend to prefer warmer colors (reds and oranges). Western men are also more likely to be color blind and unable to see some of the differences in color on Web pages.
Kyrnin also remarks that marketing research in the United States has shown working class people prefer colors that can be plainly named: like blue, red, and green. More highly educated groups of people prefer colors that are more obscure: like taupe, azure and mauve.
Here are a few more basic color meanings, starting with the most popular web design color – blue. Color studies have shown that almost everyone likes some shade of the color blue (7).
Blue is a cool color that conveys importance and confidence without being somber or sinister, states designer Jacci Howard Bear (7) on her About.com web color tutorial. Long considered a corporate color, Bear says blue, especially darker blue, is associated with intelligence, stability, unity, and conservatism. Its affective aspects are tranquility, and contentment.
“Deep blues create a feeling of the ether, a mysterious and enchanting space that rolls out to the very edges of the imperceptible,” observed Nuttall (3). “Large tracts of blue can create a sense of expansiveness.”
Mysterious purple comes next. Purple is associated with nobility and spirituality, power, luxury and creativity. It is also associated with childhood villains – most of the villains in Disney animated films are colored with some purple.
Green conveys both warming and cooling effects on people. Green denotes balance, harmony, and stability. It signifies nature, growth, renewal and health, or it can mean jealousy or envy and inexperience (7). Green is also the most restful color for the human eye, according to the excellent online Color Theory Tutorial at worqx.com (8). Designers can use green to create serenity.
Nuttall argues that blue-greens are another good color to use to appeal to discerning adults. Muted blue-greens always speak “class” and “restraint” like silk and classical elegance (3).
Yellow, meanwhile, is the most cheerful color of the spectrum. It is the most visible color of all the colors and it is the first color that the human eye notices (7). Kids love it. But the color also possesses conflicting symbolism, denoting happiness and joy, as well as cowardice and deceit. Yellow is difficult to see on a light background and its brightness may strain the eyes.
Mix yellow with red and get orange, a color that symbolizes comfort, creativity, celebration, fun, youth, affordability and warmth. It denotes energy and demands attention. Orange can also supposedly promote feelings of hunger. Softer oranges and peachy colors are even friendlier and more soothing (7).
Brown is earthy, natural, primitive and simple (2). But it can also seem dirty and dark.
Coloring a background black on a web site can sometimes “strike a cozy, nocturnal feel, perhaps with an element of rebelliousness inherent,” Nuttall notes. But this mainly appeals to younger audiences, who tend to be more tolerant of “twilight” seductiveness than older surfers who prefer white space (3).
Gray seems to be as popular a color for web design as blue. Gray is non-committal. It is a neutral, balanced color – cool and conservative. Gray seldom evokes strong emotion, and may help to balance a layout of stronger colors.
If an appropriate use of color on a website can spark positive feelings, it can increase user productivity, minimize visual fatigue, and entice users to relax and return.
Let’s face it. Color sells, but the right colors sell better (9).
“Once you understand your audience make up,” wrote Kyrnin, “You can create a color scheme that suits them.”
GRAB ATTENTION, REINFORCE THE MESSAGE
“The color of the object illuminated partakes of the color of that which illuminates it.” – Leonardo DaVinci, (1452–1519). Italian Renaissance artist & engineer.
With an infinite number of websites competing for attention on the Internet, grabbing users’ attention within the first few seconds is key (10). Visual appeal can sink in that hook.
Research conducted by a group called the Institute for Color Research revealed that people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing. Between 62 percent and 90 percent of that assessment is based on color alone, the institute determined (11).
Designers today aren’t as bound to the palette of “web safe colors” as a decade ago. Standardization of web browsers and the popularity of Flash-enhanced websites have given web designers the ability to pair thousands of colors together.
There are, however, certain colors and color relationships that should be avoided. These color combinations can be eye irritants, cause headaches, and wreak havoc with human vision.
According to the Color Worqx website, every visual presentation involves figure-ground relationships (8). The more an object or figure contrasts with its surroundings (or ground), the more visible it becomes. If there is not enough contrast between figure and ground, a viewer will squint to view the text, causing eye fatigue.
For example, people will strain their eyes trying to read yellow text on a white background, or blue text on a black background because of the low level of contrast between figure and ground (8).
To help avoid unattractive and detrimental color combinations, author/designer Mark Boulton is among many graphic design experts who advocate limiting a web site’s color palette. He suggests first building of a website free of color – completely in black, gray and white (4).
“There’s a lot of value in removing color from the equation entirely and focusing on the tonal aspects of a design before applying the color,” he says. “Designing with black and white first will ensure that the [web site] doesn’t rely on color to work.”
Once the shell of the site is built and tested, add color to highlight specific usability elements of the design,” Boulton argues. He says to splash color on key functional elements of the web site, such as search buttons or elements of the navigation bar. Color used in this manner will enhance the functionality of the site by providing visual cues for users to find their way around.
Most people don’t read web pages, states Stephen Krug in his popular web design book “Don’t Make Me Think.” People scan pages, using their visual brains (12).
To make sure web site visitors are getting the intended brand message, Krug suggests web designers use color to help create a visual hierarchy on the page.
“The more important something is, the more prominent it is. For instance, the most important headings are either larger, bolder, in a distinctive color, set off by more white space, or nearer the top of the page-or some combination of the above,” Krug wrote.
The logo banner at the top left leads to the big bold white words on a dark blue ground. Directly below “What can I do tonight?” is another larger field featuring a slightly more muted shade of blue. This area serves as the focal point of the page. This area of the site exists in the upper half of the screen and encompasses a big headline, white text and a large photo. The blue background and white type is meant to draw attention to the top featured story of the day and offset it from the rest of the page.
In his book, Krug also suggests that smart designers should employ a repetition of color to show how things are related.
“Things that are related logically are also related visually,” Krug wrote. “You can show that things are similar by grouping them together under a heading, displaying them in a similar visual style, or putting them all in a clearly defined area.”
The Diet coke website also gives an example of colored text. Designers can color font type for emphasis instead of using bold or italic. The more the type color changes, the more emphasis it creates, wrote Tomas Caspers on his website, “Web Pages For Designers (13).”
Colored text works well as a subtle means to distinguish section heads, writes Patrick Lynch and Sarah Horton on webstyleguide.com. They recommend dark shades of color that contrast with the page background, and suggest avoiding colors too close to the default Web link colors of blue and violet (14).
On his Design Crux web site, John Soellner mentions one other purpose for adding color to online pages.
“Color can help with boredom.” Soellner wrote.
Web sites designers can use human color psychology to differentiate their sites from the pack and make use of attractive colors to keep visitors visually AND emotionally stimulated (15).
ADDING COLOR: BEST PRACTICES
• Design your website first in black, white and gray.
• Determine which functional areas of the site should get the most attention, and then highlight those with color.
• When deciding on colors, make sure the colors have some kind of relationship — either symbolic or literal — to the product or service (16).
• Be mindful of the users. Will the colors you picked appeal to the site’s target audience?
• Limit the color palette to a handful of colors or less.
• Repeat colors to reinforce branding and to bring a sense of visual harmony to the site.
• All the colors of the components — the navigation system, banners, buttons, and text must all work well together. Some common attribute must unify them (16).
• Make sure all text is highly readable. Enough contrast should exist between the text color and the background.
CITATIONS:
1. Morton, J.L (2005). Why Color Matters. Color Matters. http://www.colormatters.com/market_whycolor.html
2. Al Martinovic, Color Psychology in Online Marketing. http://www.2createawebsite.com/design/color-psychology.html
3. Nuttall, Roger. Psychology color marketing.
http://www.web-design-uk.biz/web_design/psychology_color_marketing.htm
4. Mark Boulton. (2006) Five Simple Steps to Designing With Colour. http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_with_colour
5. Morton, J.L. (2003) Color Logic for PowerPoint. http://www.colormatters.com/symbolism.html
6. Jennifer Kyrnin. Color Symbolism. http://webdesign.about.com/library/bl_colorculture.htm
7. Bear, Jacci Howard. Color Meanings. About.com Desktop Publishing. http://desktoppub.about.com/cs/color/a/symbolism.htm
8. Color Theory Tutorial. Color Contrasts. http://www.worqx.com/color/color_contrast.htm
9. Market Illumination. Why Color Design? http://www.marketillumination.com/why_color.shtml
10. Flanders, Vincent (2004). Biggest Web Design Mistakes of 2004. Web Pages That Suck. http://www.webpagesthatsuck.com/dailysucker
11. Institute for Color Research. Color Communications, Inc. (1997) http://www.ccicolor.com/research.html
12. Krug, Stephen (2000). Don’t make me think. Indianapolis: New Riders, pp. 22, 31-32.
13. Caspers, Tomas. Web Pages For Designers. http://www.wpdfd.com/wpdtypo4.htm
14. Lynch, Patrick and Horton, Sarah, Web Style Guide, 2nd edition. http://www.webstyleguide.com/type/emphasis.html
15. Soellner, John. Information Applied To Graphic Design: Color Psychology, http://www.designcrux.netfirms.com/infograph.html
16. Morton, J.L. (2005). Color and E-Commerce. Color Matters. http://www.colormatters.com/des_ecom.html
Psychology of Color by Marie K. Shanahan is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. Based on a work at mariekshan.wordpress.com.
this page isn’t very colourful
[…] while red states are considered Republican. Swing states are purple or yellow. Do you think thecolors in the graphics have an effect on the delivery or understanding of the […]