Crafting color schemes that enhance the usability of developer products
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 Palletes
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.
Rules for managing colors 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. 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 our user interface without becoming distracting or burdensome.
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 fire 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 as secondary accents (the gray and black hues). These would primary 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.
They 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 foreground 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.
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.
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.