Compelling Color

Great user experiences are born through the hard work of professionals with a variety of skills. As illustrated by the UX unicorn we've seen before, there's a lot that goes into what we call "design" or "usability".

Image of a unicorn composed of different elements of the user-experience process
The skills and responsibilities of an effective UX team. Originally published in Building an enterprise UX team by Rachel Daniel (also on LinkedIn), UX Director at MaxPoint. Used by permission.

Looking at this unicorn illustration, it may be tempting to dismiss visual design as a "nice to have" skill. After all, it's possible to make a basically functional piece of software without paying any particular attention to the visual design (just as a horse can get by without a horn). And unlike interaction design, which is possible to evaluate empirically through user studies, it can be hard to pin down exactly what makes a visual design "good". This subjectivity can be compounded by visual design’s tendency to evolve and trend over time.

Screenshots of iOS 6 and iOS 7
Observe the difference in the visual design in the icons of iOS6 (left) and iOS 7 (right). This change would appear to be driven largely by a desire to have the apps look fresh, new, and modern.

But visual design is about more than just making something pretty or trendy. Visual design includes typography, iconography, and color, all of which can contribute or detract from usability. These basic elements of visual design usually follow well-understood rules.

Two versions of the phrase visual design is key, one of which is easily legible and the other of which is not.
Typography and color selection can make or break a user’s experience.

Let's focus for now on some basic ideas around color. A consistent and tasteful palette can be a great way to make your software, website, newsletter, and print materials more usable and attractive to your users. Simply Secure worked with a professional visual designer to come up with our colors (as documented in a post about our style guide), but it's possible for even people new to design to select a set of tasteful hues. Here are some tips to get you started.

Read up on the basics

Are you confused by terms like hue, saturation, and brightness, and what bearing they have on making a color scheme attractive? Ria Carmin's developer-targeted post addresses exactly that. (See "Rule 3: Color".) She does a great job of breaking down different types of color palettes, such as those that follow a monochromatic, analogous, complementary, or triad scheme.

Screenshots of three color picker interfaces.
Traditional color pickers can be limiting, imprecise, or hard for color novices to understand.

Choose your tool carefully

When making a color palette, don't work with individual colors in isolation. Many traditional color pickers in graphics software can be limiting, imprecise, or hard to understand. Free online tools such as Adobe Color, Paletton, and Coolors can help you identify a collection of colors that work well together. To play it safe, use the default settings and carefully modify one color at a time to watch the rest of the palette adjust.

Don't go to the extreme

While it's tempting to try and send a strong message about your software by using lots of intense colors, remember that moderation can go a long way toward making your project look professional and credible. Developers in the security community seem particularly drawn toward dark shades, which can feel unapproachable to some users. Another tendency is to pick the brightest, most saturated colors available, which can also be off-putting. Finally, remember that color is often used best as a highlight, not as the main body. Whites and greys with a small, coherent selection of accent colors allow the user's eyes to quickly identify what belongs in the background and what needs their attention. For example, Simply Secure uses lots of bright colors on our webpage, but the main body of each page is a neutral white or off-white.

Has your team been struggling with color? Did you recently go through a redesign that you're proud of? We'd like to hear from you; please get in touch!

Related

Maximizing Meaning in Empty States

It can be hard to communicate about security-related features with users who aren't already security experts. From word choice to the level of detail included, it's easy to overwhelm people with information, leave them scared, or bore them to indifference. For many applications, one major challenge is finding the right place to communicate. Empty states – screens in your app where there is no actual content to display – are a great opportunity for this communication, in part because they frequently occur when the user is first starting out.

Security is a “Design in Tech” Trend

Designers are urgently needed to help build products and services people trust. Here’s how design professionals are starting to embrace security.

Creating Patterns for Decentralized Systems

Working in decentralization? Help us map out the common user patterns and challenges.