{"id":10311,"date":"2015-12-03T19:57:08","date_gmt":"2015-12-04T03:57:08","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10311"},"modified":"2020-04-22T06:37:39","modified_gmt":"2020-04-22T13:37:39","slug":"how-to-create-emotion-with-color-in-ux-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-create-emotion-with-color-in-ux-design\/","title":{"rendered":"How to Create Emotion With Color In UX Design"},"content":{"rendered":"

Since the Middle Ages<\/a>, scientists have documented the emotional effects of colors. It should be no surprise that different colors evoke different emotions, seeing how it has seeped into our everyday language (\u201cfeeling blue,\u201d \u201cseeing red,\u201d etc.). <\/p>\n

To master a naturally visual medium like experience design, you must also master colors. Unfortunately, not everyone has the time to dive into the technicalities of color theory or art. <\/p>\n

To get you started, we\u2019ve compiled a quick reference guide that covers the basics of each color\u2019s unique effects, and how they relate to UX design. <\/p>\n

Red<\/h2>\n

Aggression, Importance, Passion<\/i><\/p>\n

One of the most powerful colors, attributed simultaneously with love and war, red offers the proven physiological effects of increasing blood circulation, quickening breathing, and raising metabolism<\/a>. Red elements are more noticeable, adding a sense of importance, whether good or bad. <\/p>\n

Just think of the red carpet.<\/p>\n

\"image02\"
\nSource:<\/i> Playtika<\/i><\/a><\/p>\n

Use red carefully, as a little goes a long way. It\u2019s a great highlight for individual elements that need attention, but in excess it will inhibit relaxation. Light red draws out its energy, good for themes like youth and love (see the entry for Pink below), while dark red emphasizes power and durability, like blood or bricks.<\/p>\n

Orange<\/h2>\n

Energy, Playfulness, Affordability<\/i><\/p>\n

As you might have guessed, colors vary in degrees by the placement on the spectrum, so colors like red, orange, and yellow (\u201cwarm\u201d colors) have similar effects but different levels. Orange shares red\u2019s stimulating aspects, but to a lesser degree. This gives it an energetic aura without red\u2019s aggression.<\/p>\n

\"image06\"<\/p>\n

Source:<\/i> Epic Creative Agency<\/i><\/a><\/p>\n

Orange is a playful, upbeat color, great for casual sites but not always the top choice for enterprise sites. You\u2019ll find many different interpretations of orange: some say it encourages impulsivity<\/a>, others say it increases appetite<\/a> (for culinary sites), while still others say it denotes cheapness<\/a>, for better or worse. <\/p>\n

Yellow<\/h2>\n

Friendliness, Happiness, Attention<\/i><\/p>\n

Oddly, yellow represents both happiness and anxiety, activating both in the brain. <\/p>\n

Like other warm colors it\u2019s generally energetic and upbeat, but brighter shades dial up this effect, making it a color often used for warning signs.<\/p>\n

\"image03\"<\/p>\n

Source:<\/i> Lunar Gravity
\n<\/span><\/i><\/a>
\nIf you use yellow, you can try softening its brightness for a more mellow experience. Light yellow reminds users of sun and happiness, and dark shades (like gold) are more serious and also give the impression of antiquity.<\/p>\n

Green<\/h2>\n

Growth, Nature, Success<\/i><\/p>\n

The most obvious associations with green are plants (and by extension, nature). <\/p>\n

But more than that, green bridges the gap between warm colors and cool colors (blue and purple), making it the most balanced color.<\/p>\n

\"image10\"<\/p>\n

Source:<\/i> Massis Tea<\/i><\/a><\/p>\n

Green\u2019s balance lends itself to calls-to-action, using the visibility of warm colors by the relaxing qualities of cool colors. Its nature connotations give it a sense of growth and prosperity, moreso in the Western world for its association with money.<\/p>\n

Blue<\/h2>\n

Trust, Comfort, Relaxation<\/i><\/p>\n

Without a doubt, blue is one of the most important colors in UI design, and one of the most frequent. This is partially thanks to its range, where light blue and dark blue offering different characteristics. <\/p>\n

Its associations with water gives it a calming effect, which leads to friendliness that \u201cinvites\u201d users into a site. <\/p>\n

It\u2019s no coincidence that the two biggest social media outlets Facebook<\/a> and Twitter<\/a> both use blue as their core color. This relaxing friendliness also translates into inherent trust, which is why it\u2019s often used by banks \u2014 think of the branding for CitiBank<\/a>, Chase<\/a>, and Capital One<\/a>.<\/p>\n

\"image12\"<\/p>\n

Source:<\/i> Evolve Wealth<\/i><\/a><\/p>\n

Light blue accents the friendly qualities and can even be energizing if bright enough, while dark blue is more somber, emphasizing the security and trust aspects (which is why dark blue suits are popular in the business world). <\/p>\n

While blue offers a wealth of benefits, it comes with one distinct limitation: it\u2019s a proven appetite suppressant<\/a>.<\/p>\n

Purple<\/h2>\n

Luxury, Romance, Mystery<\/i><\/p>\n

Historically linked to royalty, purple retains this air of luxury today. Purple insinuates that a product or site is high-end, even if it\u2019s not \u2014 the opposite effect of orange.<\/p>\n

\"image13\"<\/p>\n

Source:<\/i> WooView App<\/i><\/a><\/p>\n

Because purple cycles back to red on the spectrum, it shares some of red\u2019s romantic features, especially lighter shades like lavender. Deep purple, on the other hand, brings to mind mystery, and more sensual undertones. <\/p>\n

Pink<\/h2>\n

Femininity, Innocence, Youth <\/i><\/p>\n

Extending outside of the primary colors, pink is both unique and common enough to make it worth mentioning. <\/p>\n

Pink is most known for its associations with femininity, although it has strong ties to youth and the innocence that goes with it. However, lately it\u2019s being used independently of gender-targeting.<\/p>\n

\"image08\"<\/p>\n

Source:<\/i> No Divide Studio LTD<\/i><\/a><\/p>\n

Pink is often the color of sugary sweets, so the color gives an air of playfulness, almost childishness. As a shade of red, it also can be used for romantic themes, leaning towards \u201cyoung love\u201d rather than more classic romance. Pink doesn\u2019t always mean feminine. <\/p>\n

In fact, overusing pink for its \u201cfeminine qualities\u201d can easily irritates users by pandering to traditional gender roles.<\/p>\n<\/section>

Grab design ebooks created by best designers<\/h3>

All for free<\/p>