Total Followers 132,503
You might not realize how important colours are in web design. If a website is green, it might as well be blue; it doesn’t matter. And while I thought this myself for a long time, I recently came to the conclusion that the color is actually going to make a huge difference and express something different to your audience. There are psychological effects behind each color and tone, therefore I decided to tell you more about them today.
Human senses get excited about lots of stuff. One of the most effective ways to excite somebody is to project a red hue color onto the walls of their room. It’s been done before by scientists and they came with a clear conclusion. A person who lives in a red room has a higher heart rate and blood pressure than a person living in a blue room. This is because red symbolizes excitement, we all know this. There is a reason why fast food companies choose red as their main or secondary color. Good examples are Coca-Cola, McDonald’s, Burger King or Pepsi (although blue is their main color).
Colors can stimulate and excite people, increase their appetite, make them feel warm or make them feel tranquil. Red simply makes you excited according to those who study chromodynamics. Coke’s website is red – it gives you a feel of a lazy, hot summer day – just when you feel the need to drink Coke.
Image Source: StockLogos
There’s more to colors in web design than just the emotional factor. People tend to gamble more under red light conditions than under blue light. This is the main reason behind cities like Las Vegas using a lot of red lights. Colors have impact on performance. Red lights make people act quicker and feel more powerful, which is not always beneficial, while blue makes people think more before acting. There is a reason STOP signs are red – you need to act right away and stop the vehicle you drive, otherwise you are in danger.
Mixing colors is beneficial if done the right way. Mixing very complementary colors is also something people do, but it should only be done occasionally. It shouldn’t be overdone because it has a bad effect on people’s eyes. You can think of a black website with pink text. Now that’s an image I would like to get out of my head as soon as possible :).
There is a very good trick behind using complementary colors together. Drawing a thin neutral white, gray or black line around the two colored shapes will make the eyes see both colors separately. Just look at the Pepsi logo below: red and blue are separated by not only a thin layer of white, but by a quite big one. This white shape blends red and blue better then if they would be placed right on top of each other.
Image source: Pepsi
Moreover, colors mean something else in different parts of the world. While red means luck in China, it means a lack of it in Germany. Huge corporations with lots of financial resources will use large amounts of money to study the effects different colors have on different cultures, before entering a new market. Many think it is impossible, but clients can be lost because of using the wrong colors.
And while huge corporations usually hire experts to do this research for them, the results are not always good. Every designer (and every person in general) has a tendency to like colors or combinations of colors and to use them in different situations because it’s what they personally like. I myself love red and black together, pretty obviously because I’ve been supporting Italian outfit A.C. Milan for almost ten years now. This is not such a good asset when working with colors is your way of earning a salary. It is crucially important for designers to tear all their personal favorites apart and only focus on the clients and their needs.
Picking a color for a website means much more then picking your favorite color and turning it into a layout. It means picking the right color in order to get the desired response from your audience. If you know your audience well and figured out which color works best for them, you are already halfway there in the creation process. It is also quite unlikely to pick a color that will fit every visitor of your website, therefore it is even more important to be able to determine which color and tone works best for most users you target.
Image source: 123RF Stock Photos
According to different sources, half of the people visiting a website don’t come back because of the color of the design. The first thing people need to recognize when they see your site are the brand colors. If you have multiple colors and they can’t see the most dominant, it means you should consider a redesign.
Image source: Website Templates Online
Using the right color in your designs is crucial and I am sure you can see why. Although it might sound wrong, by using the right color in accordance to your audience will increase the likelihood of them doing what you want them to do. But wrong or right, this is what all designers work for, sending a message to an audience and then hoping to get a response from them. If you understand how color psychology works and which color fits your audience, you are a step closer to launching a successful website.
Get The Only Freelancer crash course you will ever need to read!
Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.
Monday, July 30th, 2012 04:21
colors mean something else in different parts of the world. While red means luck in China, it means a lack of it in Germany.
Thursday, May 31st, 2012 12:56
Thanks for the tips! Does this clean blue on white appeal?
http://www.consciouswater.ca/alkaline-water-benefits/
Feeling it?
Thursday, May 31st, 2012 13:48
Scott, hm, looks good! :) Not digging in navigation, but top image is really neat!
Thursday, May 31st, 2012 17:16
You can start here, will get you a lot of good ideas – http://patterntap.com/search/navigation
Wednesday, August 1st, 2012 12:20
Do not like the sharp edges of the glass pic … Photoshop it. Let if gradually merge into d white.
Monday, May 28th, 2012 11:10
Great tips! Would also like to see an “Add to LinkedIn button on your posts”.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Michael
Monday, May 14th, 2012 10:26
Nothing is worse that trying to come up with a color scheme…
Jason
Monday, May 28th, 2012 11:10
Great tips! Would also like to see an “Add to LinkedIn button on your posts”.
Dainis Graveris
Thursday, May 31st, 2012 06:00
Jason, we have LinkedIn button now :)
Ed Huang
Wednesday, May 16th, 2012 06:56
Great article information regarding how to choose the color on website. Like the most web 2.0 sites, the designer is improving on the colors thats more user-friendly
Dainis Graveris
Wednesday, May 16th, 2012 09:49
Glad you enjoyed it, Ed! Yes, choosing right colors for your website to deliver right message is crucial.
Bojan Živković
Sunday, May 27th, 2012 00:12
Not only for web site I would like to add, generally colors play an important role in any design
takid
Wednesday, May 16th, 2012 04:07
Great post,m having problem also on choosing the perfect combination for my cellphone and computer repair website.maybe u got one or two suggestions.