Key principles of effective graphic design
Part 4: 3 tips on using contrast
by Jamie Kiley

Back to design tips | Reprint info

IIf you have a website, it needs to grab attention. You have to catch a visitor's interest and make him or her want to delve into your site. Otherwise, the site won't do you much good, no matter how much traffic you're getting.

If visitors land on a page that is visually uninteresting, you will fail to capture their attention. If everything on your pages receives the same amount of visual importance, they are likely to be bored and unfocused.

So how do you make your site stand out visually? Employ the principle of contrast. The principle goes like this:

To create strong visual impact in your pages, make some things stand out. Big time.

Add variation by visually emphasizing differences between items. If two elements don't look the same, make them look really different. If something is important, give it extra visual weight.

Contrast works by creating sharp distinction between two items. The end result is to emphasize one item over the other, which makes that item stand out. This adds interest to your pages. It also helps organize and prioritize elements, and it focuses visitors in the specific direction you want them to go.

When you use the principle in your website, visitors are immediately drawn to the item that has the most contrast from everything else. By using contrast, you can keep your visitors from getting distracted and wandering all over the page. You'll be able to keep them tuned to the most important things.

If your pages don't use strong contrasts, they will appear dull and uninteresting. A page that doesn't have distinctions between elements lacks focus, because there is no clear place for the eye to stop. It's much harder for visitors to get excited about a page that looks boring than a page where certain elements leap out and capture interest.

How can you use contrasts? Here are a few ways:

1. Color
   
   Color is a powerful way to establish the importance of one element over another. If you need something on a page to stand out, infuse it with some vibrant color. Usually, you should make it a brighter or stronger color than everything around it. You can do this by changing the color of the text, by placing a colored background behind the element you want to emphasize, or using a brightly-colored image or button.
   
   Using contrasts in color doesn't always mean you need to use bright or "loud" colors. If the rest of your page uses subdued colors, even a gentle color contrast may be sufficient.
   
2. Size
   
   If you're going to make a contrast in size, make a serious contrast. Most people do not make size differences significant enough. Failure to make a strong distinction results in a page that looks cluttered and messy.
   
   The most common place to use size contrasts is in text. For example, when you make a heading bigger than your body copy, you've used a size contrast. However, you can also contrast size with other items. If you have a variety of pictures on a page, you can make one significantly bigger.
   
3. Direction
   
   You can create contrast by varying the direction (horizontally and vertically) of elements in a page. This contrast is more subtle and not quite as common as color and size.
   
   Contrasting direction doesn't necessarily mean to turn a word on its side so it is pointing upward. You could do that, but there are other ways that don't impede readability. You can contrast a long horizontal header that spans the page with two tall, narrower columns of pictures or copy underneath it. You can contrast a thin vertical column of text with horizontal rules (dividing lines) to separate different parts.
   
   For example, take a look at http://www.emoryadventist.org. Notice that the header at the top is wide and the four columns of text are narrow and are divided by vertical lines. The page would be much less interesting if everything on the page had a horizontal direction.

Finally, two important reminders on using contrast:

First, if you emphasize everything, nothing stands out. Be careful not to use so much contrast that your page is overpowering or cluttered. Contrast has to be used wisely in order to be effective.

Second, don't be a wimp. If your contrasts are too mundane, you'll appear dull and uninteresting. Be daring!

Back to design tips | Reprint info