Design Basics: Contrast To Stand Apart And Call Attention

Last week our discussion revolved around repetition as a basic design principle. We saw how adding repetitive elements highlights similarity and how repetition begins to create themes within your design. Today we talk about contrast.

Contrast adds variety. It adds interest and draws the eye. Contrast helps to clearly distinguish one design element from another. Where repetition reinforces similarities, contrast accentuates differences.

Where we’ve been

Once again let’s start with a look at where we left off.

Our design elements are aligned and we’ve added some repetition through fonts, colors, and horizontal lines. By default there’s contrast. As soon as we added black text on a white page we created some. Our logo also clearly contrasts with everything else on the page.

Looking further our headings contrast with the main text. The color, font and line we used in the headings are different from the copy. Our navigational links are in blue and have lined borders to set them apart. Now let’s add some more contrast.

Contrast Through Color

Color is one of the most obvious ways to add contrast to any design. At the moment we’re using black, white, and blue. Let’s add more.

You can see I’ve changed the color of the navigation links from blue to pink. Being the only pink elements on the page the links should stand out more.

I’ve also changed the main page heading to be green, made it larger, and added italics and small caps to the font. Your main page heading is ideal for contrast. On most pages it’s the primary element (after your logo) that you want people to notice so make it different from everything else.

Adding contrast to the background

Another way you can use contrast is to make it clear that different sections of the page are different sections.

In the image above look at the links at the bottom of the page. Are they a continuation of the copy or something else?

Now look at our new image. It’s clear the links at the bottom of the page are different than the main copy. I’ve further contrasted things by changing to white text and I’ve added italics in part for contrast and in part to repeat the italics of the main page heading.

Our header now also has a contrasting background. You probably weren’t going to confuse it with the main content before, but now there’s no way you would think the two areas are the same. I’ve also added a thin border at the bottom of the header to further contrast it from the white background below.

Contrasting Navigation

Let’s continue by adding a different background to our sidebar.

As with the header and footer the contrasting background on the sidebar makes it obvious that it’s a different section of the layout. It’s clear there are now four distinct sections to the layout.

I’ve used different shades of gray for each, but even were the header, footer, and sidebar all to use the same background, you’d still be able to tell they were different from each other because of the contrasting whitespace between them.

Within the sidebar I’ve further contrasted the background behind the navigational links. You’d probably change the background when you hover over a link, and maybe even change the link color to further enhance the contrast.

Contrast in calls to action

Every web page should have a goal. There should be some action you want the visitor to take. Contrast should be used to guide them to take that action.

Here I’m pretending this page is meant to get you to buy something. Granted I’m tossing this in at the end, but I wanted to show how contrast can increase conversions.

Notice the buy now button. It stands apart from the rest of the page in it’s shape and size. I’ve also added some effects like a drop shadow and a gradient. The button also has a thin border around it and the text color contrasts with the button color

I could have used a different color, but instead decided to use the pink from our navigational links as a repetitive element to reinforce the idea that both are to be clicked.

If you apply the squint test while looking at the image above, our call-to-action button will still stand out. You’d be hard pressed to look at this page and not notice it.

Conclusion

Contrast is all about highlighting differences. We’ve used contrast here to make it clear that different page elements are in fact different from each other.

We’ve also used contrast as a design element to call attention to our primary goal for the page.

Mostly color has been used here, but there are many ways to contrast two elements

• Color
• Shape
• Size
• Font
• Texture

just to name a few. While traveling the web try to notice some of the ways various design elements contrast with each other. Also understand that the bigger you go with your contrast the better.

Two shades of blue contrast less than one blue and one red. Text set at 12px will only contrast so much with text set at 14px. The more you go with your contrast the more two elements will stand apart.

Next time we’ll look at proximity, the idea that similar elements should be grouped together and separated from other groups of similar elements.

Posts in this series

• Introduction
• Alignment
• Repetition
• Contrast
• Proximity

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.