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:

UI-Lava-Set

I had the opportunity recently to redesign/rebrand a mac app called SourceTree. I started with a new dock icon and let the influence grow from there into a new landing page. Check out the live site!

I’m on dribbble! Check me out.

I recently started my new job with Atlassian, in San Francisco. My wife and I and the two dogs packed up and moved from Oregon and we are loving it so far. The winter is mild, the tech industry is booming and the food is amazing.

I’m the UX lead for Bitbucket, and I can’t wait to give the UX and Design an overhaul. Lots of fun in 2012!

I just got done working on a project with a great new client. The people at mac tonic wanted a fresh new site with a polished design for the new school year. They already had an established brand, but their dated website didn’t reflect the high standards of design emphasized in their store front. The end product shows their love of the local community and macs. I learned some fun new tricks about mobile safari along the way.

Go check out my portfolio for highlights.