USA
UA
NL
We live in times when people aren’t used to immersing themselves deeply in specific subjects. This also applies to design. Today, everybody values prizes and awards at different prestigious design contests, or, at worst, they evaluate things according to personal likes/dislikes. We’ve also received international design awards from Awwwards, Behance, and other well-known “appraisers” that dictate modern trends in web design. But are they important? The answer is no. If you look at the essence of design, then, like many things in our world, it’s based on the psychology of visual perception. Psychology is the basis of any successful design. You may win first prize in a design contest, but your website will be only a beautiful image that fails to reach your goal. In this article, we’ll talk about the psychology and effectiveness of site design, specifically detailing such important aspects as color.
Color is one of the most significant tools for manipulating people on the Internet, but almost everyone underestimates its importance. We don’t notice this; color stays in the background. We assess the site as a whole. But, it’s the main color that helps transmit emotions and feelings and creates a certain atmosphere for the site. If you manipulate this tool correctly, you can both stimulate the user and motivate him/her to take action, such as buying a product and creating a peaceful and calm atmosphere on the site.
In our company, we pay a lot of attention to psychology in design and specifically to color perception. Not only does color evoke beauty, but it also changes a person’s perception and is far from the last factor in business efficiency. Few people talk about it, but it’s really pure psychology, working with a person’s consciousness and the subconscious. I don’t know why gradient buttons and block dimensions are so often discussed, or should the angles be rounded or acute while the basics of human perception are completely forgotten. Indeed, if the laws of basic perception aren’t observed, then no “fiddly bits” or “gimmicks” will help us achieve a good conversion.
In this article, I’ll tell you how to combine colors properly, why a color wheel is required, and I’ll discuss how colors affect a person’s behaviour. I’ll give examples of how color schemes work and what emotions they evoke. To cap it all, I’ll provide some useful resources that will help you work more effectively with colors.
The Color Wheel
We can discuss colors and color blending endlessly, but let’s look at the main thing and turn our attention to basic information.
There are seven basic colors in a color wheel: red, orange, yellow, green, blue, indigo and purple (rainbow colors). The rest of the colors can be obtained by blending; such colors are called complementary or secondary colors; it’s best to combine two to three primary colors and secondary shades.
The easiest way to choose a color is to look at the so-called color theory.
At this point, I’d like to note that one article won’t be enough to describe colors and their versatility. Therefore, we’ll mark out the basic concepts contained in this theory, such as:
Contrast (or complementary colors) refers to colors that are opposite each other on the color wheel. Each colour has an opposite colour that creates the strongest contrast to it. In order to find it, we need to select a colour, while the contrast will be created by the colour that’s on the opposite side of the wheel.
These colors are considered to be complementary because they will have the same impact on the website. In most cases, they’re used to draw the user’s attention to a certain element.
Example: red and green, orange and blue.
Similar colors — these colors look very good together; they complement and enhance each other, creating a feeling of peacefulness and comfort. They’re easy to find: let’s take the colour we’ve selected and look at the colour next to it on the colour wheel. It will look exactly the same.
Example: purple, blue and pink.
Warm and cool colors – delineating colors by mood and sensation.
There are colors that evoke warm and tender feelings, motivating a person to act or buy (warm colors), but there are also colors that soothe and calm people down (cool colors). We need to consider this factor when creating a website, and keep in mind what kind of reaction we’re expecting from our users.
Example:
Warm — red, yellow, orange
Cool — blue, green, violet
We’ve learnt to find complementary and similar colors, and have explained that they can be cool and warm. In this way, we can apply different colors to different websites depending on the mood we want to create.
For example, warm colors are best for New Year’s sites; they’ll create a feeling of holiday spirit, warmth and comfort, which we really need during cold winter days. An example of such a site is www.portablenorthpole.com, where the designer uses red, festive color.
Warm colors are used on websites where you need to evoke feelings of tenderness, delicacy and appetite. As an example: http://daguia.com.br — here we see a set of recipes for various sweet delights (pastries, cakes and desserts).
An example of cool colors: http://www.decibelblue.com – evoking depths of the sea and appeasement, helping users immerse themselves entirely in the website. The designer chose blue, and it was the right decision: he splendidly highlights the mirror-like surface of the water and the beautiful coral reefs in the background.
Another example of cool colors: http://thatgamecompany.com – it’s the site of a company that develops games. The website uses cool light shades, which gives it the effect of airy plunging movements as if you were in a state of weightlessness.
We’ve come to understand that colors on a website aren’t just for decoration. Still, they’re a very important element, which, in turn, may be a decisive factor in achieving success for your business.
Colour Combinations
Now let’s talk about combining colors. After all, selecting colors isn’t everything – they must harmonize with the others, creating an integral image where each color has its place and importance.
Many things will depend on the right choice of color schemes, such as the website’s level of attendance or sales. After all, users should feel comfortable and relaxed; that’s exactly what we all want to achieve.
There are plenty of ways to combine colors, but let’s look at those used most often and have become the most popular among designers.
The triadic color scheme (three colors) groups three colors within a color wheel to form a triangle. It’s a very well-balanced and reliable scheme. In terms of the number of colors on the palette, the second stimulates the user’s interest; the colors are iridescent, causing users to experience continuous bursts of emotions. An example of a website that uses this scheme: http://drewwilson.com – three main colors are used, enhancing the site’s unforgettable and interesting design.
To create a triadic color scheme, you should select three different colors situated at 120 degrees from each other.
A tetradic complementary system — the basis of the scheme lies in four colors, which form a contrasting rectangle as the colors cross each other. The palette is all the more colorful, which may help the website become a winner: it creates a feeling of joy and happiness. This color combination is rarely used, but it can be an interesting solution.
Look at the following site: http://www.enlighten-my-mind.com – the site has become lighter and livelier thanks to the different colors selected for different professions.
A sequential system — such a system combines the colors that we previously called analogous or similar. A sequential arrangement of colors makes you feel comfortable and peaceful, often missing in many projects.
Select the colors that follow each other on the color wheel to use this system.
In addition to everything else, we can learn from wildlife and nature since we’re surrounded by so many colors and shades from the first day after our birth — sunsets, flowers, forests, oceans, and deserts. If we break up the landscapes or paintings into colors that are pleasing to the eye, we’ll get shades that we’ll be able to transfer into the color scheme for our future site.
Some examples of such schemes where we see that the winter and summer forests are bathed in different colors and create completely different atmospheres:
It’s only natural colors that man most easily perceives.
So, we’ve analyzed color combinations and learned that each color system is a unique solution and should be used for a specific task. It’s equally important to consider color harmony when creating a website. A well-chosen color scheme can have an impact on the success of your site, and also increase its attractiveness among users. In the end, users should experience the top positive emotions.
In order to help you select a color scheme, many different sites offer similar functions, and here are a few:
Perceiving Color at an Emotional Level
Color plays a specific role in every culture and is perceived differently on an emotional level. But, I’d like to talk about Western culture. How does the color process affect a person’s behavior? What prompts people to make a purchase or makes them want to visit the same resource more often.
This mechanism is particularly important in e-commerce, where the highest percentage of purchases occurs at an emotional level, so the right color and user reaction can greatly influence conversion.
For example, let’s go to the product page of any popular online store. Pay attention to the colors and what really strikes your eye. These will probably include elements such as the “buy” button, a banner offering a discount or a promotional deal, or a specially marked bargain price. It’s namely these elements that will encourage users to buy something.
Let’s find out what colors we can use for these elements, having examined each of them individually:
Red has always been the color of action. This warm color always increases your heart rate; it’s associated with love, desire, and gambling. This color evokes a sense of power and importance. A red button will always draw the user’s attention.
Let’s take a look at youtube10.with google.com, where the game style is used, and red truly highlights all the accents:
Orange — this color should be used in projects where you want to evoke feelings of joy or ease (it’s namely orange that evokes such associations). In addition, it creates a sense of vigorous movement and is often associated with creativity.
For example, Sticker Mule has chosen orange for its website, reflecting in the user’s subconscious that it offers fun entertainment and interesting amusement that can be purchased online.
Yellow is a very interesting color; its different shades can change a person’s emotions. Bright yellow evokes energy. Classic yellow evokes a sense of peace. Dark yellow permeates the site with wealth and creates a sense of comfort.
Lapasta Fresca has a striking website that evokes a feeling of warmth, sunny days, and comfort, while successfully promoting its product on the market:
Green reflects good health and harmony with nature. This color is often associated with money, and sometimes it may be linked to gambling or alcoholic drinks. In most cases, it’s very well suited for sites dealing with healthy food, agriculture, and medicine.
Oestervangskovbrug is a good example. Green predominates, giving the website a sense of familiarity with nature.
Blue is the color of reliability, tranquility, and appeasement, but like yellow, its impact depends on what shade is used; dark tones can even evoke feelings of sadness.
For corporate sites, it’s best to use blue. Blue is also perfect for legal sites, but in darker shades.
For example, fork-cms.com uses a marine theme, which is enhanced even more by blue. The site looks corporate and evokes a sense of purity, trust and joviality through its illustrations:
Purple is a magical and mysterious color; it has long evoked feelings of resplendence and luxury. Purple is great to use if we want to sell something expensive; it’s also pretty good for fashionable and interesting goods.
The purple color used on Digitov.com evokes feelings of something interesting and mysterious:
Black is a very strong color that captures our entire attention. It’s very important not to overdo it when using this color. If we want our site to evoke positive emotions, we shouldn’t use intense black. This color is often used as a background. For example, if we decide to advertise and sell computer games or 3D-TVs, we can use this color to give the site more depth.
Let’s take a look at blizzard.com. It seems to be immersing in itself (due to the black background), while its bright and beautiful images attract the user’s eye.
White is the complete opposite of black. Black can be completely overwhelming, but white, on the contrary, imparts feelings of ease and simplicity. White makes surrounding space look greater. White is kindness and freshness. It’s very suitable as a background for almost all types of websites.
For example, behance.net clearly shows us that white can work wonders:
Grey doesn’t create a special atmosphere and evokes emotions related to neutrality and non-participation. But, if grey colors and hues are used properly, you can add something to the site’s atmosphere so that visitors feel like they’re sitting in comfortable armchairs.
A prime example of such a site is awwwards.com. Here, the grey color doesn’t evoke a sense of indifference, but on the contrary, it is supplemented with vivid images of beautiful works, adding a sense of beauty and comfort:
Brown is usually associated with the Earth. It inspires confidence, stability, and comfort. Sometimes, when combined with a gold shade, it can evoke high prices and wealth. For example, we can use this color if we want to sell expensive whiskey or expensive watches.
Let’s take the example of romanson.com: the watch on the picture looks very expensive and of high quality; an impression of comfort and confidence was created on the site, which encourages visitors to make a purchase:
Pink is a gentle color that is more attractive to the female audience, evoking particular emotions like affection and romance. This color is very suitable for stores selling women’s clothing, flowers, and perfumes. But, some of its darker shades can be associated with such fields as unusual music, food and drinks.
A vivid example is victoriassecret.com, a manufacturer and designer of women’s lingerie. They’ve chosen a color scheme that basically focuses on pink elements:
As an option, if you need to find a color, you can use such sites as: flatuicolorpicker.com and flatuicolors.com. They’re very user-friendly, and you can study each color and copy its code.
Conclusion
In conclusion, I’d like to say that color is a tool that’s not always noticeable. Users don’t realize that the website is green or blue, but they experience certain emotions and impressions. Users will scroll down, click on the different buttons, guided by some kind of inner impression, namely the highlights that the designer has placed on the website. For example, we buy Snickers because we’re told they’re full of energy and help us recharge our batteries. This message is ingrained in our subconscious due to all the ads around us. The same with color in web design: we click on a button because there’s something in our subconscious telling us to do so. It’s not obvious or visible; it’s something that we seldom pay enough attention to. Despite everything, color is of the utmost importance in web design.
You need to think about color from the very beginning, as soon as you start creating a product (project), right when you’re ready to design the logo and the corporate identity. However, you can continue playing around and trying different options with the existing logo and colors.
