Module 3-3: Working with Color

I picked blue.

Below is a sample of a web ad that I thought made good use of blue. A scene most people would find chaotic, with scary wires and an industrial feel, is colored a tint of blue to take the edge off - and make the image (and message) beautiful. (This image and all others on this page are linked to larger versions.)

CA Technologies Ad

Here are two designers (both referenced in my site proposal) and the way they used blue (screenshots only, as both sites were recently redesigned).

Steven Little Design

Rockstar New Media

What does blue do?

Color Matters says "Blue is the favorite color of all people. It's nature's color for water and sky, but is rarely found in fruits and vegetables. Today, blue is embraced as the color of heaven and authority, denim jeans and corporate logos. It is cold, wet, and slow as compared to red's warmth, fire, and intensity. Most blues convey a sense of trust, loyalty, cleanliness, and understanding. On the other hand, blue evolved as symbol of depression in American culture."

Communicate with Color states, "Blue: truth, dignity, power, coolness, melancholy, heaviness, trust, reliability, belonging, coolness. Light sky blue is associated with tranquility, but the deeper value indigo is associated with depression."

Color Symbolism says, "Blue is the color of the Virgin Mary, and is associated with girls who have similar pure qualities. In addition, it is the color of water and the sea, with all the symbolic references already discussed for that element - that is, blue usually indicates femininity, life, purity, etc., just as water does. Blue can also symbolize peace, calm, stability, security, loyalty, sky, water, cold, technology, and depression." (I'm noticing the word depression show up a lot; I'll have to watch that.)

International Color Guide (Xerox) tells us, "Blue is a male color; it suggests a corporate or conservative atmosphere. It is the most popular clothing color for young people. Blue can also suggest sadness, superiority (as in a first place ribbon), freshness, calmness, water,cleanliness, winter, and coolness." (Worth noting here: one source tells us blue is male, while another states that it is a female color.)

Who uses blue?

Here's a few examples of blue used for the effect that is described by the above sources. All of them are asking for the trust of their visitors.

Barack Obama's "Donate" page does not use only blue, but it uses a muted style that has a significant blue quadrant. This muted, almost neutralizing style is how many business websites use the color blue. His donation buttons do use the color blue. Here, he's asking for money, so you know they have faith in this color scheme.

Barack Obama web site

Facebook and the National Council of Teachers of Mathematics's website colors are white and blue.

Facebook web site

National Council of Teachers of Mathematics web site

Here's a different take on blue that I thought was worth noticing. National Geographic features photos of the earth, space, and large bodies of water. There's one currently on their home page. But instead of using blue, they use dark gray, which is neutral, and the complimentary color (and legacy color for the magazine's identity) bright yellow, which looks great when set against the deeper blues. I think they chose this scheme with the idea that it would work well when coupled with their nature photos, most of which are either green or blue.

National Geographic web site

Works Cited

Color Matters

Communicate with Color

Color Symbolism

International Color Guide (Xerox)

Barefoot's Handy-Dandy Color Chart

RGB to Color Name Mapping

35 Most Attractive Blue Website Designs for Your Next Projects

60 Brilliantly Blue Web Designs for Your Inspiration

BarackObama.com

Facebook.com

National Council of Teachers of Mathematics

National Geographic

Rockstar New Media

Steven Little Design

This page was created by Glenn Fink on March 16, 2014. Last modified: March 16, 2014

My Module 3-2 Page

My Module 3 Page

My Module 2 Page

My Module 2-2 Page

Module 1 Answers

Back to Index Page