On using colour in design

December 30th, 2014

It’s become apparent to me that digital designers are absolutely in love with greyscale. Whether it has something to do with the relatively unique circumstance of colour on screens being additive rather than subtractive, im not sure, but what I do know is that we seem so quick to turn to shades of grey to resolve our solutions.

While I do believe there is nothing wrong with the use of grey from time to time, I believe that by adding colour to our shades or grey and to neutral tones in our colour palate, we will create a more emotional, human and natural experience in such a simple and effective way. This in turn will communicate a stronger emotion on page and improve readability.

Case Study

Take the example below, it looks perfectly fine; it adheres to a 12 column grid, it uses Verdana and there is clear contrast between headings, paragraphs and links. Granted the leading could be better, but we’re not here to discuss that today.

redacted-grey-demo

Its a pretty safe design, but ultimately its quite boring too. What makes this page boring is that we have white and shades grey, the only form of personality on this page is the purple feature colour. We could ultimately change that colour as per a companies branding and it would be a completely different site, only the message between them would be the same. It is sterile.

While the message will be communicated through the content of the site, such as the text and images, we have such a subtle and powerful weapon in the use of colour, which we have completely overlooked. The colour choices we make will set the tone of the site, giving the content more emotion.

redacted-grey-demo-2

In contrast, I believe by adding a subtle hint of the feature colour into the greyscale of this page, it suddenly has a warmth which the previous example lacked.

Screen Shot 2013-06-02 at 22.16.56

Screen Shot 2013-06-02 at 22.17.10

Similarly, you could use analogous or complimentary colours, which can completely change the tone and feel of a site.

Case Study 2

When you look at the website I designed for Robert Mills, you will see that there are no greyscales on the page, the background colour is an off-white, while the body colour is a dark-grey with a hint of the green used in headings.

Screen Shot 2013-07-31 at 14.24.31

Screen Shot 2013-07-31 at 14.26.08

While very subtle, what this actually does is help to make the simple decisions for Rob’s site much more personal and work harder for him.

Without colour - a colour which Rob identified as his favourite - this site would suddenly feel a lot less personal. Further still, the choice of toning down the text to a green-dark-grey and mixing green into the background colour, it actually softens the harshness and contrast of the page, in turn making it more readable.

Why is this?

Ultimately this goes back to the principals of art theory, but there is also the personal aspect to it too.

When a brand uses a colour, it has used this colour as they feel it helps to communicate the ideals of the brand. Whether the choice they came to supports these ideals or not, that colour becomes synonymous with the brand. Grey is such a neutral colour that it does not stake any claim on the brand - this can be a good thing, sometimes we don’t want the colour to mean something - but at the same time it doesn’t help to develop the brand.

From an Art Theory perspective, you only need to read Ian Storm Taylor’s article on why you should never use black, to understand why you should never use grey. Grey, like black, does not occur in nature, grey is a man-made colour. If you look very hard at anything natural which you perceive to be white, grey or black, you will see that they are always saturated with colour, giving it warmth, coldness and emotion.

At Art college, we were always made to colour our canvases in a colour as a basis for our life drawings, we were banned from using black and white. Instead we would have to look very closely at the tones of the subject matter and properly identify the colour - the shades of grey we initially saw, were infact desatured cold blues, or warm browns, anything but grey.

I believe when we begin to look at these two aspects, we realise that there is so much potential in the shades of grey we’ve been using all along. While very subtle, I believe these minor changes can have profound effects on a site design.