Grayscale sucks: A lesson from oil painting
Design, Photoshop, User Interface, Website • Friday, April 20th, 2012 • No Comments
Lately I’ve been seeing a lot of gray interfaces in web apps. When designing an interface with depth, you need a neutral color upon which to build highlights and shadows. It seems that designers have just been defaulting to gray because it is easy and non-offensive. It isn’t risky, and everyone else is doing it! It doesn’t conflict with user generated content, such as pictures or video. It can be used in combination with with any colors that represents your company’s brand.
Mixing oil paints
When you sign up for a oil painting class, black isn’t even on the list of required paints to purchase. The first lesson is usually about mixing colors, and to get darker values, you can simply add a complimentary color. This preserves the richness and vibrancy of the light.
White is only used sparingly for specular highlights, if at all, and never for mixing. Too much give the colors a chalky look, just like black will make colors muddy.
There is always color even in the darkest black pigments. In fact try this exercise right now. Find two black objects near by and hold them next to each other. This could be a pen and your monitor bezel. If you look closely, you’ll likely see the black shifting toward red or blue color.
The temptation gradient layer styles
I’ve seen this “tip” being passed around in design circles lately for creating buttons:
Simply add a layer style with an overlay of white on top of solid color. Now you can quickly try alternate colors while preserving a gradient. While this is fine for mockups, don’t let these chalky colors get into your final designs!
A comparison
Notice how washed out the left button looks compared to the vibrancy right button. I shifted the colors in an extreme way to emphasize my point, but I hope you will be able to spot the subtle difference from now on.
There is no black or white
Light in the natural world never appears pure white and shadows never appear pure black. There is always color in the mix, because the moment light bounces off a surface, it shifts toward a color. Reflected light always makes scenes appear more realistic, and you should take it into account when designing interfaces. I could go on forever about lighting, but much has already been said on the subject.
Having an understanding of light will bring your UI designs to life. Even the slightest shift toward a color will give your interface a more distinct look and help you stand out amidst the sea of gray.
If you pick a color, you do have to stick to it though. That means all your highlights and shadows need to be influenced by that choice. This is not to say you can’t have multiple light sources, but understand what you’re getting into before embarking on a color adventure.
Question for the reader
Does anyone have examples of UI that respects reflected light?
Here’s one of the few I’ve found:
