The use of color in UX design goes beyond choosing colors that look nice together. Color is a key component of an interface, aiding in communication. It can call attention to important navigational items and signal conventions that users are familiar with. Beyond this, color helps users identify your product with your brand. And it can have a psychological impact on the perception of your product.
According to the Institute for Color Research, it takes just 90 seconds for a person to form an opinion, and 90% of the time, that opinion is influenced by colors. Here’s what you need to know about the strategic use of color in UX.
Brand Colors
Your brand colors serve as the foundation for the color template you’ll use in your product and all the marketing you create to support it. Keeping color consistent helps people recognize your brand. For example, when you see a medium shade of blue with a white bird, you think of Twitter. And when you see blue, yellow, green, and red used together with a rounded font, you recognize Google. Creating brand awareness and recognition is essential for the success of any product.
Also, you’ll want to be sure to select a color palette that’s unique from competing products so people don’t get confused. For example, if you’re using similar colors and people see your ad or social media post, they may think the ad or post is from your competitor. Gmail and Yahoo use completely different colors for their brands, so when you see the white envelope on a purple background, or the red and white envelope on the white background, there’s no confusion over which app you’re using.
Traditional Color Associations & Color Psychology
Colors influence our brains by signaling our endocrine system to release hormones responsible for moods and emotions. We may not notice this phenomenon, but we can feel the impact in our bodies’ reactions. The influence of colors on our mood and behaviors is called color psychology. While this influence isn’t dramatic, you can take advantage of even subtle effects to reinforce your message. Here are the traditional color associations.
- Red — Excitement, danger, passion, love, confidence.
- Orange — Creativity, youth, adventure, energetic, excitement, retro.
- Yellow — Happiness, cheerful, optimistic, joy, warmth.
- Green — Wealth, nature, growth, renewal, calming.
- Blue — Trust, loyalty, communication, sadness.
- Purple — Wealth, mystery, spirituality, royalty.
- Black — Luxury, sophistication, negativity, modern.
- White — Positivity, innocence, purity, positivity.
Each of these colors can be lightened or darkened to convey additional nuances. For example, if you lighten the color red to a bright pink, it will reflect modern energy, while if you darken it to burgundy, it may be viewed as more conservative and traditional.
The goal with color selection is to create a color palette that supports your brand and sets the tone you aim to achieve. It should also be consistent with the content you create. For example, if your content tone is very professional, you may want to consider deeper shades. If your tone is light, you may want to consider brighter shades.
Cultural Considerations
When you’re deciding on the branding colors, it’s important to also factor in cultural considerations since some color perceptions aren’t universal. To do this, you’ll want to consider the market for your product. For example, the Western cultural perception of white is associated with innocence and purity, but many Eastern cultures associate white with death and mourning.
Implementing the 60-30-10 Rule
To use colors strategically, your UX colors should follow the 60-30-10 rule to create visual interest and balance. A more neutral color in your palette will make up around 60%, a complementary color will comprise 30%, and an accent color will make up the remaining 10% of the design.
Color Contrast in UX
Another important factor you’ll want to consider with your color palette is contrast. Contrast will help you draw attention where you want it, and make the design easier for users to interpret. Contrast is especially important for content to ensure readability. Too little contrast or too much makes content difficult to read. Typically, you’ll use high contrast to highlight navigational elements like buttons and use medium-level contrast for content that you want users to read.
Color is a powerful tool in the UX designer’s toolbox. From aiding in navigation to influencing a user’s perceptions, color can help you communicate more effectively and make your product easier to use. Don’t overlook this essential element of UX design.
Learn how we help clients think through all aspects of building their app-focused startups through our SolutionLab workshops. Get in touch and we’ll schedule a call.
