Using Light, Color and Contrast Effectively in UI Design
User interface (UI) design is both an art and a science. Artistic talent comes in handy when coming up with an attractive style and aesthetic, but at the core of UI design lies logic and method.
Very basic things like light, color and contrast are often overlooked, which can negatively affect the UI by misdirecting user’s attention and not providing enough focus on the things that matter. Here’s a quick overview of how to use each of these elements effectively.
1. Light — create depth using light and shadow.
Light can be used to create depth. Lighter shades appear closer to us and darker shades further away. This isn’t strictly how light works, but since the user interface lives in a very basic environment of a computer display, there’s not a lot we have to work with.
Think of a button. When a button is pressed, most designers tend to make it darker. Why? The reason is simple — we imagine the button as a 3D object. When this object is pressed, we assume it goes further away from us. We may also assume it goes into an opening on the surface of the “device”, and thus is now covered somewhat from a light source.
Using this basic idea we can build the UI metaphor by basing it on 3D objects with depth. Color things you want to appear to be sticking out lighter. Color things that are carved inwards darker. This doesn’t apply to every aesthetic style, but generic things like OS interfaces tend to follow this principle — especially when depicting real world objects like buttons and switches.
2. Color — use heat to manage focus.
Colors don’t all behave the same way. There are those that are considered cold — blue and green shades — and there are those that are warm — red and yellow. Warmer colors expand when placed next to colder colors, they literally spill out and take dominance. Here’s an example:
Take a look at the square on the right with the blue and the yellow color segmens. The yellow is warmer and brighter and so it takes prominence on the image.
What about the red and the green? This one is trickier, but the warmer red is taking control here. The colder green contracts inwards, letting the red move forward.
This is very similar to point 1 — warmer colors are brighter. Not only that, they also appear closer to us. Use warmer colors for elements you want to pop out and get noticed. Colors like red are especially good for this purpose, and it’s no surprise that pretty much all the US presidential candidates’ websites had the donation button in bright red.
3. Contrast — attract attention with higher contrast
Higher contrast items stand out — they catch your eye. Look at the following example of a content window with some text, and a button. Here we’re using both, brightness levels and contrast, to manage the user’s attention and focus.
In the first instance, the text is on a darker background, while the button is on a lighter surface than the rest of the pane. The button has the highest contrast between its black text and the light grey surface it sits on. It’s also the lightest element on the surface — it pops out.
On the right I’ve flipped the shades. Here the text pops out because it sits on a lighter background and has a high contrast between the text and the background. The button now fades away.
Use contrast to manage user’s attention. You don’t necessarily need to make buttons lighter (that will depend on your design style and theme), but you do need to make them stand out enough so that they’re not overlooked. Decrease contrast for less important areas of your UI to make them take a back seat.
Example: The OS X interface
Let’s see a real world example of these principles from a well known usability expert — Apple. This is the interface for the OS X operating system’s control panel for the Mac:
You can see contrast and 3D metaphors at work here. Buttons are light and high contrast, while becoming darker when pressed. Certain content areas are bevelled inwards to group together various items and because they’re less hierarchically important. It looks good and it’s very usable.
Think through your UI design process logically. Are you trying to depict a real life object like a button or a switch? Use shadow and light to create depth and 3D feel appropriately.
Do you need to manage user’s focus, for example give prominence to the welcome message or a notice on your site? Color that box in a warm color like yellow. Ensure that all the important controls have enough contrast to stand out so they’re not overlooked.
I hope you found this useful — please don’t hesitate to post any thoughts or resources in the comments below.
that’s right…
shadows and lights are great…
yap, its very important for interfaces, but also to emphasize what its important and clickable :)
thanks for tis post! nicely done!
Nice article!
When I saw the first image I automatically thought of Apple haha
Well done. A lot of “web designers” simply do not understand these small, but important, details. Creating focus, hierarchies, and displaying the message with clarity are the primary aspects of good design. Not great photoshop.
The examples are perfect and you’ve brought the ideas across clearly. Well done!
Well done, great example of ideas!
Good article.
Nevertheless, I hate to disappoint you but the red and green definately do not have the same lightness. The same goes for the blue-yellow couple. The green and yellow are distinctly lighter than the red and blue, no matter which way you measure it.
Here’s a link to some excellent pages on the subject:
http://colorusage.arc.nasa.gov/
And here’s my own color blog:
http://livelygrey.com/
Thanks for the positive comments everyone, I’m happy you found this useful.
Igor — here’s how I arrived at my statement. Basically, I’ve made two blocks of grey in Photoshop, and then colorized and saturated the edges and inner squares to get the colors. If you desaturate the colors back to nothing, you get two grey squares of equal brightness (lightness?) as I’ve done here:
http://img.usabilitypost.com/0.....urated.png
(The little artefacts are from JPG compression which I originally saved the image in)
Am I using the wrong terminology here or do the saturated colors change their lightness? I’ll read up more about it, thanks for the links. Apologies if I made a mistake, it’s always nice to learn more :)
UPDATE: Alright, I’ve edited out the bit about the colors having the same lightness as it was obviously wrong as you pointed out Igor. The RGB colors didn’t work as I thought they would — converting to Lab and then desaturating gives a better indicator of which is lighter.
Anyhow! This wasn’t that important, so it’s been edited out — thanks for the pointer Igor.
Nicely done. As far as button highlights go, all people intuitively understand light-on-top as a button popped out and dark-on-top as a button depression because we are wired to see light as coming from above, or from the sun. Being 3-dimensional is one reason to do this, but its also a universally shared experience.
Really helpfull
This is a pretty insightful post. Shadows really play a more important part in UI design than light. Contrast is good for depicting distance and depth of the design.
A nice little art lesson and an enjoyable read. Thanks.
A nice pack of information. This has given my designer’s sense a new dimension for the same.
Thanks a lot buddy.
Nice article but your colored squares example is a little flawed. I took a screenshot and measured your boxes and the inner green box is much slimmer than the yellow box =/ Nice try though!
After using mac and even linux flavours, one is bound to feel bored when switching to xp, same reason because xp graphics are all in bright (blue, red, yellow).
Hey Dmitry
I am pretty sure that people with red-green colour blindness will not be able to see the red-green square which would make any component made with that colour combination useless.
http://crestthrees.freehostia.com/card4d5.html cheap air flights travel directions rova
[...] Using Light, Color and Contrast Effectively in UI Design [...]
Useful post indeed. I like the point using warmer color taking attention.
[...] الكاتب : ديميتري فاديف | المقال الأصلي [...]