How the Importance of Colour in an Interface helps the User Navigate.

July 4, 2012 - 11 minutes read

Colour is the magnet that groups information in any data design. It can powerfully attract and direct  the particles of information that distinctly separate any given data. It creates a flow of reading which leaves the content (text or form) to speak to the viewer.

Colour is closely linked to the perception of humans. On your computer screen, colour remains just a pixel but when applied to a subject it begins to express, derive and define.
Ever since we have known colours we associate them with our clothing, accessories, surrounding and even our luck. Colours have known to define moods and to some extend also change them.
When all the 256 web colours are presented in different. combination and proportion it creates a unique mock tail. Sometimes it freshens you and at times you lose interest.
Just from identifying a colour as a child to choosing it as a part of your daily lifestyle has been a wavering journey. As we reach our adolescence we all have chosen a set of colours that comfort us.
Colours are not just a mere residue of light and shade, today it has become something beyond just the pixels that we see on-screen. There are so superficially real that we fail to believe that they are just particles that we see around us. Today colours have become an identity. Identity of an individual, a team or a group! Right from where we see the red of mobile services to the orange flags of the political parties. From the blue of the technology leaders to the green of environmental welfare!
Colours are visual accessories to your expressions, the ones you have and the ones who want to convey. Information is better understood when expressed. A designer expresses the information through his design elements. And these elements complete themselves through colours.
These expressions of colours are usually picked up from the natural surroundings of a human mind. Every colour is associated to a personality, mood or quality.

Red:

The colour of a rose; symbolises love. A dark tint symbolises rich and exclusive feeling. Red is also the colour of blood. A brighter shade symbolises heat or aggression.

Blue:

The colour of sky; symbolises infinity, calm or coolness. A deep blue of that you find deep down the sea would symbolise mystery and fear.

Violet:

The colour created from the mixing of red, blue and black. It symbolizes mystery, royalty and uniqueness

Green:

The colour of the leaves; symbolises health, eco system. Different shades of green also suggest jealousy and envy.

Yellow:

The colour of the sun. Symbolises brighthness, warmth, knowledge, cheerfulness. A darker hue of Yellow Ochre is close to the color of soil. It makes it earthy and indian

Orange:
A mixture of red and yellow has charcters of both.  It symbolizes heat , aggression, playfulness and at times balance too.

Black:

Black is the absence of light. It symbolises darkness, negativity, strength and  mystery.

White:

White is simply the presence of light. It symbolizes peace, brightness,

Grey:

A mix of50% white and 50%black. It symbolises neutral, aging and maturity.

 

Every color and it symbolization varies on the hue and shade of the color.

Take a look at some of these resourceful links:

Colour Forecast
http://www.pimkiecolorforecast.com
http://www.pantone.com/pages/fcr.aspx?pg=20910&ca=4
Hear about the latest colour

Are you falling short of colour schemes. Check them out:
kuler.adobe.com
Kuler works best when integrated with illustrator

Like to play with colours go here:
http://www.colorotate.org/

So you like a photograph and want to use its colour schemes, but you don’t know how to get it! Here you go
http://www.colr.org/
(Just try to keep your file size as low as possible.)

Every colour comes with its family of tints, shades and hues. Every hue and shade sets a different mood, character, personality, rhythm, harmony and talk.
Today we go through an era where every season is defined with a colour. When the leading fashion labels announce “Red is the new yellow’! That is the value of colour. It marks you. It attracts you. It separates from the crowd. It defines. It merges.
If the text and the shapes are the tissue layers of an application then the colour would be the skin tone.
It is because of this accessory that your design is noticed, conveyed and associated. An designer needs to have a good sense of use of colour to convey information popularly.

 

PERSONALITY

Colour to add Personality to your Interface

The appropriate use of brown and green in the interface of the “Project Noah’ creates a theme suitable to the objective of the site , that is – sharing amazing wildlife photographs.  The personality of the project is sprinkled evenly on the minds of the viewer as to what this social site is about.  The user begins to create a context that associates him/her to forest, woods, wildlife before even beginning to  read through the content.


 

Likewise, consider the web page of the advertising agency ‘Leo Burnett’. It’s a classic and so is its website-clean and informative. The white here creates a sense of classy and it also draws enough attention to the colorful videos.

 

Look at the interface of Facebook. The bold, yet friendly blue creates a social, neutral and simple feel to the website. The webpage looks approachable. Morever, the blue instigates the mind before and after you have seen the website. The moment you say Facebook you can imagine the blue !

Also look how the most essential feature like the logo and the login fields are given prominence just by placing it in the right patch. A hierarchy of information is created through the use of backgrounds.

 

 

 

GROUPING-DIVIDING

Colours is the key factor in conveying the information. With feature of Proximity and Prominence we can create relevance and perspective for the subject.

 

Proximity-Prominence:

Observe the use of white and dark grey type next to the logo of codrops to separate the categories of the menu tab.

 

 

Proximity-Prominence-Relevance-Subject:

Look at the interface below the lines are alternatively colored in the different shades of dark blue to improve readability. Use of white for the font define the categories , use of  light blue in the arrow defines the actions. While white font seems static , blue is more interactive.Proximity adds the variation and relevance in the subject.

 

The interface is way to clean . With the help of graphics and colors it creates a techy , game kind of feeling. On its way, its also sets a distinctive class to itself. Classifying and highlighting the elements with backgrounds guides the user too.

If you go to the website of Fruit-Ninja , scroll down a bit and you will find a division of game levels. Observe the use of colors here.

 

 

DIRECTION

Colour offers the user a guideline to read the content. It creates a flow for the information that is to be conveyed, whether it be backgrounds, text, decorative shapes or photographs. Let us discuss about the interface of  ‘Cut The Rope’. We all love it !

 

Color is that invisible element that creates a flow and directs the user as to how to play the game and what to get to win. The first time I played this game I could manage without reading the instriuction manual, other than some of its details. Go to their website and you are guided to the platform options and another one to try it on the web itself. Here, observe the separation of platforms with iphone-ipad and a green for andriod. They have distinguished the medium firstly through text, then through shapes and then through the colors. The use of the background color brown itself  highlights the game characters also reminding us of the cardboard box that the frog has come out from.

Only the free game has a regular box , the rest all are colored suggesting different environment and levels.

The sparkling yellow stars suggests that they are an important feature of the game and so does the candy.

The color element in a design speaks way before you even begin to read the content. Go ahead on the net and observe some more similar features that boost the usability of the design. I am sure it will benefit!