Create Emotion With Color In UX Design
by Nick Babich
Color is essential part of the visual language we use to communicate with our users. In modern world we need to communicate without words and color is a key to that.
It should be no surprise that different colors evoke different emotions. To get you started, we’ve compiled a quick reference guide that covers the basics of each color’s unique effects, and how they relate to UX design.
Red
Danger, Importance, Passion
One of the most powerful colors, attributed simultaneously with love and war. The common saying, “to see red” highlights its connection with anger.
Red elements are more noticeable, adding a sense of importance. Light red tones are good for topics like youth and love, while dark red emphasizes power and durability.
Red can be used as a warning color, as in traffic lights and signs, a reference that has been taken from nature, where red is used as a deterrent to predators. Red is a great color for highlighting individual elements that need attention.
Last but not least, red is associated with heat.
Orange
Confidence, Energy, Optimism
Orange shares red’s stimulating aspects, but to a lesser degree. This gives it an energetic aura without red’s aggression. Orange can be associated with health, such as vitamin C, which is commonly found in oranges.
Orange is a playful, upbeat color, great for casual sites. Some researches show that it denotes cheapness, for better or worse. Hipmunk uses orange cheap property in a good way:
Yellow
Attention, Happiness
Oddly, yellow represents both happiness and anxiety. It’s generally energetic and upbeat. Yellow is often used for warning signs.
When combined with black, it can gain a lot of attention. A good example outside of design would be a taxi. The combination gets a lot of attention.
If you use yellow use following simple rule — light yellow reminds users of sun and happiness, and dark shades (like gold) are more serious and also give the impression of antiquity.
Green
Growth, Nature, Success
The most obvious associations with green are plants (and by extension, nature). Since most plants are green, it is also associated with growth and health.
When you introduce green to your color scheme, pay attention on the color saturation.
Saturated green colors are exciting and dynamic to the eyes. They grab a lot of attention. This is why they work good for call-to-action buttons.
Blue
Trust, Comfort, Relaxation
Blue is one of the most important colors in UI design, and one of the most frequent. Depending on the tint and shade of blue, it can represent different feelings, thoughts, and emotions. Dark shades of blue can give a sense of sadness. An expression that goes along with this is “feeling blue.”
Light blue is the color of the sky and of water, which can be refreshing and calm.
It’s no coincidence that the two biggest social media services Facebook and Twitter both use blue as their core color.
Purple
Luxury, Romance, Creativity
Historically linked to royalty, purple retains this air of luxury today. Purple insinuates that a product is high-end.
Because purple cycles back to red on the spectrum, it shares some of red’s passion features but without red’s aggression. From the visual design perspective, its recommended to try lighter shades of purple (like lavender) to create positive atmosphere.
Pink
Femininity, Innocence, Youth
Pink is often used to create an an atmosphere of joy and playfulness. When you want to delight users with nice visual effect, try to use a bit of pink color.
Many people think pink as feminine color. However, it doesn’t always mean feminine. In fact, overusing pink for its “feminine qualities” can easily irritates users by pandering to traditional gender roles.
Brown
Conservatism, Earth, Stability
London gentlemen don’t “wear brown in town”. Same way brown doesn’t work for most sites, but for the ones it does work with, it works perfectly. It generates a bit old-fashioned feel—the connotations with wood suggest stability and reliability. And this property can be perfect for organic products.
In general, desaturated brown color is good for menus, panels and backgrounds.
Black
Formality, Power, Sophistication
Black is the strongest of all colors, it attracts attention faster than other colors, even red— that’s why it’s recommended to use black only for text and accents. When used as a main component in a color scheme, such as a background, black creates its own emotional ties like any color.
Combined with silver or grey, it can represent sophistication, such as in example below.
White
Freshness, Sterility, Health
Like its opposite black, white accents other colors around it, making it a popular choice for a secondary color.
When white is the dominant color, its sterility can be overwhelming. Your users might feel like the layout is missing something. It’s possible to beat this feeling by using ivory and cream color combinations. Try to use shades to make white color elements look decent.
Grey
Formality, Neutrality, Sophistication
Gray represents neutrality. By altering its shade, gray can take on the characteristics of either black or white.
When used as a primary color, gray gives the impression of formality, but it doesn’t always mean bad thing. Dropbox use grey to highlight CTA buttons Sign up for free and users able to find the right button really fast.
You can use content and accompanying images to create a strong focus on a particular element.
Light grey color also works best for the buttons in disabled (inactive) state
Conclusion
We’ve covered traditional color associations and these factors are a great place to start when you’re creating a new design. But ultimately, the right design decision is the one that your users think is right. There is no universal best color—what works for one site or app, doesn’t necessarily work for another. That’s why it’s so important to get feedback from your target audience early in the design process by testing your color schemes with your users.
Originally published at babich.biz
