The latest iteration on the Rationalist Association (RA) site sees a bit of a maturing of our use of the RA colour palette, so this seems like a good time to talk about the palette, how it’s evolved and how we’ve learnt to use it.
The origins of the palette are back in August 2012, when we led the team at the RA through a series of design investigation sessions. These included a look at the current design ethos of the New Humanist magazine, along with the illustrative and photographic content. We also did a keyword mapping exercise, the results of which are shown below (each circular marker represents a different member of the RA team):
A couple of things came out very strongly from these sessions:
Our first iteration of a colour palette was based upon some colours used in the content of the New Humanist, which some members of the team were particularly keen on. These included a salmony pink, dark purple and a useful warm dark-grey colour.
As the design of the site progressed, however, we started to feel that these colours were either too muddy or too wishy-washy, lending a sombreness to the site which wasn’t in keeping with the freshness we wanted to bring. Rather than helping the content stand out, these colours made too little distinction between content and UI elements. We started to think about changing the colour palette.
For a previous client, we had consulted a colour trend specialist, who briefed us about upcoming colour trends, at the time for Autumn/Winter 2012. From there, we had the idea to base our palette on the Spring/Summer 2013 (see the Pantone colour report), which adds freshness and currentness to the use of colour. We also built the site in such a way that we could easily update the colours for future seasons.
We also retained the warm grey from the previous palette as this was proving a useful and pleasing colour for text and other UI elements.
Picking a palette, however, is only part of the story. As anyone who works with colours knows, the challenge is in working out how to use them.
We quickly settled on the red for brand elements such as the logo, and for action such as anchor colours in some places. One example from this iteration is the large membership button at the bottom of the new “Action” page, elsewhere this button is a subsidiary part of the UI, and so is in a calmer colour. Here, the button is part of the main message of the page, so becomes a bold, attention-grabbing red.
Of course there are also accessibility issues to take into account, which aren’t relevant to the world of fashion but very much are in the world of web design. For example, the light colours are darkened before use as a text colour in order to ensure sufficient contrast.
In the previous iterations of the site, colour use was sparing but more scattered throughout the UI. In this iteration, we have stripped back the use of colours in the UI elements, mainly going with red, white and dark-grey, but we have introduced the colour palette much more strongly on the homepage, where the purpose is to establish the identity of the RA brand, and there is little content to compete with.
This has been achieved through the inclusion of simple, blocky, illustrations:
These are interspersed with non-illustrated content, to spread the illustrations out and ensure the page doesn’t become overpoweringly coloured.
One of the reasons these work on the page is that we’ve had a bit of time to get used to using the colour palette and figuring out how to combine the colours effectively. The image below tries to highlight ideal colour combinations.
We’ve found that the yellow and green shouldn’t be used too much together, but with the other colours interspersed their slight clash is quite pleasant. The red should be retained for brand elements and action points, rather than scattered through the illustrations.
The illustrations are also very blocky, rational shapes. Too much detail overwhelms the page. The point is the colours, rather than the detail of the objects represented. Using bold shapes in this way also makes updating the colour scheme easier if we get the opportunity to change the colours with the seasons.
The evolution of the RA colour palette has happened very much in tandem with the evolution of the site. We’ve taken the opportunity where it has arisen to develop some branding for the RA, as no guidelines were in existence when we started. It’s absolutely not a finished piece, or set in stone, but something that we aim to improve upon with each iteration of the site.
Previous entry: My personal road map for the Rationalist Association website
Next entry: Pocket money contract