Using Color: Focusing on Emotion, Attention, and Brand

How many design decisions do we encounter daily? As a designer, I notice hundreds of decisions made by others. One of the most fascinating aspects is how designers use color to their advantage. Color evokes both an instinctual response (fire = hot) and a learned response (red = stop). Designers must consider color, as it sets the tone for nearly everything we see and experience.

Inside Out’s newest character, Anxiety. Big eyes, frazzled orange hair, big nervous smile. (Source: Pixar.com)

Pixar’s Inside Out 2 is a perfect example of how colors can be associated with emotions. Every character takes on a different hue, representing a distinct emotion inside the head of the main character, Riley. Pixar effectively showcases the artwork and decision-making process behind character creation and visual design for the film.

Everyone can create something and make color decisions in their designs. However, not everyone fully understands the thought behind these decisions or how colors are perceived by those experiencing the design.

Three factors I think everyone should consider when designing are:

1. Emotion: How do you want to make someone feel?
2. Attention: What do you want someone to do?
3. Brand: Are you correctly applying visual standards or best practices?

Emotion

Designers should understand how different colors influence emotions. When designing a new experience, ask yourself how you want to make your user feel, and craft your content to achieve that feeling. Many factors — color, contrast, font, voice, tone, imagery, whitespace, composition, and flow — affect how users feel and what actions they take. Color is often the first element someone responds to, guiding them to the desired action.

Every color decision plays a role in a brand’s experience.

Action

Every color decision influences a brand’s experience. In User Interface (UI) design, the right balance of color can clarify the desired action. A strong web page should communicate its purpose within seconds. The primary action stands out when color is used thoughtfully. Too many colors or actions can distract users from their goals.

At a glance, the use of color communicates what Apple wants you to do. “Buy” the iPhone. (Source: Apple.com)

You likely noticed the blue button immediately. However, the small blue text near the top is less noticeable, as it blends in with the page’s other elements. The blue text on black has relatively low contrast compared to the white paragraph text.

When color is not visible, Apple relies on contrast to make the “Buy” action text stand out from the paragraph text. Do they do a good job here?

While the text link is harder to notice, it does pass the test for contrast on Apple’s website.

Designers in all mediums should be aware of accessibility requirements. Everyone should be able to read your content, regardless of their ability to perceive color. Factor in contrast along with color when crafting your UI.

Did you know — around 1 in 12 men have some form of color vision deficiency? Thankfully, the WCAG guidelines help ensure that users with color and vision challenges can see and use your web designs. Crafting content for everyone positions your brand for success.

Brand

If you’re creating something new, you can choose your color palette. Alternatively, you might work for a company with established brand standards, which can limit your color choices. Misapplying color can detract from your company’s brand.

The choices may feel limited, but a strong design does not need a lot of color to be impactful. A strong brand is recognizable in an instant, and every designer’s choices with color can either detract or reinforce that brand through visual presentation.

How do you move from idea to impactful execution?

On any project, ask yourself how you want people to feel, what action you want them to take, and how your work reinforces the brand. To build team buy-in, present your design concepts by addressing these three aspects and how your work achieves the design goals.

Hopefully you found this useful and you take action to improve how you or your company use color in your design work.

✌️ & 💜