Visual Design Foundations: Color
62% judgement of any product is based on its colors alone.
Free Video Tutorial on Colors for UX Designs
Our actions and emotions are strongly influenced by colors. When the eyes focus on a color, It sends signals to our brain where the endocrine system releases hormones that alter our moods and emotions, even though we are not completely aware of this process, colors help us navigate and understand the world around us. For example, colors like orange and red are used mostly in restaurants and kitchens because they evoke appetite and dynamism.
Free & Discounted Udemy Courses — Explore Now
Creating a strong color palette for our products can change the way the consumers interact with it, which communicates a concept while still allowing the user to efficiently take actions that we want them to take. We need to be aware that visual perception is subjective for everyone, and it is important to note that due to factors such as age, culture and gender, the color effects can be different.
Colors will have a significant impact on user behaviors and emotions. Color is also one of the basic design elements which acts as a pillar of any digital product, because of which it is called as a foundation element.
Regarding product design, picking the right colors have a huge impact on the success of the product, a research from Colorcom, found that it requires just 90 seconds for the user to make a judgment on a product and 62% of that judgement is based on colors. You can find the complete research in this link.
But let’s start exploring why color has such a powerful effect? We live surrounded of colors, they are everywhere, everytime transmitting emotions and sensations, but it should be pointed out that colors rely heavily on cultural associations, you can find them around the world but different cultures have different meaning for a lot of colors So while picking colors, it is important to be aware of your users and their culture.
A good example of this cultural factor is the red color, In countries like China and Thailand, it is associated with good look and fortune, however in Russia, the Bolsheviks considered the color red to symbolize the blood of the workers, and the red flag of the Soviet Union and is one of the symbols of communism.
While colors have a strong relationship with cultural aspects, they also have a psychological side. Psychology of colors explores the implicit nature of colors, how they have an effect on human behavior, like how the taste of food can be influenced by color. Interestingly, colors have a significant effect on people’s feelings and can be easily correlated with sensations or moods. Let’s see some examples of application colors that give personality to designs.
LinkedIn uses a palette of colors in which shades of blue combined with white gives serious personality to the product, because it is more focused on professional growth and networking.
On the other hand, there are products that use multiple colors which give a friendly, diverse and playful personality. For example, google uses 4 different colors which feels comfortable, familiar and diverse to the users.
Psychology of colors is very important and useful in design in general, as they cause sensations through various mediums like branding, advertisements and digital products. Particularly in Visual Design, designers use color as a way to communicate what the product is about, as well as convey the right tone and help users to make the expected actions.
It is very crucial for designers to understand what colors mean and what reaction they evoke. As designers, we need to be mindful about our users, as the psychology may fluctuate or change for people of different age, gender and culture.
As far as visual design is concerned, Color is one of the fundamental elements of design. A palette of colors is crucial for effective communication of a unified personality of a product. Platforms such as Slack use branding colors as ui colors, which gives the whole product a personality that enhances the user’s engagement and allows them to identify the product even if the logo is not present.
Let us walk through the process to create a palette of colors for a digital product.
First of all it is important to always have a rationale for the colors that you are picking, this rationale could be taken from the moodboard or from the branding documentation, keep that documented in the way that other colleagues and stakeholders can read and understand.
1. Primary Colors
These are the most predominant colors in the palette since the essence of the product is conveyed. Picking one or two strong colors can give your application/brand an identity. This color could be used for branding, CTAs and active states.
2. Secondary Colors
Secondary colors serve as complementary colors to support the content in particular settings which do not conflict or compete with the primary colors. In most of the cases they are used for background colors, icon colors and secondary actions.
3. Accent Colors
These colors are the special colors mostly used for different states or types such as displaying cautions, success, warnings, label messages, and amount other components.
4. Typography Colors
As the name suggests, these colors are directly related to the typography. Pick typography colors which can be used to display the text in the product, like headers, bodies, actions, labels, placeholders, etc.
Color Inventory
As we learnt it is important to have a rationale for the decision while picking colors which could be documented in the colors inventory. The purpose of the color inventory is to have a single place where you, your team and different stakeholders can find all the colors of your product with the rationale and use cases. In addition the inventory helps to avoid the overuse of colors and ensures consistency. An effective palette promotes the brand and increases usability & accessibility.
To define your complementary colors (colors defined differently to the primary colors, that means secondary, accent, typography, etc ), try to keep it simple, add when it is absolutely necessary, do not add for each unique case, try to use limited colors.
For a better understanding and communication with your team, document your colors in a cohesive way, and ensure following points
- Group them by sections.
- Write a description per section.
- Name every single color
- Document HEX code and the use cases for each color
- Use platforms where you can share this document with your team easily (InVision, Zeplin, Google slides, etc)
- Keep your inventory and design updated, if there is anything that is changing in your design it should be reflected in the inventory and vice versa.
It is important to be aware of the best practices for color in visual design in order to avoid common mistakes.
1. Balance: Primary color is important but over usage of it is a common mistake. Your product should have balance and contrast in the way that you can highlight the important elements such as actions and active states and avoid in all other cases to ensure appropriate usability.
2. Shadows & Lights: Shadows are never black, and lights are never white. Use shadow wisely, don’t get too excited and over use it.
3. Color Accessibility: It is important to remember that different people perceive colors in different ways, Color blind people can’t perceive the same colors that most of the people do, this sensorial deficiency remains to people that are not able to differentiate between certain colors. Accessibility tools and color blind tools can help you to improve your palette of color, to make it accessible to everybody.
Tools like colorsafe.co help us to check if our colors are accessible in terms of WCAG standards, there are other tools such as Stark allow us to check the color on our design in the way that color blind people perceive them, in this article you can learn more about the accessibility [Link to the article].
4. Strive for Consistency: Color can be a helpful wayfinding tool for your users. It’s a good idea to use the same color for similar intents like the same color for action components like links and buttons. By doing that you help your users to recognize interactive elements.
Tips / Best Practices
- Create your palette color based on your mood board to derive and have a rationale behind it.
- Colors should pass accessibility standards.
- Take in account your users and sector remember that color is sensible to factors such as age, culture and gender.
- Avoid using the same color for different intents (e.i. Using red for error alerts and primary action)
- Don’t use different colors for each unique case.
Checklist
- Create a moodboard
- Think in emotions and sensations that you want to communicate with your design while picking colors.
- Create a color inventory, documenting names and the use cases for each color.
- Create styles for your colors with clear naming conventions that match with your inventory.
- Check whether colors used in typography pass accessibility.
- Keep your inventory up to date.
Related Topics
Quick Question
Considering various facts about colors, what all sentences from the following are correct.
- A color will always have one meaning irrespective of culture, age or gender.
- 62% of the judgement of a product is based on its colors.
- Colors have an impact on our behavior and emotions.
- Color is the least important item in design.
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
