Have you ever tried your hand at painting? You have, most probably, especially as a child. Some give it up as they grow up, others go on to become great painters. Whatever your achievements are as an artist, you must know that colours affect the mood of the art and those who look at it.
The same stands true for the UI design you create and the colours you put in it. Don’t worry, you don’t have to set out to research on that. Credible studies on colour psychology have been done already. You just have to take notes from it and apply the lessons learned to your app’s user interface.
What Do We Know About Colour Psychology?
Many studies and surveys have helped us to get a general idea about the effect of different colours on the human mind. While the subject remains debatable and the conclusions are not conclusive enough, marketers have observed various trends and popularity changes of colours. They have gained positive results after much trial and error, helping you hit the right spots without going through their pains. Have a look at a few of those colours and understand their role in UI design. Remember, these are not binding rules.
Black: In art, the colour black and its lighter shades in grey portray sadness and negativity. In marketing, however, modern trends have put black in a much better light. It is used to express boldness, innovation, sophistication, power, and elegance.
White: The symbol of purity and cleanliness, white has always been the colour of goodness. The same applies when it is used in designing. It evokes the emotion of modernity and progress. Brands have often used white for the background colour with black font on top of it, which is the best combination for comfortable readability.
Red: Romance on one side, anger on the other, red has been used for quite the extremes. Its versatile character enables designers to pair with other factors to reflect the emotion they want, whether it’s of warmth and intimacy or strength and vexation.
Green: Artists have used green to depict nature in their paintings, which is the most common use of this colour. The emotions associated with green are dependant on its usage. While it can signify safety and luck, it can also be used to depict jealousy and greed.
Blue: This is one of the most popularly used colours in UI designs and websites. Blue shades represent productivity, calmness, security, and stability. Tech brands, for example, use bluish hues in their websites and apps to establish trust with their clients. Facebook and Twitter are notable users of the colour blue in their brand identity.
Yellow: When you want to make viewers feel optimistic, you use yellow. This colour has found a major place with food brands. It gives off welcoming vibes, spreads happiness and can also signify energy when used appropriately.
Purple: Royalty is the identity of purple. It’s used by luxurious brands and has been a timeless symbolism for wealth. Purple can also evoke feelings of mysteriousness and suspense. Overusing it might look arrogant. Using it subtly is the best course of action.
Orange: A bright and vibrant colour that can be used in every portrayal of creativity, enthusiasm, adventure, and success. It lacks the strong character that red has but makes up for it with its brighter hue that looks less commanding and more friendly. It calls for action quite effectively and is, therefore, used by online retail stores extensively.
Pink: Brands that serve women use pink hues most of the time. Pink has been a symbol of femininity and playfulness. Combined with black as a secondary colour in the design, pink is a great way to attract the female audience.
There are other colours that can be discussed but the ones above are the most eye-catching and are great for building brand recognition. While you now know which colours you can loyally stick with, do you know which ones you might avoid? A survey has shown that brown is the most disliked colour by both men and women. Blue, on the other hand, had been voted the most loved colour in the same survey. Purple received mixed reactions, with women loving it, and men not so much.
Integrating Colour Psychology in Your User Interface
Nothing can be branded as the rule of thumb when it comes to colour psychology. There are a lot of variables to take into account – and its impossible, and wrong too, to say which colour is the best for everyone. Instead, it is better to identify what your brand represents, what your product means to you and what target audience you serve, and only then decide which colour would be the best for you. Usually, it is best to identify three colours- primary, secondary, and tertiary – for your brand. You can choose more or less, as long as it is pleasing to the eye.
After you have identified the three colours that make up your brand identity, you can move on to include them accordingly in your brand’s logo, website, and app design. Consistency and balance are important factors here. Here is how you can design a great UI with your brand’s colours and make it stand out.
- Balanced Composition: A balanced proportion of colours in your UI is the most important requirement to make it good looking. Remember the three colours you selected for your designs? Use them in a 60-30-10 percentage proportion. It brings out your brand’s colour and sets the theme for your UI design.
- Contrasting Effects: Not only do you want to make your UI look good, but you also want to make the users of the app see the important content clearly. Contrast helps you out here. The amount of contrast depends on how visually outstanding you want an element to be. High contrast is advisable for the primary buttons and content. The secondary elements can be in a lighter shade of the same colour to keep consistency and not use too many different colours.
- Harmonize: Harmony between colours can be achieved by using a colour scheme that stays consistent with the theme you are going with. Have a look at the schemes you can choose from:
- Monochromatic: Using one colour with its different shades.
- Achromatic: Using unsaturated and near-neutral colours.
- Complementary: Using colours opposite each other on the colour wheel for maximum contrast.
- Analogous: Using colours adjacent to each other on the other on the colour wheel.
- Triadic: Using three colours from the colour wheel that are at an equal distance from each other. An equilateral triangle can be used to pinpoint them.
- Tetradic: Using four colours from the colour wheel. A square or rectangle can be used to pinpoint them.
- Polychromatic: Using different and unrelated colours.
The best way to get inspiration for mixing your colours is by observing nature. The natural colours around you are what everyone is accustomed to seeing. You will realize that shadows don’t have to be black, buttons don’t need to be bordered every time, and sometimes the lack of colour looks good too!
As a UI designer, you have the massive responsibility to create apps that your clients and their customers love. With the things you have learned about the psychology of colours today, you can design an app that looks beautiful without hindering the user experience in any way. That’s the definition of a top app made by a top designer. You are one, aren’t you?
