Lesson 8: An introduction to using colour

Colour

This lesson introduces one of the most powerful tools in a designer's toolbox; colour. We look at how colour affects people and understand how this can influence the colours you use in your designs. Note# colour blindness affects 1 in 12 males and 1 in 200 females so always consider strategies to address that.

This lesson is a brief introduction to:

 

Colour conveys all sorts of meaning. Take the colour green for example; can you think of anything else associated with green that's not listed in the artwork?

 

Popular colours and their meaning

Applying the "right" colour in the "right" way is a somewhat subjective exercise. What looks good to you might look bad to others, however, there are conventions to using colour which, when followed, can generally make your designs more effective.

Read this article from Smashing Magazine, it demonstrates with examples and explanations how colours have been used on a variety of web sites to convey meaning.

Read the following brief descriptions of popular colours to get a general understanding of common colour associations.

Blue
It's a colour that is associated with faith, honesty, openness, intelligence and has a universal appeal since it's the colour of our sky and sea. We're used to it acting as a backdrop to our lives.

Use it for airlines, education, cleaning products, toothpaste, boy products (although interestingly, pink was the colour linked to boys, and blue for girls until around 1920's).

The background colour for the content on this page is a "dirty-pigeon blue" which more precisely, can be defined by html colour code #334a72 These are the codes you use for web pages. For more on html colour codes see W3C Schools. HTML colour codes are covered in more detail in the web publishing module.

Red
Red is associated with anger, passion, danger, loud noises, ferocious speed, drama and heat.

Darker shades of red can be associated with wealth, fine dining/wine, prestige.

Use it to draw the eye but beware overwhelming your viewer with it, it can cause fatigue.

Orange...
...is like red in terms of its energy and vibrancy but more mellow and without a sense of anger.

Orange has been found to encourage appetite. It's more informal than red so use it in this way. If your designs need to be less formal but still full-of-energy, go orange.

Flouro orange is the most visible colour in daytime.

Green
Generally a natural colour. In darker tones it's the colour of money.

As a lime-green, it suggests growth, energy, positivity, vitality, vigor, youth. Is this the office (opposite) of an evil organisation headed by a megalomaniac or the IKEA design studio ?

Green has many personalities. As a pale green it can convey a sense of disease. Dark green can be regal/ rich but also suggests jealousy and deception.

 

Yellow
Yellow floods you with positivity and good cheer.

It's statistically proven that yellow cars have fewer accidents than any other colour. It catches your eye. Because of this it's used to warn you too.

Use sparingly like red. Don't flood your viewer's senses.

White
Like black, it's not a colour, however it's upon which most published content sits. Just like a baseline for type, white acts as the foundation upon which you design. Use white as often as you can to place emphasis on what is there and to allow your viewer's eyes to "rest".

Black
Powerful, strong, use in combination with primary colours for memorable, resonant designs. As the fashionistas declare; "dahhling, black goes with everything!".

Be wary however that it can dominate any layout. This is true of most hues that have dark tone but especially black.

If you're new to designing layouts and working with colour, avoid using black as a background until you have a better understanding of focus, hierarchy and dominance.

Purple
Regal, rich, royal (Wikipedia link) . The inks used to generate purple hues (colours = hues) were expensive and only the aristocracy in Europe could afford them. Henceforth purple became associated with wealth.

Brown
Comforting, subdued, it sits in the background allowing other objects to dominate. Browns and greens form a partnership that suggests nature, growth, calm and hope.

Brown is never going to be the "hero" like red, blue or green.

The above descriptions apply for "Western" cultures. If you're working on a colour scheme for "Non-Western" cultures there are very dramatic differences.

For further reading on cultural differences and colour association:

http://www.sensationalcolor.com/category/color-meaning/color-around-the-world#.UzNdPPmSx51

Here’s another colour education site that’s worth reading:
http://www.colorcom.com/research/why-color-matters

Colour Schemes & The Colour Wheel

Isaac Newton made the first colour wheel. He designed it to make choosing colours easier or, more correctly, to make choosing the "right" colours easier.

It represented 8-colours and the colours were arranged so that if you added opposite colours together the result would be white. This wheel found favour but it become more popular once Johannes Itten (Bauhaus School Germany) had evolved it to more accurately represent 12-colours. The arrangement of 12 colours was found to provide the most utility for designers and artists.

Colour Theory and the Colour Wheel when applied in a photographic context; a must-read:
http://erickimphotography.com/blog/2013/11/26/street-photography-composition-lesson-12-color-theory/

Using the Colour Wheel

a colour wheelTo understand how you might combine colours together using a colour wheel, study these articles from Before & After Magazine then you should be confident enough to do the learning task below.

Download the Colour Wheel template. (710KB .pdf) Print it out as a reference.

Download and read the "Our Colour Wheel" article (3.8MB .pdf)

Download and read the "Cool a hot photo" article (2.4MB .pdf)

Download and read this article "Perfect Colour". It's all about finding the right palette to match your photo (2.2MB .pdf)

Learning Task: Colour Research (6-9hrs)

Download the MS-Word document (160KB, Word 2007) from our LMS and follow the instructions within.

It's a research assignment to test your understanding of colour.

Submission Guide
Save it somewhere safe, then submit it for feedback via email. Don't publish to your blog.

 

Lesson 8 | Summary:
This lesson introduced the concepts of colour association and schemes, colour wheels and how colour can evoke certain emotion in the viewer.

It's a brief introduction to the power of colour. If you need to know more consider further study at Certificate IV level.

Resource:
Steven Bradley on how to use colour in your design. Extensive commentary on this topic, highly recommended:
http://www.vanseodesign.com/web-design/color-meaning/

 

Design Module | Summary

If you've worked through the previous eight lessons you should now have an introductory understanding of design terminology and the value of creating artwork that adheres to Design Principles.

It also means you should be ready to do the assessments (see next lesson).

It's expected that from here-on you'll use these principles to guide you in making your work easier to "see", more effective in conveying your message and ultimately adding value to what you're creating from responsive web site to smart phone app to newsletter to beer coaster. Design Principles can be applied universally.

If you intend to grow your skills further, you need to immerse yourself in design resources, receiving and acting on feedback and practice.