5 psychology principles for UI design (Part I: Color)

How can we know if a design we made is good or bad?
As UX/UI designers we aim to build interfaces and experiences that are:

• Easy to use
• Enjoyable
• Visually appealing
  

We can use psychology to understand the mind and behavior of our users and reach our goals. If we know how humans perceive the products and experiences that we are building, we can bring our designs to the next level.

In this blogpost I will talk about 5 psychology principles for UI Design. It will be divided in 2 parts:

• Part I: I will talk about Color theory.
• Part II: I will dive into other psychology principles that we can use to improve our UI Design skills.
  

🎨 Color theory

Color is one of the most important tools a designer has. According to Nielsen Norman Group, we can use it for:

• Set the brand tone
• Influence its image
• Draw user's attention
• Affect their emotions
• Increase usability
  

To get these results, we must find the right combination of colors and understand color theory.

️ What is color harmony and how we can apply it to be better UI designers

Color harmony is the practice of combining colors in an aesthetically pleasing way.

‍Shubham Kulkarni

These are some popular color schemes you must know if you are a UI designer:

1) Monochromatic:

One of the simplest schemes to get right. It only uses different tones of the same color. It can be less visually appealing, but it will always look good. This color scheme is very popular on fashion retail websites and minimalistic design.

For example:
ZARA:

Yves Saint Laurent:

‍

2) Analogous:

This scheme is very harmonious and visually pleasing. We have to choose colors next to each other in the color wheel. It has low contrast, but is richer than the monochromatic.
Some examples include:

Cheetos website:

Subway website:

‍

3) Complementary:

This color scheme provides strong contrast by using colors on opposite sides of the color wheel. Used to highlight different functions in an interface.
For example:

‍

4) Split complementary:

Using split complementary can soften the contrast of a complementary scheme.

For example:

‍

5) Triad:

The triad color scheme is formed by 3 equally spaced colors in the color wheel. It can create harmony and high contrast. A great example is Burger King's old logo:

‍

6) Tetradic:

To create a tetradic color scheme, we must use 2 sets of complementary colors. The result is very colorful and can be used for playful designs.

Figma uses this color scheme:

These are some tools you can play with to get familiar with color harmony:
Create your own color palettes:https://coolors.co/a18276-b9d2b1-dac6b5-f1d6b8-fbacbe
Check the color harmony: https://color.adobe.com/create/color-wheel

🧠 Color psychology and the effect of the main colors on our feelings.

Colors can induce feelings and emotions. A study by Jonauskaite D., Parraga C. A., Quiblier M., Mohr C. (2020), showed a high degree of similarity in color associations with specific emotions. For example, 68% of people related color red with love and 61% related yellow with joy. Brands use this to induce certain perceptions in people.
These are some common colours and how we perceive them:

Black:

We can use black to induce:

• Authority
• Elegance
• Formality
• Intelligence
• Prestige
• Sophistication

‍

White:

We can use white to induce:

• Clarity
• Simplicity
• Calmness
• Peace

‍

Red:

Red is commonly used to express:

• Passion
• Energy
• Excitement
• Power

‍

Orange:

We can use orange to express:

• Courage
• Energy
• Creativity
• Spontaneity

‍

Yellow:

Yellow is used to inspire:

• Happiness
• Optimism
• Energy
• Enthusiasm

‍

Green:

Green is usually related to:

• Hope
• Growth
• Prosperity
• Health
• Nature

‍

Blue:

Blue induces:

• Reliableness
• Rationality
• Security
• Calmness
• Loyalty

‍

Purple:

Purple is used to express:

• Wisdom
• Creativity
• Wealth
• Royalty

Knowing about color harmony and color psychology will help us create better designs and interfaces. We will be able to induce emotions and feelings, draw our user's attention and improve usability.

In Part II, I will dive into psychology principles like:

• Gestalt
• Information scent
• Dual coding
• Mental models