Quick Tips from a Product Designer: Brand Colors

We often work with clients who have branding guidelines that they acquired from agencies or in-house teams. These guidelines usually focus more on marketing aspects like merchandise, online presence, and social media while overlooking user experience (UX).

When creating digital products, usability and accessibility are prioritized. Sometimes, branding guidelines don’t quite meet usability standards, requiring extra work to prioritize usability over branding. This could be avoided by considering usability needs early in the branding process.

While creating a user-friendly product requires research, knowledge, tools, and testing, there are simple tips to start the branding and UX journey effectively.

Colors

There's a vast array of colors available for digital use. It's essential to consider color combinations and their intended purposes. Users associate certain colors and symbols with specific actions or feelings, based on color psychology. For instance, red signifies passion and alertness, making it suitable for highlighting important information like errors.

When creating palettes, there is also a need for multiple neutral shades. We use those for backgrounds and UI elements. Having multiple colors to choose from ensures tighter brand control and harmony across products.

When designing branding, it's important to avoid overwhelming users with excessive use of colors. Colors like red, green, and yellow also convey messages and should be used judiciously, as these colors are also used for common UI for semantics.

Color combinations should prioritize contrast for usability. Testing color usability against background and text is crucial, with resources like the WebAIM website offering valuable insights.

Example

Let's examine a sample brand kit comprised of a logo, primary colors, and designated fonts.

We begin by evaluating the colors designated for links and buttons, which are common UI elements in most products. For this example, we’ll use magenta:

In our tests, it's evident that magenta does not contrast effectively with white but performs better with black.

However, considering the accessibility rating, it appears that small fonts may only achieve partial accessibility. In this case, we may need to explore tints of the color, which derive from the main color. They are lighter and darker shades of the same color. We’ll lean on lighter for this exercise, as the background is dark; however, if you have a light color background, it will be best to lean towards darker tones.

The additional colors are derived from the original magenta. Now, we can test those against black or white to see if we can get to a better usability rating:

Now that we’ve updated the magenta to a lighter tint, the accessibility rating on the black text increases, so this is what we would use.

In a real-life scenario, we may repeat this exercise with each color if we find it necessary, use sophisticated tools, and even test with users to land on the best option for your product.

That’s it! In summary, integrating minor UX considerations at the outset enhances the design process and minimizes the need for extensive brand adjustments and unnecessary marketing revisions.

Eloisa is a senior designer here at Echobind. If you're interested in working with us, don't hesitate to reach out at hi@echobind.com