Color psychology of design:
So, let’s talk about colors!
Like fonts and illustrations, colors impart a tone and emotional balance that affects how your users perceive your brand. Color plays a vitally significant role in the world we live in. It influences everything from mood and behavior to subconscious design decision-making. After figuring out the wireframes, it’s really important to choose right color for your target audience.
To be honest, I struggled a lot with this at first. Regardless of joining bootcamps and all, I learned everything over internet. I researched about this a lot over Google. At last, whatever I got to know I share it here. It’s very important to choose the right color for your product according to the color psychology.
Color psychology is the study of how colors affect perceptions and behavior.
Let’s start!
Does age affect color preferences?
Age is an element that should be examined carefully. Your target audience’s age influences their perception of marketing materials, especially considering that color taste and preference varies based on age. Colors are desirable for different age groups. Considering the color psychology of blue and red, it is found that mature people generally favor colors of shorter wavelengths(blue, green, violet) than longer wavelengths (red, orange, yellow).
Gender difference: Men vs Women
Research on color perception indicates that men favor bright, contrasting colors, while women prefer softer shades. Men were more likely to select shades of colors as their favorites colors with black added, whereas women were more receptive to tints of colors with white added. Most women like softer tone of purple while most men repels from this and many more.
Cultural color meanings
Other than age and gender, another factor which influences color preference is our cultural background. Check out the meanings of different colors from here. It’s very important because different colors are having different meanings in different country. For example- In China and India, red is a wedding color. In South Africa, it’s one of mourning. So red is a color associated with times of great emotion across multiple cultures, although the specific life events (marriage and death) are rather different in nature. We can not say different people would gain the same emotions by just looking into the same color. In terms of religions also, white clothes in marriage signifies a bad sign of death whereas it’s preferable to wear white clothes in Christiaan marriage. So keeping in mind all these things we should choose a right color according to the target audience.
60-30-10 color theory:
The 60–30–10 rule is a theory for making color palettes that are aesthetically pleasing and acceptably balanced. This theory is mainly used in interior design but it can be used in terms of UI. It’s recommended that 60% of the UI uses the dominant color, 30% uses the secondary color and the rest of 10% uses an accent color. Just use this as a guideline.
Now, how to pick the right color palette?
First step is to pick the primary color. It is a color that is displayed most frequently across your products. I’ll recommend you to choose one to two colors which I got through my research.
Second, it’s time to choose an accent color. If you want people to pay attention to a special component then it is a great idea to use an accent color on that component.
Now you’ve got your primary as well as accent color. It’s time to choose your secondary color which will make your UI stand or complement or increase your brand awareness. The number of secondary colors I’ll recommend you is 3–5 which are pretty vibrant. The are the colors which are intentionally set to keep things fresh and interesting.
Next, you’ll need a neutral color. This is essential in every single product. If you want to pick a neutral color for your product start with the darkest tone first and slowly work your way down in terms of opacity. The lightest neutral colors will be used for divider’s border, backgrounds of the text or even for disabled buttons
Next, is to prepare a semantic color for things like your alerts, warnings or checkboxes or any banners. We usually have these 4 semantic colors:
RED: It simply signifies danger and don’t click on it unless you’re really sure.
ORANGE: It’s to warn users ‘Are you sure you wanna do this’ like that.
GREEN: It signifies successful and positive states
BLUE: It indicates a neutral information change or action. It doesn’t signifies it is negative or positive.
People are already used to these semantic colors. So, make use of these four semantic colors that people are used to. The more you know about your user’s ability to absorb your content, the more informed choices you can make about your designs.
Now, let’s talk about accessibility. We follow Web Content Accessibility Guidelines (WCAG) developed by the W3C provide a formula to calculate the amount of contrast between two colors, which results in a contrast ratio. It’s that your font size in a certain range in different screen sizes and also the contrast between text and background in terms of color must be in a ratio of at least 4.5:1. So, while designing things like buttons, cards, or navigation elements, be sure to check the contrast ratio of your color combinations. Here’s a tool which I’m using from a while to check color contrast. Another one is Adobe color. You can check out for some others over net.
Here are some more tools for generating color palette which I recommend you:
If you’re having a photo and you want to extract the colors of it you can do that on Adobe color. Go to extract them, drag or drop the photo and it will show you a list of color palette of that image. This a really a quick hack to extract the colors of an image. On Pinterest and Dribbble you can of course search for something like color palettes and it will recommend you some color palettes.
Also, don’t rely entirely just on color. Make sure to incorporate messaging or iconography that clearly states what is happening.
Wrapping up
Summarizing this article, here is a list of some useful tips to consider:
- Choose minimalistic colors.
- Choose colors wisely.
- Learn about your target audience as various factors such as age, gender and culture depends on them.
- Make the color combinations wisely.
- Design isn’t just about aesthetics. It’s about functionality and usability, and accommodating users with color blindness or color vision deficiency.
- Test, test, and test everything on your website/app. Don’t make presumptions on what works best on another website/app, because it doesn’t necessarily will work on yours.
Recommend reading
Here are some materials we could recommend for those who would like to get deeper into the topic:
And here’s is Adobe and Atlassian design color system and palette which I found to be informative:
Thank you for reading my article till end. I hope it’s somewhat helpful for others and of course I would love to hear a feedback from you!
