I'm Chris Adams, and for the next ten weeks, I'll be working with Rob to create a new look and feel for westminster.ac.uk.
With the new navigation outlined by the wireframes in the previous post, the next step in our plan is create a colour palette that doesn't clash with the the current branding the university employs.
We're also looking at using colour in the site's templates, to indicate where the user is in when on the site. The new site is split into six main sections - we need to take this into account when we're making our palette.
The palettes are intended for use on the new web site only, they aren't print palettes, and they may change after blog feedback or post brand-review. Please don't adopt them for any current work!
So how do we actually go about doing this?
You can pick a palette from a number of sources - picking colours from a photograph is a practice that often yields pleasurable results, without needing to know why, but a little application of colour theory can go a long way too.
Most painters and designers will be familiar with colour wheels and the concept of colour harmonies. Here's a very simplified, whistle stop introduction:
You can think of the three primary additive colours of red, yellow and blue as three sections of a circle. Now allow for the mid points between these each of these three colours, to get three more secondary colours. Repeat this process a few more times and you'll end up with the kind of colour wheel you'll see in apps like photoshop or illustrator.
There are a few simple rules you can follow when picking from this wheel, to create colour schemes. Here are a few examples
Analagous colour schemes
Colours used are adjacent in the colour wheel.
Complementary colour schemes
Complementary colour schemes choose from opposing (or close to opposite) ends of the colour wheel. This creates high contrast,without one colour really dominating the others in the scheme.
Twiddling knobs on Creative Suite - making other schemes
There are other approaches available, like picking triads from complementary areas, tetrads to create palettes, and to be honest, there's no way to adequately explain colour theory in a single blog post, so I'm grateful to Adobe for having a few wonderful toys to help explain this process interactively.
Since their release of Creative Suite 3, an online service dubbed kuler has made choosing colours much more fun that it used to be, and the latest incarnation of Illustrator has a a very, very cool new feature know as Live Colour, that makes the process of creating new colour schemes much easier.
Keeping the Claret
While much of the site's design is yet to be finalised, one thing that is non-negotiable is the existence of University of Westminster Logo on every page. Any palette we use will have to complement, rather than clash with the logo's combination of claret and grey.
Fortunately, both kuler and Live Colour are able lock one colour as a constant while allowing you to dynamically update other colours, to create a palette that won't clash.
After a few abortive attempts at making colour schemes that I'm happy with, using harmonic approaches, and analagous approaches, I've ended up creating a 'Pentagram' of colours for the current palette using Illustrator.
We now have 5 main colours for the palette (and then adding a warm grey, a sixth colour, to match the number of top level sections in the site).
Hues and shades
From here, I'm taking a leaf out of Andy Clarke's book to flesh out the palette, creating further variants from each colour, by mixing differing amounts of white (to create another 4 derivative hues) and black (making 4 more derivative shades).
The easiest to to do this is simply create a line of black boxes, and a line of white boxes.
We then overlay the one of the five colours, with varying degrees of opacity, over these blocks:
Repeat for each colour...
We now have a versatile colour palette, that will help users navigate through the site, and also look acceptable when sharing the screen with the current logo.
Further reading:
http://www.colormatters.com/ - J.L's Morton's page is a really good introduction to the concept of color theory, and a where a number of the images used in the post come from.
http://www.worqx.com/color - more on colour theory
http://kuler.adobe.com/ - Adobe's free colour tool. Can put put swatches for you to use in Photoshop, Indesign, Illustrator et al. Well worth the slightly odious registration process.
http://www.stuffandnonsense.co.uk/archives/creating_colour_palettes.html - Andy Clarke on expanding a palette with hues and shades.
