Color is a hugely influential tool that goes across fields of psychology, customer behavior, and (of course) aesthetic. Before choosing a color scheme for your web interface, you should keep in mind these three sections:
- Customers perception of color
- Your brand identity
- How you use it (relevance, layout, articulation)
Customers perception of color
Color psychology is something that every business owner or designer should consider before starting a project. Our brain gets signals from the environment that links facts together to define the meaning of things on the subconscious level. It is extremely hard (almost impossible) to change the stereotypes, but what we can do — is to use them in our favor. Stereotypes depend on several factors, such as:
- Culture, etc.
For example, yellow color in North America means joy, warmth, and happiness, while in c America and Egypt, it is often a symbol of sorrow. There are many cases (fuck ups in some way) when the different perception of colors within cultures has failed the whole strategy.
For example, the Japanese scooter brand released black vehicles on the Indian market, and the sales very drastically low. They’ve done the research and found out that black color has a different connotation in India. It is strongly associated with death. They’ve changed the color and sales went up.
So, the main conclusions from this section are:
- Always know your customer and his or her background (We in gde.design never start designing without setting a clear business vision)
- Not only each color has its connotation, but each color has its meaning in every culture. Here’s the list of color meanings in different countries
Your brand identity
First, you make your strategy, and then your strategy will create your business. What is your brand color? Does it have the right associations that reinforce your marketing?
To understand how your brand color affects customer perception, let’s look at McDonald’s case. A few years ago, they started to change their restaurants` color from red/yellow to green/white. Red color means anxiety, speed, danger, and they wanted to build their communication from the perspective of health as an ecologically friendly company. It’s a great example of how the changes in business strategy influence the color choice.
So after defining your brand color, you should know how to use it right in your design communication to get benefits.
How to use it
In UI/UX design, there are some rules you shouldn’t break, because it might confuse your customer. In this area, it is better to trust the professionals. For example, if your primary CTA (call-to-action) color is red, how would you display error states? Clearly indicate positive and negative feedback for your users.
This does not mean that you cannot use red for CTA. In this case, your designer should choose a separate red color for errors — “red warning”.
The main thing to remember is that the traffic light in all countries has the same appearance.
The 60–30–10 rule
This rule is a handy tool for design in lots of fields and especially in UX. While making a new color palette, you should dedicate 60% of space to one color (usually neutral), 30% to the complementary, and 10% to the accent color.
Look at this example from our portfolio:
This rule underlies the construction of the interface in the guidelines of the Material Design.
This rule works not only in the interface. It arose as a universal law of the harmonious distribution of color in a composition. You can find this harmony in the interior, architecture, and photography.
We’ve already defined the importance of color choice for your brand strategy. But don’t underestimate the articulation of tones. Remember that sometimes the contrast and the color combination may better deliver your idea than the color itself.
Do not forget about two rules:
- The same color scheme can be used in entirely different ways.
- You cannot change one color in a harmonious pattern. This will entail a change in the entire palette.
We hope that this colorful journey was fun and useful.