Color Psychology in Web Design – Big Websites Case Studies

I think it’s no secret that colors have the ability of influencing people through psychological changes and that they are highly associated by viewers with certain emotions and meanings. Wherever we look, we see colors! But in this busy everyday life, he hardly stop to analyze the purpose of that color – we take it as it is, but we unconsciously associate it with an emotion.

ADVERTISMENT:
The Best Deals For Digital Design Assets - InkyDeals.com. Learn More>>

Today we will talk about the use of colors in website designs. When we say web design, we are thinking of backgrounds, navigation, logos, buttons and all the graphics the visitors encounter at their first glimpse on a website page.

Usually, the purpose of a website is to sell something, to get the visitor interested, to satisfy his information need and to make him come back. When you’re on the Internet, you don’t get to be face to face with your buyer or your visitor, so you don’t have the chance to apply the strategy of face to face selling. The Internet is a visual and psychological medium, so you have to transmit the information differently. The copy of the website has by far the biggest psychological impact on the visitor so it becomes the most important communication tool for you.

As you may have expected, the primary color in the Coca Cola website design is red, the background is light gray and white which it gives it a better visibility and contrast. Red is color associated with the feelings of excitement and energy and the “happiness promotion” goes hand in hand with this color.

Choosing the right colors is a very important aspect when creating a website, because the colors and the graphics are the first thing your visitor sees. Meaning, the background color, the color of the header, the color of the text, the headlines – all have a psychological impact on the website’s visitor.

The IBM website has a very professional color scheme which includes colors like blue, gray and white. The cool colors give the website a serious, business aspect, creating an impression of  seriousness and professionalism.

Needless to say that any designer should know quite a bit about the psychology of colors and the way a color or a certain combination of colors instinctively influences the visitor’s first impression.

You will find on the web all sort of lists with universal color associations, but that doesn’t mean that there can’t be any exceptions – you will also find personal color schemes, as well as color associations with obvious cultural influences. In that regard, the first question you need to answer when you are choosing a color is “What is my target audience?”. If the answer is your target audience is international, the following step is to turn to universal color associations.

The reason I’m saying this, is that some cultures have different symbolism and association of colors and you have to consider this aspect when creating a website design for a specific audience. For example, many Russian people may still have a negative association with the color red, as a symbol of Communism; white portrays purity in Western culture, but it’s a symbol of death in some Eastern cultures; yellow signifies sadness in Greece, jealousy in France but is sacred to the Chinese.

McDonalds is widely recognized by the colors red and yellow in its logo. The website also keeps these colors, the predominant color in the MC website design being red, a color that suggests excitement and is commonly used in the fast food industry as it makes the people eat faster. To give it a serious, formal note, we will also find in the color scheme some black, light gray and white.

You may already know that all the colors are divided into two basic categories or groups: the colors in the red area of the color spectrum are also known as warm colors (such as red, orange and yellow) and the colors you find in the blue area are also known as cool colors (such as blue, purple and green). While the warm colors evoke emotions which range from warmth, comfort and coziness to aggression and anger, the cool colors describe feelings from calmness and tranquility to sadness and indifference.

“Colors are seen as warm or cool mainly because of long-held (and often universal) associations. Yellow, orange and red are associated with the heat of sun and fire; blue, green and violet with the coolness of leaves, sea and the sky. Warm colors seem closer to the viewer than cool colors, but vivid cool colors can overwhelm light and subtle warm colors. Using warm colors for foreground and cool colors for background enhances the perception of depth.”
Source: Pantone, Inc.

Type of psychological emotions each color invokes:

Red is mostly associated with love, passion, excitement, danger, action, warning, adventure, desire, impulse, heat, fire, stop, anger and intensity.

Orange is most commonly associated with comfort, warmth, creativity, fun, youth, enthusiasm, celebration and in website designs, this color is also associated with affordability.

The color scheme on the Orange website includes orange (obviously), gray and white. The orange present in the logo of the company is also present in some elements of the page, giving it a creative and energy feel, while the gray gives it a more serious and professional note.

Yellow it’s an attention grabber, it suggests warmth and it’s associated with liveliness, energy, curiosity, joy, playfulness, optimism, sunlight, gold, idealism, but it can also create feelings of frustration, anger and illness. It’s a fatiguing color to the eye, that’s why you will never see a bright yellow website – but it’s a great color for important details or call to actions.

Green is most often associated with nature, health, life, harmony, tranquility, good luck, money, optimism, durability, freshness.  It’s also a symbol of fertility, jealousy and it has a calming effect and it relieves stress.

The color scheme in the Animal Planet website design includes colors such as green, black, gray and white. While white and green are two colors included in the logo, the black and the grays have the purpose of giving the website a serious, professional look.

Blue is the color preferred by most people, especially by men. It is associated with calmness, serenity, peacefulness, security, stability, honor, trust, professionalism, success, seriousness and power.

Purple has been traditionally associated with power, royalty, nobility, wealth, luxury, wisdom, spirituality, magic, mystery, dreams, fantasy as well as with ambiguity and uncertainty.

Pink is usually associated with tenderness, romance, love, youth, innocence, softness and it’s known to have a calming effect. The effects of this color may vary depending on the intensity of the color (strong, light, deep etc.)

Now tell me if you’ve ever seen a website more pink than this one! If you did, I will eat my keyboard! Pink is a color mostly associated with young girls, youth, innocence, romance – in all, it’s a girlish color! For as long as I can remember, when I thought of Barbie I saw pink before my eyes, so for me, Barbie invented pink!

Brown is a natural color, which is associated with relaxation, endurance, reliability, confidence, warmth, comfort, security and it’s considered to be conventional and sometimes sophisticated.

Grey is mostly associated with neutrality, indifference and it leaves the impression of seriousness and conservatism.

White is commonly associated with purity and innocence. It’s also associated with cleanliness, simplicity and newness.

Black is considered, especially in the design industry, a stylish and elegant color. It is also associated with sophistication, strength, mystery, depth, gloom, death, unhappiness, evil and sexuality.

So after you decide on the ambiance you want to achieve for your website, you have to choose the best colors to portray it. For beginners, it’s best that you stick to simple schemes. Choose the easiest color combination and limit your color scheme to a variation of one, two or at most three colors. If you don’t have a good background in web design, it’s really a difficult task to create a gorgeous website by employing a larger number of colors than that. You will risk to make your website design look amateurish, chaotic and disjointed.

Well guys, this is no simple color scheme website design, that’s for sure! This is a vertical scroll (a long scroll if I might say) website, with pages uniting to one another, each page being in a different color, obviously. This is a vividly colored design, which gives you a sense of joy and playfulness.

As a general rule, every color that you use in the design of your web page should usually appear in more than one place on that page. Some designers even extract one color from the logo and uses it in navigational graphics, text links and another color from the logo to use for background, headers, dividing rules and so on. It’s known that repetition of the color is a sure way to unify a web page.

Guardian.co.uk

Remember what I told you about simple color schemes? About sticking to only a few colors? Well, this is a website that bends all the rules! It has a different color scheme on each one of its categories and when you switch the page, even the color of the logo changes to match the category’s color scheme. See how News are red, Business is blue, Life&Style is brown, Travel is blue, Environment is green. The homepage’s predominant color is blue, making the site look serious, professional – newsworthy.

You will see that most websites repeat the same colors throughout the entire website for visual consistency. Most of you may consider this repetition boring, but it actually has the purpose of reassuring the visitors that they are still in the same website as the home page.

Nevertheless, whether you use a simple scheme or a multitude of colors, remember that the different color should have a close value and saturation, they should express the same mood and they should appear to be a part of a unified color scheme.

Let’s try now to make a quick analyze on some more websites of widely known companies and let’s see if they took into account color psychology in their web design, how they implemented color techniques and what message they are trying to send.

