Colour in web design is a very important tool in our arsenal, it sets the mood and feel of the website, sparks subconscious emotions and directs our eye.
Here is how to use colour the right way to change your user’s decisions, lead them to think they are making a rational decision when in fact you have already planned it all already.
High contrast grabs attention
Many people make the mistakes of using colours that are too similar, while in some designs using similar colours can really set off a design 9/10 there is always one colour of the same hue but in the opposite position on the colour wheel.
Using this website as an example, creme, black and blue are my brand colours but use red to grab the user’s eye in the most important places, it has a high contrast against my brand colours and pulls the user’s eye.
So while u may have opened the page and thought you voluntarily looked at my call to action in the header or my side bar, the truth is that’s where I always planned for you to look.
Using high contrasting colours is a great way to influence your user’s decisions.
Use colour hierarchy
It’s always nice to pull users attentions and get them where you want them, but over using your colours in the wrong ratios can produce an amateur looking website that loses its professional appeal.
Here is a common practice I have picked up over the years and serves me pretty well when designing my clients websites;
- 40% White or similar light colours – Invert if going for a dark design
- 20% Black or similar dark colours – Invert if going for a dark design
- 30% Brand Colour
- 10% Eye Catcher
By creating a hierarchy for colours and using them in set percentages, not only can you produce a professional website that feels like it has some serious branding but you can effectively direct your user’s eye with high contrast colours and attention grabbing animations.
Want an easy way to test out some colour palettes without having to open Photoshop? – Check out ColourLovers
Colour sparks sub-conscious emotions
Taking things a step further, did you know that colour on a web page will spark sub-conscious emotions which ultimately can help sell more of your product? but how do you choose those perfect brand colours that will be used on your stationery for years to come?
Take a look at the following colour chart:
This chart shows all the emotions and thoughts we feel or think when we see these colours, remember that things can change when you start to combine colours – blue and green will not produce the same feel as blue and orange. Blue and orange will produce a techy feel where as green and blue will produce an organic light and airy feel.
Circle Diagram – Customers Decisions with Colours
Bottom Line
Colour usage in website design is often underestimated and many think its based on what they like but business in this day and age is ruthless and website owners need to be constantly looking for new innovative ways to standout against the competition.
I feel a lot of the business websites I see out there could be performing a lot better then they currently are by simply choosing better colours, optimising current colour usage, re-branding there website and brand materials or splashing the cash to get a new bespoke website.
About ZeroBulb – We’re a creative website designing and branding company based at the heart of Kochi – Kerala. Need professional designs that helps to increase your sales and business? Contact us now and get a free quote.
3 comments
Hi, there to all, how is the whole thing, I think every one is getting more from this web page,
and your views are good in favour of new visitors.
Nice post. I was checking continuously this weblog and I’m inspired! Very useful info specifically the remaining section 🙂 I deal with such information a lot. I was looking for this particular information for a long time. Thanks and best of luck.
There’s noticeably a bundle to know about this. I assume you made sure nice factors in options also.
Comments are closed.