Choosing the right colours when designing a website is
something that requires a lot of patience and experimentation, and –
ideally – a minimum of guesswork.
Thankfully there are some useful rules of thumb to follow when it comes to working with colours, as well as some truly excellent sources of inspiration out there to help you make the right colour choices for your brand, website, and audience.
Let's start off by considering why colour matters, then I’ll list 20 colour recommendations for web professionals, followed by some pointers to my favourite tools at the end of this article.
Why is colour so important?
Psychologists have for many years studied the effects of colour on the brain / emotions. There don't seem to be any absolutes truths here. People’s perception of colour is largely subjective so I don’t think we can be too instructive in this area. Red doesn’t always mean danger, and blue doesn’t always mean calm.
Yellow is pretty much bi-polar, as far as I can tell. Somebody I used to work with once told me that it was ‘the colour of suicide’ and steadfastly refused to have our office painted yellow. Yet it is also said that yellow conveys optimism, confidence and emotional strength. So which is it?
There are also cultural considerations to factor in, something of particular importance to global brands: green may be lucky in Ireland, but it’s apparently not so lucky in England, while Islam venerates the colour. On top of that green is also the colour of envy, and of money. And it is also every eco-warrior’s colour of choice, and – more recently – has been adopted by a number of those wool-pulling energy companies. Wah!
So what on earth do you do? And where to start?
Well, it turns out that it’s not so much about choosing one colour as choosing a bunch of them, and making them sit comfortably alongside one another. The psychology of colour is less about individual colour washes, but rather an understanding of how people respond emotionally to multiple colours.
Ultimately, factoring in colour theory and pscyhology, colour choices for your website should only be made once the designer has a firm grasp on a) audience / market, b) geotargeting / cultural considerations, and c) brand / product and related guidelines.
Oh, there is another thing to think about, and it's important: d) usability / accessibility.
Usability and colour
Considerations relating to the psychology of colour, your brand, and your audience may help you narrow your colour choices. Now, there are some very important functional issues to think about.
Usability professionals have consistently warned us about the danger of making poor colour choices, for largely practical - as opposed to strictly aesthetic or psychological - reasons. Certain colour combinations are a non-starter. Poor colour choices can induce eye strain and headaches, forcing users to leave your site. Crazy page layouts can make matters even worse.
Yet this isn’t all about colour as such, but about contrast. Contrast is hugely important for accessibility reasons. Strong contrast is required to ensure legibility, so make sure the background is substantially different from the text colour.
Keep in mind that around one in 10 people are vision-impaired. Try printing out early prototype web designs in greyscale, to determine whether the eye can see differing shades of colour.
Ok, let's get to some recommendations...
20 colour tips for web pros
Here are some things to keep in mind when planning the colour scheme for your website. Remember that there are always some superb exceptions to the rule (see 13), so don't be afraid to experiment...
1. Contrast. Background colour should be a single wash and have plenty of contrast with the text. Black - or dark grey – text against a white background remains the most sensible option.
2. Avoid patterns behind text. This is the main problem with many of those user-customised MySpace profiles.
3. Links. I firmly believe that links should be coloured blue, largely because the web’s most popular websites typically use blue (Google, Yahoo, BBC, New York Times, eBay, etc). Why reinvent the wheel?
4. Clicked links. The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links. Avoid applying these settings to your primary navigation.
5. Limit your colour choices. The consensus opinion with regards to colour and web design seems to be one of ‘the fewer the better’. Use colour sparingly if you want it to grab the eye. Colour can be persuasive, but not if it is lost among a rainbow.
6. Shades. Many websites use a blend of neutral colours and a range of shades of their main colour choice/s. This is easier on the eye than trying to work with multiple primary colours. I’m currently a big fan of grey. Note that some people struggle to pick out differing shades of blue.
7. Add 30% more white space. By spacing out content units and blocks of colour you’ll help guide the eye to key areas. I’d wager that lightly-coloured landing pages with one brightly coloured ‘buy now’ button will convert better than a page featuring a mess of colour. Make that button stand out! Go on, try it…
8. Be ‘web safe’. Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.
9. Clashing colours. Nobody wants to read green text on a bright red background. Avoid bad colour combinations.
10. Branding. Make sure you consider brand guidelines and use matching or complementary colours throughout your website.
11. Take extra care when using light text on dark backgrounds. Not recommended for publishers, but it works for some websites. Here, you should increase the leading, tracking and decrease the font weight. Why? Because there is greater contrast with white on black, compared to black on white. But for news sites and blogs with lots of content, this doesn’t work so well.
12. Use gradients and shadows. Ok, this is a bit Web 2.0-ish, but it works. I’ve seen websites relaunch with barely anything changed except the addition of some sexy gradients, or a drop shadow below the logo. This can add a lot of depth to a site, making it appear less 2D.
13. Consider some colour coding. I love the brashness of colour in the navigation of the new Guardian website – they have ripped up the rulebook somewhat, but then we don’t do rules, do we? The typography works, and there’s plenty of white space on these colour-coded channels. It is a stand-out example, and shows how well this can work. It’s not just about colouring up channels: note how Techcrunch authors have their comments colour-coded when replying to reader comments.
14. Try a little opacity. If you insist on using patterns, or placing text in front of images, try reducing the opacity of the background pattern (or part of the image where the text is placed) to lighten the colours. This will achieve greater contrast for the text in the foreground.
15. Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background.
16. Avoid fluorescent craziness. This is the web, dammit, not a Stabilo Boss catalogue.
17. Remember the role of images. Pictures can add a lot of colour and depth to web pages. Keep this in mind when working on the wireframes / early designs of a website, as if you’re using test content (‘Lorem Ipsum’) you won’t necessarily factor in images. Don’t overcompensate with colour at this early stage.
18. Going global? Where do your existing and prospective customers live? Which market are you targeting? There are plenty of cultural considerations to factor in when choosing colours.
19. Demographics. If your audience is elderly then some usability experts suggest that brighter colours may be a good idea. On the other hand, if your website is mainly used by children then you could introduce lighter shades and pastels.
20. Does it fit? Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site heavy on hot pink might look a little bit odd
source: http://econsultancy.com/in/blog/2654-20-colour-tips-for-website-design
Thankfully there are some useful rules of thumb to follow when it comes to working with colours, as well as some truly excellent sources of inspiration out there to help you make the right colour choices for your brand, website, and audience.
Let's start off by considering why colour matters, then I’ll list 20 colour recommendations for web professionals, followed by some pointers to my favourite tools at the end of this article.
Why is colour so important?
Psychologists have for many years studied the effects of colour on the brain / emotions. There don't seem to be any absolutes truths here. People’s perception of colour is largely subjective so I don’t think we can be too instructive in this area. Red doesn’t always mean danger, and blue doesn’t always mean calm.
Yellow is pretty much bi-polar, as far as I can tell. Somebody I used to work with once told me that it was ‘the colour of suicide’ and steadfastly refused to have our office painted yellow. Yet it is also said that yellow conveys optimism, confidence and emotional strength. So which is it?
There are also cultural considerations to factor in, something of particular importance to global brands: green may be lucky in Ireland, but it’s apparently not so lucky in England, while Islam venerates the colour. On top of that green is also the colour of envy, and of money. And it is also every eco-warrior’s colour of choice, and – more recently – has been adopted by a number of those wool-pulling energy companies. Wah!
So what on earth do you do? And where to start?
Well, it turns out that it’s not so much about choosing one colour as choosing a bunch of them, and making them sit comfortably alongside one another. The psychology of colour is less about individual colour washes, but rather an understanding of how people respond emotionally to multiple colours.
Ultimately, factoring in colour theory and pscyhology, colour choices for your website should only be made once the designer has a firm grasp on a) audience / market, b) geotargeting / cultural considerations, and c) brand / product and related guidelines.
Oh, there is another thing to think about, and it's important: d) usability / accessibility.
Usability and colour
Considerations relating to the psychology of colour, your brand, and your audience may help you narrow your colour choices. Now, there are some very important functional issues to think about.
Usability professionals have consistently warned us about the danger of making poor colour choices, for largely practical - as opposed to strictly aesthetic or psychological - reasons. Certain colour combinations are a non-starter. Poor colour choices can induce eye strain and headaches, forcing users to leave your site. Crazy page layouts can make matters even worse.
Yet this isn’t all about colour as such, but about contrast. Contrast is hugely important for accessibility reasons. Strong contrast is required to ensure legibility, so make sure the background is substantially different from the text colour.
Keep in mind that around one in 10 people are vision-impaired. Try printing out early prototype web designs in greyscale, to determine whether the eye can see differing shades of colour.
Ok, let's get to some recommendations...
20 colour tips for web pros
Here are some things to keep in mind when planning the colour scheme for your website. Remember that there are always some superb exceptions to the rule (see 13), so don't be afraid to experiment...
1. Contrast. Background colour should be a single wash and have plenty of contrast with the text. Black - or dark grey – text against a white background remains the most sensible option.
2. Avoid patterns behind text. This is the main problem with many of those user-customised MySpace profiles.
3. Links. I firmly believe that links should be coloured blue, largely because the web’s most popular websites typically use blue (Google, Yahoo, BBC, New York Times, eBay, etc). Why reinvent the wheel?
4. Clicked links. The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links. Avoid applying these settings to your primary navigation.
5. Limit your colour choices. The consensus opinion with regards to colour and web design seems to be one of ‘the fewer the better’. Use colour sparingly if you want it to grab the eye. Colour can be persuasive, but not if it is lost among a rainbow.
6. Shades. Many websites use a blend of neutral colours and a range of shades of their main colour choice/s. This is easier on the eye than trying to work with multiple primary colours. I’m currently a big fan of grey. Note that some people struggle to pick out differing shades of blue.
7. Add 30% more white space. By spacing out content units and blocks of colour you’ll help guide the eye to key areas. I’d wager that lightly-coloured landing pages with one brightly coloured ‘buy now’ button will convert better than a page featuring a mess of colour. Make that button stand out! Go on, try it…
8. Be ‘web safe’. Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.
9. Clashing colours. Nobody wants to read green text on a bright red background. Avoid bad colour combinations.
10. Branding. Make sure you consider brand guidelines and use matching or complementary colours throughout your website.
11. Take extra care when using light text on dark backgrounds. Not recommended for publishers, but it works for some websites. Here, you should increase the leading, tracking and decrease the font weight. Why? Because there is greater contrast with white on black, compared to black on white. But for news sites and blogs with lots of content, this doesn’t work so well.
12. Use gradients and shadows. Ok, this is a bit Web 2.0-ish, but it works. I’ve seen websites relaunch with barely anything changed except the addition of some sexy gradients, or a drop shadow below the logo. This can add a lot of depth to a site, making it appear less 2D.
13. Consider some colour coding. I love the brashness of colour in the navigation of the new Guardian website – they have ripped up the rulebook somewhat, but then we don’t do rules, do we? The typography works, and there’s plenty of white space on these colour-coded channels. It is a stand-out example, and shows how well this can work. It’s not just about colouring up channels: note how Techcrunch authors have their comments colour-coded when replying to reader comments.
14. Try a little opacity. If you insist on using patterns, or placing text in front of images, try reducing the opacity of the background pattern (or part of the image where the text is placed) to lighten the colours. This will achieve greater contrast for the text in the foreground.
15. Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background.
16. Avoid fluorescent craziness. This is the web, dammit, not a Stabilo Boss catalogue.
17. Remember the role of images. Pictures can add a lot of colour and depth to web pages. Keep this in mind when working on the wireframes / early designs of a website, as if you’re using test content (‘Lorem Ipsum’) you won’t necessarily factor in images. Don’t overcompensate with colour at this early stage.
18. Going global? Where do your existing and prospective customers live? Which market are you targeting? There are plenty of cultural considerations to factor in when choosing colours.
19. Demographics. If your audience is elderly then some usability experts suggest that brighter colours may be a good idea. On the other hand, if your website is mainly used by children then you could introduce lighter shades and pastels.
20. Does it fit? Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site heavy on hot pink might look a little bit odd
source: http://econsultancy.com/in/blog/2654-20-colour-tips-for-website-design
No comments:
Post a Comment