Contrast

by Zack on May 18, 2009

contrast
disparity
variance
divergence
contradiction
incongruity
variation
polarity
antithesis
opposition
dissimilarity
distinction
differentiation

Which word did you see first? For just about everyone the answer is contrast. Let’s try another test. What is the first name you see?

mystery_man
Alice Allison
mystery_man
Bob Roberts
mystery_man
Carol Charles
mystery_man
David Davidson
mystery_man
Eddie Edwards
mystery_man
Fred Fredrickson
bigz
Zack Grossbart
mystery_man
Greg Gregary

Contrast shows the viewer what to look at or tells them that something has changed. However, with great power comes great responsibility. Just think about the terrible use of <blink> tags in early websites. They were everywhere so they stopped causing contrast and we just annoying.

Differentiation only works if something is really different. There are a few good reasons to use contrast:

Indicate change. When something is different from the last time or something changes while the user is watching use contrast to make sure they know.

Highlight data. When you need to show a lot of data but don’t care about all of it highlight what you do care about with contrast.

Change modes. Microsoft Office shows the difference between read-only mode and regular mode by changing all of the toolbar icons to gray. Modes are tricky and users always need contrast to see the differences.

There are dozens of ways to use contrast. They range from simple spacing to large graphic changes. When you want to use simple contrast here are some easy methods to start with.

Color is the easiest one to change and control. The contrast in the first example is clear because everything else is black and it is red.

Size is also pretty easy. If you didn’t see the contrast because it was red you probably saw it because it is larger than the others.

Position is a slightly more advanced method. When everything lines up the one that doesn’t really stands out.

Breaking the grid is an excellent way of showing contrast if you are using a grid.

Try to find your own methods of contrast. Showing people something new makes them more likely to look at it. Just don’t make anything blink.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: