When I started out as a designer colour was something I really struggled with when designing a site. I found it really hard to find nice palettes that worked, and colour tones that gave the impression that I wanted. The ColourLovers site was a blessing to me – it was the tool I needed to make my designs work.

As I gained in experience I used the ColourLovers site less and less, but recently I found myself having a new challenge with colour.

I’ve been working on a site that has a strong colour palette of bright greens and blues. The challenge was to redesign the homepage content to make certain components stand out and had two main goals – lead a new customer to the next step of the buying process, and provide a customer call to action area for existing customers.

My first attempts had a few issues with them.

• Strong and dark components in different colours made the page look heavy and hard to read
• Light and soft components didn’t create enough differentiation between components, making the page look fussy
• A variety of lighter and darker components made the page looked busy and complicated

I used different colours and tones to try to get a clean page with clear distinction between components, but kept having the same issues. Eventually, taking a fresh look at it, I realised the following…

I needed to rationalise how I was using the colour

Just considering how these colours should work on the site improved it greatly. Deciding what colours should be consistent through all components and which ones should indicate different types of content made the site visually more cohesive.

I needed to reduce the amount of colours I was using on the page

I reduced the background component colours I was using to 2 strong feature colours, and one neutral light colour. One of the feature colours used had to really stand out, as this was the acquisition piece, but the other also needed a strong stand out on the page. To solve this a unique blue was used on the acquisition component, then a strong green that matched the background colour on the site was used for the secondary component. This allowed me to reduce the colours used, while also creating strong components.

I needed to consider the colour tones

Using a variety of tones of colour on the site also made it look more complicated and harder to scan the components. To deal with this I ensured that I only used two colour tone levels – one strong background colour for the two main sections, then a very light one for secondary components. This helped create a more even page that attracted the customers eye to the right places, without creating too much distraction.

Well, after around 11 versions I am eventually happy with it – let’s hope the client is too!

Tags: colour, design, style, thoughts