Color Management for Better DX

Does Color Matter?

Colors + developers + UX. Does it really matter? Whether your app’s interface is blue, green, purple… whether your buttons are gradients and solids… whether you saturate or desaturate… The answer is yes, it matters, and more than you think.

Color theory is an abstract field that tries to explain the proper application of color for design. When we traditionally think of developer tools, we don’t really focus on the importance of color. We focus on the functionality: Does it work? Does it not?

Color, however, is not just an aesthetic privilege. If used correctly, it can transform a user experience and become a necessary enabler of your functionality.

Many dev tools use color as a way to express personality, but sometimes this personality becomes a distraction.

Color is an environmentally-learned affordance, where we associate hues with meanings.  While branding is definitely important for a product, your brand should not complicate the user's ability to interpret your product's functionality. 

The Not-So-Wonderful Pallets

Let’s look at this UI admin mockup:

It looks nice, right? The layout isn’t bad and it looks simple to read, but is it visually effective? The red accents may look nice, but functionally they are a distraction. Red progress bars and red buttons give me a sense of warning and danger. How will I know when something did actually go wrong? If this UI was monitoring my server performance, then what type of visual element would draw my attention if something wasn’t performant? Colors matter.

Here are some samples of not-so-wonderful color palettes:

These palettes use “loaded” colors, which become burdensome for the user to digest. We also see inharmonious color schemes, with distracting contrasts.  

Colors should be supportive and meaningful. Playfulness and personality are, of course, important, but they should not trump functional aesthetic. 

Too much playfulness is not only distracting, but it can become tiresome for the user.  Your eyes will become fatigued trying to process a plethora of different colors, their meanings, and their associated actions. 

For a harmonious and fluid developer experience (DX), it would be wise to apply some of the following rules for DX color management. 

Color Management Rules for Developer Tools

Monochromatic Is King

A monochromatic color scheme is a series of saturation permutations of a single color. In other words, pick one color and make it darker or lighter.

Let’s look at these three palettes above. What colors are these? It’s a bit hard to guess right? Steel blue? Blue-ish gray? Brown-ish beige? Light bronze? This is actually a good thing that you can’t say for certain.

These are neutral color palettes. They don’t come with much inherent bias. They are foundations where you can use secondary and tertiary colors to tell a story and communicate importance.

Use a Triadic Pallet for Personality

Here, we are using a desaturated triadic pallet, which is basically a way to use three harmonious colors that form a triangle around a color wheel.

The benefit of this is that it can introduce some personality into your user interface without becoming distracting or burdensome to the eye.

Here is an example of Atom, a developer environment. They use a triadic theme of grays and dark purple hues, which provides meaningful contrast for the foregrounding elements: text, code, tabs, and the file directory.

So, you still get the ‘feel’ of the Atom developer environment without losing the functional aesthetic of a light on dark triadic palette.

Be consistent with secondary and tertiary colors

You can think of these colors as your accents. They are ‘loaded’ colors, meaning that they will symbolize and represent a functional meaning.

In the palette above, we have two primary base colors and we still harness secondary accents (the gray and black permutations of the base colors). These would primarily be used for contextual indicators, like active tabs, foregrounded canvases, and button interactions.

The reds, blues, and yellows would be reserved for meaningful interactions. These include warnings, errors, foregrounded text, syntax highlighting, active textual directories, and navigation.

Secondary colors should be applied very lightly and only when their meaning is absolutely necessary for the functional context.

Material Shades of Gray

By now, most developers and designers are familiar with Google's material design.  Broadly speaking, clearly conveying application context is essential for a successful developer experience.

For example, let's say you are managing multiple developer environments within a single application.  Some of the environments have environment-specific actions within the broader global (account-wide) context.  

By using layered gray saturations, you can provide a visual layered perspective where the foregrounded elements receive a lighter saturation than the backgrounded layer.

You can think of this as framing the foregrounded canvas, so that it is clear to the user which actions apply to which context.

Grays become a way to express functional compartmentalization: grouping like-actions so that the context is always clear. 

Prioritize Your Functional Aesthetic Over Visual Aesthetic

When you’re building a developer UI, functionality is king. Dev tools are habitually used tools imbued with complex functionality. Often, this functionality is critical – meaning that any errors cascade into critical issues for building, deploying, and monitoring software.

In contrast, consumer applications are typically geared towards light and elegant user experiences: simple, repetitive tasks completed in short time spans. While functionality is still important, consumer app functionality is more directly expressed through visual design than it is through complexity.

On the other hand, developer tools express complexity through a functional aesthetic, meaning that they need to make hard things easy to interact with and digest.

Hence, you should use loaded colors only when it is absolutely essential for the user to carry out a particular action or to understand a current state. 

Summary

A moderately complex developer tool averages between 100 - 500 unique interactions, with larger tools averaging 1000+ interactions.  Color, therefore, becomes a way to progressively disclose this functionality, define the appropriate application contexts, and allow the developer to feel fully informed.

Feeling informed is fundamental to feeling in control.  If I can use an application, know where I am, what is important to know, and know when something is amiss, then I feel empowered.

Effective color management, therefore, is not just a way to make your application easier to use, it is a way to empower your users.