Pepsi

The Pepsi website is overwhelmingly blue. The Pepsi logo contains the colors red, white and blue which we can find in the header, the side bar and the other elements of the website. The background of the website is another variation of blue, with bubbles coming from below, making it look like sparkling water. The brand is trying to position itself as a refreshing drink, trying to associate that with the colors used in the website design. Moreover, blue is the statement color, known world wide and associated with Pepsi, so it seems only natural that this would be the main color of the website.

Carlsberg

I just love that slogan: “Carlsberg, probably the best beer in the world”. Well, the website of probably the best beer in the world has to live up to its name. This is a website destined for adults, the color scheme includes black – a strong, yet stylish color, green – used to relief stress, also suggesting freshness, nature and love for life and white, to create a beautiful contrast with the dark colors. But as we move on to the other pages of the website, we are welcomed with clean white, gray and a touch of green (to match the logo), giving us a feeling of a clean and relaxing experience.

NBA

As you can see, the colors blue, red and white present in the NBA logo are also present in other elements of the page. Blue is known to be a color widely preferred by men and it suggest success and power, while red is associated with action, passion and excitement. Being a sports website, you can see a lot of information displayed on the page, making it somewhat difficult to concentrate on one thing. I find surprising the wooden background on this type of website, because wood is normally associated with comfort, relaxation, but what can I say, it looks great!

Nike

The color scheme in the Nike website includes green, white and orange. Green is a great color, highly associated with nature, health (including sports) and life. Orange is a color associated with energy, fun, enthusiasm – all in a great relationship with sports and, implicitly, the products the site is presenting.

Ikea

The Ikea website gives me a sense of warmth and familiarity, pretty much as the actual place does. The header of its website is designed with yellow as the predominant color, making it an attention grabber and suggesting playfulness and energy. The copy is colored in blue, which we can also find in the header, giving a sense of calmness and stability. The background of the website is white and pretty simple, as the body of the site, making it easy to access the information.

Nivea

Now this is a brand with history. Meaning it celebrates success, professionalism and trust. The representative colors of the Nivea brand are blue and white, which we can also find in its website design. Blue is a color preferred both by men and women, and it is associated with calmness, security, professionalism and trust. White is a symbol of clean and pure. Nivea states by the colors of its design that it is a trust worthy brand with great skincare products for every day life.

Sony

The thing about the Sony website is that it makes me feel like it’s something out of the box. I see a lot of black, shades of gray, which give me the feeling of depth, sophistication, style and professionalism. And there’s that blue on the text, that’s really something creative, because they could of had it white, like the logo, for example – it really stands out and gives a plus of professionalism to the overall design.

Nestle

Nestle is a huge company with a heavy background in the food industry. This is a company that always promoted a healthy life with its products. The Nestle website has the logo and the slogan in gray and the rest of the design in a white-gray-blue color scheme, which gives you a feeling of calmness and security and making you think that this is a serious, reliable company.

Apple

The Apple website is the most clean website design I’ve ever seen. Notice the all white background, suggesting simplicity and newness and the glossy gray header which make us associate the website with something stylish but in the same time serious and elegant. The combination of gray, white and black here is done in a magnificent way.

 

Your turn now.

Which website is your favorite and why? And by the way, what is your favorite color?

 

(Visited 21,740 time, 1 visit today)

