Colour Me Organised

Robert Mills

Colour is one of my favourite topics to write about because it is such a powerful device when it comes to design. I dedicated a whole five chapters to it in my book including how colour can communicate cultural and political values subliminally and how colours can evoke emotions in people. I also wrote about how colour can be used to organise content and contribute to a wayfinding system, using theBBCGuardian and Carsonified websites as examples. This latter topic is the one I want to revisit today.

Since writing the book, more websites have also applied this device and I wanted to share them with you here to emphasise how colour can add so much more to your designs both visibly and more interestingly, invisibly.

One colour per page

It’s a simple method but having one dominant colour per page is a great way to differentiate between pages of your website. We recently did this for a site for Woko Woco by having a different colour for the headers of each page. This colour was also shown on other parts of the page where appropriate and the roll over states on the nav items were also the same colour as the page they linked to.

It’s a relatively small site so a wayfinding system isn’t conducive of a good user experience but it makes it clear when users are on a certain page as there is a colour distinction between each section of the site.

Here are the headers for four of the pages on the Woko Woco website.

Homepage:

Member Login Page:

Events Page:

Charities and Community Page:

The Carsonified site take this approach to the next level. There’s a case study in my book about the redesign process designer Mike Kus went through with the site but I’m going to use one page as an example here to show how effective colour can be when relevant to the content of the page rather than just being randomly selected.

Colour and Content Combined

Each page on this site is one bold colour. This approach really works well on this site because the colours have been chosen in line with the content on that page. The values page is red, the events page is blue and the jobs page is green, for example. Check out the site if you aren’t familiar with it. Here’s the job page:

Mike didn’t randomly pluck green from a list of colours and use that. The connotations of this colour are relevant to the content of the page and though this isn’t stated literally on the site, the connections between the green and the content are received and processed subconsciously because culture and the media have attached a meaning to this colour which is then regularly reinforced by others using it in the same context.

The same is true of other colours. Red is always the dominant colour for anything related to love such as Valentines and white is more neutral so is used on many tourist information websites that have to appeal to many cultures.

Back to Carsonified though and the relevance of green. If you look at any media to do with the environment chances are that the predominant colour is green because of its associations with the planet and nature.  Recycling icons are green, eco-friendly posters are green and so when green is used within these contexts, the audience can immediately draw additional meaning from the text because they have learned these associations over time. You see green, you think environment/nature/eco.

Using green for the jobs page was a clever choice by Mike. It was clever because of the content on that page which has the word grow and the  tree image. Trees = nature = green. The word grow can apply to the tree but also to the expanding team as they advertise jobs and hire people. The content on the page would still be fine if the page were another colour like orange but having it green has ensured that their is consistent storytelling with the content and design and the extra meaning that can be derived from the subconscious processing of this association means that Mike has successfully designed the invisible.

Colouring the way

The next stage in using colour to group and organise content is to move away from one solid colour per header or page and bring it into the navigation. This is where it starts to contribute to a wayfinding system. The BBC do this well.

If we look at their navigation we can clearly see that News is red, Sport is yellow, Weather is blue and so forth:

 

If you go to one of the landing pages for these sections you’ll then see that the associated colour is dominant there too. This means that as you visit the site more often, the association between the subject/content and colour will be made. That means that if you are on a page where the header is red you’ll know it is news. Sure the content itself makes this pretty obvious and explicit but it’s about the subliminal connections between content and colour.

Here are the headers for some of the main sections of the BBC website.

News:

All of the news subpages also have a red header for consistency. Whether it is entertainment, education or business news. Anchoring a colour to a content type like this means that whenever that colour is used on the site it is likely to be news related and users can easily seek out the association. It helps them find their way.

Sport:

The Sport section was redesigned recently and it is yellow to say the least. Again though this means that related sports content elsewhere on the site can be yellow to make it clear that it is sports news. Yellow is used sporadically on the Sport landing page too for headings and play buttons on the videos. This is also applied on sub pages such as Formula 1 and Rugby Union.

Weather:

Blue is the perfect colour for the weather section because of the connotations with blue skies and particularly relevant to the UK, rain! Looking back to the main nav on the BBC site, a light blue is used to highlight weather whereas it is a darker tone on the actual weather landing page. This coupled with the use of green gives a distinctly ‘earthy’ or planet like feel to the page. Colour combinations open up a whole new world of storytelling possibilities and this is where politics and nationality become more relevant.

If you look further down the Weather page they have also used colour well to demonstrate the temperatures but I’ll let you find that.

Nature:

If I asked what colour you thought of when someone says ‘nature’ I’d bet my last packet of Monster Munch that you’d say green or brown. That’s because these colours are so often used in this context. The BBC Nature page is no exception as they have gone for a leafy image that further extends this message/association. They don’t need to state on the header, ‘we have purposely chosen a colour that most people associate with nature’. It’s invisible in the sense that we just know the connection.

CBeebies (Kids):

Look at any website aimed at kids and it will be teaming with bright primary colours. Nickelodeon is one example of this, predominantly orange but many colours used throughout. The section of the BBC website for kids, CBeebies, also adheres to this with a bright colourful header and each content box below here a nice bright colour too. You can often count on a rainbow being part of the the design too.

This approach isn’t exclusive to the BBC though as the Guardian also group content by using a colour for each topic such as culture, news and sport. More recently another example was brought to my attention that isn’t a news website. This is the website for Guggenheim. Here’s the header:

Beneath this, call to actions and nav items change colour to match the section so if you click on Venice for example, things change to orange. All the content related to Berlin is blue and so forth. The same approach as the BBC and the Guardian and an effective way of showing users where they are, whether they realise it or not!

Adding icons to the mix, the rather beautiful new website for Greenbelt combines colour and icons to group and organise their content.

I love this website and urge you to take a look if you haven’t done so already. Here’s the main nav with colour and icon combinations in full and effective use:

Further down if we take a section of the homepage we can see how these icons and colours from the nav have been applied elsewhere, making it clear what category each piece of content belongs to:

 

Whenever users see the orange tent icon they know it is festival related content, the green ticket tells them it is box office content and the blue speech bubble means blog post. They don’t need to specify ‘blog’ every time, the icons and colours communicate this, quickly and effectively.

The contributes to a larger wayfinding system because if you were to go into a section, About for example, the page heading is purple as is the icon on the left hand side secondary nav. It brings it all together so invisibly we know the content on the page is part of the about section. Here it is:

 

How It Works have opted for a similar method.  Here’s part of the homepage:

 

Here you can see that they have one colour per topic, again opting for green for Environment. They have also added icons for each of these topics but the overall design of the website has meant that this device is somewhat lost amongst all the content. If you look at the website itself, you can pick out content based on topic relatively quickly because of the icons and colour bars, once you have learned what topic each colour has been assigned to, but this example loses the simplicity that Greenbelt showed with their design.

Where does this leave us then? Well such an approach won’t be possible or suitable for every project but if you can bring colour into your design that communicates a consistent message with your content and plays upon the pre-conceived notions and associations users have with the world around them,  then it will bring greater meaning to your site both visibly and of course, invisibly.