Shocker: Increasing the intensity of a color intensifies its visual prominence. And this can be done in a way that will works in grayscale.Profanity can be a remarkable way to get a point across. The trick is sparse use in the right situation. The same goes for color. Yes, color turns heads. Flowers figured that out hundreds of million years ago. That can be good or bad.
Color is both potent and volatile. What’s vibrant to one person may be gray to another. A certain hue can mean good luck in one culture and uh oh in another. What reads as violet on one device looks like navy blue on another. Some people really like green. Others don’t. Why? Because.
Many colors clash. Put red and magenta together and look at it for 30 seconds. I dare you. Sometimes an interface controls every pixel on the screen. But usually not. A beautiful color in isolation can look like garbage placed next to the wrong photo.
A lot about color falls under “it depends”—which makes it tricky. It’s super effective. Except when not. That a tough foundation to build from.
The folks who designed the MoMA knew what they were doing. If you haven’t been, prepare to see a lot of white walls. Those white walls are a figurative blank canvas to display art. The walls stay out of the way to let the art be art. Interfaces play the same role—a means to an end.
Think about some of the most-used software today. They’re galleries for content. Content made people who didn’t design the interface. Imagery, videos, avatars - all likely using a lot of color. Sure, there are situations where an interface needs snatch attention. That’s typically when I see color show up the most. But, there are more alternatives.
Like words. It turns out words are great at communication. Start there. Words are a gateway drug to typography. Those two, plus spacing, pacing, proportion, contrast and form do wonders. All without needing to dip into color.
An interface that relies on color to work is an interface that doesn’t work. I advise starting design in grayscale to ensure it works there first. Yes, that limits options, but there are 256 shades of gray to work with. That’s a lot. Most folks (including myself) aren’t using those 256 options to the fullest.
Every single one of us are guilty of slapping down white or black and moving on. That’s a problem because white and black are hard limits. There’s no up or down to go from there. What happens when an element needs stronger emphasis than black or white? Color is the obvious fallback.
I avoid using black for my default positive value. I pull the shade back to feel like black when set on white but still maintaining separation when paired with pure black. This gives extra room to go to 11 when needed. Color has a hard floor/ceiling like black and white. There’s no room for 11 once color intensity is maxed out. I recommend the same approach when using color.
Shocker: Increasing the intensity of a color intensifies its visual prominence. And this can be done in a way that will works in grayscale.
Errors come in all sorts of shapes, sizes and severity. Some errors are oh shucks, others are OH SHIT. Color can be a great supplement to distance shucks from SHIT.
My personal style is to remove color whenever possible. I acknowledge that I’m on the extreme end of the spectrum. No, I do not think this is appropriate for all use cases. But a little color can go a long way. Think better use of less as opposed to more on top of more. That’s a recipe for trouble.
Keeping two colors working together isn’t too tough. Keeping 144 working together is not going to be fun.
I’m partial to quantitatively dissecting design. It offers a different lens to put work through to separate the feels from the reals. I like applying budgets to design work. Not as a draconian, freedom-squelching overlord. Rather, something that keeps people aware of decisions to avoid going down a bad road. Sometimes a small nudge towards restraint can avoid big hassles.
I’ve begun to experiment with tools to color budget. These tools would track color usage on a screen and relay it’s under or over budget. But the devil is in the details. For example, gray-blue is not the same as BLUE-blue. Those two colors should have different “costs” in a budget. A lot needs to be figured out, but I’m intrigued.
Which square draws more attention? Hint: It’s not the bigger one.
This is something I want to test out on my own work to see how it changes my process, if at all. Things like spellcheck are now a given in writing tools. I want to start trying to use spellcheck-equivalents in my design process. I’m hopeful this can ensure I’m being economical in color usage.
It may seem like I have a beef with color. I guess I do to some extent. Not with color itself, but how it’s used. I think that comes down to underestimating its potency and volatility. By all means, use color. But treat it like using a four letter word in an all-hands meeting. Make it count.