26 Comments Color Psychology in Web Design – Big Websites Case Studies

  1. Mina Joshi May 26, 2011 at 07:08

    Came to your site via Linkedin. Wow, love this article on colour and adverts. very interesting read.

    Reply
  2. Pingback: Color Psychology in Web Design – Big Websites Case Studies | designerbooster

  3. Adham Dannaway May 26, 2011 at 16:25

    I’ve always been fascinated by colour psychology. It really does make a difference to branding. I think apple is one of the best examples of how strong branding can affect a business.

    Reply
  4. gbaniya May 27, 2011 at 08:49

    Great post. The coverage is awsome. I learnt a few tings from it.

    Thanks very much.

    Reply
  5. My Camera, My Friend May 27, 2011 at 14:19

    I love this article. Color communicates powerfully and should be considered in all forms of art.

    Reply
  6. Barbara Deer May 27, 2011 at 14:27

    SUPER article on color application and design, how it affects the mind and emotions. Great examples and descriptions here, relevant in many creative areas, including visual art. ++++++++

    Reply
  7. Web Design Sheffield May 30, 2011 at 17:23

    A great collection of web pages designed wonderfully. I like the way the colors are blended together for an excellent effect. The McDonalds for me works really well.

    Reply
  8. Photo Restoration Jun 21, 2011 at 07:15

    I think colour works wonders. I had to re-design my old black website, in exchange for orange, and many people find it much more friendly to look at.

    Reply
  9. Pingback: Web Design For Chandler's Conceal and Carry in Hastings MN | Mind Blossom Creations

  10. Pingback: 6 hand picked « Vector art, vector clipart, graphic design

  11. Pingback: E-Colors: The Subtle Way to Inspire and Convince | Dulce de Vida

  12. web design May 23, 2012 at 10:37

    Very excellent post.Really informative.Choosing the appropriate colors should be your very first worry during web design.Thanks for sharing such a good post.

    Reply
  13. Kirill Aug 13, 2012 at 05:53

    Great article. I am also still to find a good article that takes a well designed website, and does a deep break down of it analyzing what is achieved by choosing certain colors and their combinations for certain UI elements, like hierarchy of headers, call-to-actions, images. I imagine such break down can be done by taking screenshots of a website in question and stripping meaningful UI elements, and then comparing with the original. If you know some, let us know please.

    Reply
  14. Pingback: The Scan: Why your website should have lots of blue, and more travel tech news | Electronic Staff

  15. Pingback: More About Color on the Web

  16. KHALID ALHARBI Nov 8, 2012 at 06:26

    good

    Reply
  17. chose a pair Dec 18, 2012 at 15:43

    Great blog right here! Also your website quite a bit up very fast!
    What web host are you the usage of? Can I get your associate hyperlink
    on your host? I desire my website loaded up as quickly as yours lol

    Reply
  18. Mary Pellicci Hamilton Jan 28, 2013 at 05:07

    Interesting piece, from the perspective of both an art therapist and novice business web designer. Thank you!
    Mary Pellicci Hamilton.

    Reply
  19. Pingback: Web Design For Chandler's Conceal and Carry in Hastings MN

  20. Bonita Vos Apr 4, 2013 at 11:01

    I love lime green! But I also quite like a neutral colour combined with smaller splashes of bright colour – specifically black as the main colour used in conjunction with bits of bright green, bright purple and yellow.

    Reply
  21. metaslim Jul 27, 2013 at 00:23

    it is my fevourit website i like it very much i spend many time here

    Reply
  22. girls air max Aug 5, 2013 at 09:41

    Jeder, der frher hat moobs, wird auf jeden Fall fr die noch noch einmal bestimmte in Ihrem Nike Air Classic BW.
    Die Haltbarkeit der Sohle ist genial, aber wenn Sie eine leichte Lufer sind.
    Designed with a simple corridor. Along the way, some wonder when the Air
    Jordan XIII” Playoffs. 2 Nike Lunar Glide In terms of Nike solde nike air max 95 Grey/Blue Available In Dr Jays Stores$139. Unlike any cost-effective or technological development the dimensions forsneaker simply are seen changing a lot.

    Reply
  23. Pingback: Sandalfoot Marketing | What Makes a Good Website? - Sandalfoot Marketing

  24. Pingback: How to avoid common web design mistakes and ensure that your next web project is a success | Splashworx Multimedia

  25. Pingback: Research: Colour Schemes | DESN290 – Web Design

Leave A Comment

Your email address will not be published.