Tags : Web Design

The use of colour on the web

Tags : Web Design

Technically speaking, colors are the way our brain, by use of our eyes, interprets electromagnetic radiation of a wavelength between 350 and 750 nanometers. Electromagnetic radiation with a wavelength of over 750 nm is called infra-red, and radiation under 350 nm is ultra-violet......

O boy! sorry, got a little carried away there. Im actually here to talk to you about the fundamental and obvious rules and patterns when it comes to colour and web design. Like design 'templates' on the web, colour 'templates' also play an important role. Although perhaps not as obvious, since the structure of a site can determine how it is used, colour repetition can make or break a decent design.

Before starting on a design, a good hard study of the client's style guide is a great way to kick it all off, it will inform you of the basic colour palette you will be utilizing, plus will also give an insight into what other colours may become part of a secondary palette.

As an example of this, lets look at a strong brand palette such as www.bp.com. They are (notoriously) ruthless with their use of the corporate brand and its internal and external use of colour, and as can be seen on their website, it is strictly adhered to. The secondary palette could be seen as the use of the negative white space, but the colour palette borrowed from the brand itself is strongly spread throughout the pages. This gives the site a serious head start when it comes to 'holding it all together'.

Coupled with their printed collateral, the brand is easily recognized the world over and creates an incredibly strong family of graphic elements.

But of course a great example of how this may not be applied so well is... http://www.homeofheroes.com Although I must admit Im envious of their logo. Now THAT is 3D!

On the other hand, here is an example of a home page where it may be viewed as bad design with an appalling use of a colour palette and beyond repair navigation..however...the subject is so questionable it seems to suit...

http://www.dokimos.org/ajff/

Now I'm going to randomly pick a colour from my (printed) colour wheel (just happen to have one in my pocket) and give you a quick update on its current status in the fickle world of design....

Black - used in recent years, not just as a backdrop with glittering gifs for detailed personal insights into subplots from Star Wars fan pages, but as a remarkable tool to make content pop out from the page itself. Always seen as a strong pallete for high end brands such as dolce gabbana and other European fashions, black is slowly making its way back into everyday colour schemes in order to enhance and stimulate pages in a tasteful manner.

Some examples:

1. http://corkingdesign.co.uk/

2. http://www.nativetongue.com.au/
3. http://mutantlabs.co.uk/

Although sometimes shunned upon by usability boffins, white text on black backdrops is incredibly effective, if sculptured correctly. And of course the use of primary colours or shocking pink will truly make the dullest of dishwater shine! But as mentioned before, this all needs serious consideration or you could end up with a rather disjointed and heavy site.

And as Hayden Fry* once bellowed, "Black is a colour of power and strength.", I bid you all farewell.

 

*Sure, Hayden Fry was a College Football Coach, but I'm sure he knew something about colour...