Contrast: Design Principle Part 4

Design Principle 4: Contrast
This article was originally written by me for Hubze, a former Social media news and tutorial source.

Hello again Hubze Nation! Today I’ve got installment number 4 of the Principles of Design, Contrast.

Contrast, like the other 3 principles, is an extremely simple concept that lends itself to an endless array of executions. The principle states that contrast is apparent when two items in a design are different from one another. Ok, actually contrast is when two items on a page are very different from each other, and there is a difference.

Contrast is what creates the visual interest on a page. Our eyes like contrast; it’s the most dramatic principle. When two items on a page are different but similar, that is a conflict. Contrast is only achieved when the two elements are very different.

Contrast creates the organizational hierarchy among different elements within a design. In other words, contrast is what guides your eye from one piece of information to the next.

Contrast in Practice

Contrast can be created in many ways…

  • Large type with small type
  • Colors
  • Graceful typeface vs bold
  • Small graphic with large graphic
  • Thin line with thick line
  • Horizontal element with vertical element
  • Smooth texture with rough texture
  • Etc

The important thing to remember is that the elements must be really different. You can’t contrast 12pt type with 14pt, or black with dark gray. As Robin Williams says throughout her design books, “don’t be a wimp!”

When a design lacks contrast…

Bad contrast on business card
Bad contrast on business card

If we examine the above image, we see that there’s not so much wrong with it, more so that there’s just not that much that’s right. The proximity is fine — relevant items are grouped together, the alignment is flush right against the edge, but there’s just no, no…contrast! The design is just a little flat and can be helped tremendously by adding this simple principle.

Guide your readers’ eyes, and don’t be a wimp

Better contrast business card
Better contrast business card

By adding contrast to the design, we not only make it stand out compared to the original but also guide the viewer’s eyes along a relative path to digest the information. Chances are my giant avatar will be the first thing to catch your eye, followed by the hubze logo, then right up to the contact info, and lastly my name and position.

To make sure this fits with the goals of the piece, let’s examine the purpose of a business card.

  1. We want it to stand out in a stack of other random cards. My cartoon avatar should do the trick there.
  2. We want people to remember our company name and what we do. The logo and tagline are large, visible, and more colorful than anything else on the page, so that takes care of that.
  3. Next, we want to guide people to my contact info. Chances are if they are looking for this card, they remember my name and want to contact me. By setting this information off from the rest of the text, and closest to the center of the card, we make sure this info is easily accesible.
  4. Finally, my name and position are set in smaller type at the top. Like I said, there’s a good chance that the reader already remembers my name, so making it extremely blatant isn’t necessary. If they need to read it, it’s easy to find right at the top without conflicting with any of the other information.

More examples

Bad: MyLikes

typeface and color conflicts prevent good contrast
Typeface and color conflicts prevent good contrast

Things I don’t like

  • The type does not contrast in color, weight, or greatly enough in size.
  • The images that could offer some contrast are too small, and seem unimportant and spread out
  • The overall color scheme is flat, due to the similar tints of gray used throughout.

Good: Vertical Response

Vertical Response website
Strong headline leads good contrast in this piece

Things I like

  • Huge, bold, contrasting headline. Even though the background shades are subtle and similar, the headline provides that instant focal point necessary to attract attention
  • Accents of bright colors help the main points “pop.” The blue, orange, purple and green go nicely together, but contrast with the white background.
  • Call-to-action button is big, bright and easy to find

Bad: Actiance

Poor contrast example
Lead capture pages are actually supposed to CAPTURE your attention

Things I don’t like

  • While the headline contrasts well enough with copy below, the call-to-action is almost completely lost at the end of the body.
  • The image to the right is (A) small, (B) not colorful, and (C) a picture of more text! This does not contrast or add to the piece at all.
  • The form blends in with the rest of the content, making it seem unimportant.
  • The footer is pretty much the most colorful thing on the page. Not usually a good sign.

Good: FluidSurveys

Great use of contrast to guide viewer through hierarchy
Great use of contrast to guide viewer through hierarchy

Things I like

  • Almost everything. Site is clear, calculated and screams of professionalism.
  • Headline stands out from background to explain their service.
  • Image contrasts with the dark background and adds color while showing off the product.
  • The form and call-to-action are elegant, colorful and positioned nicely to both complement and contrast the other main elements.

Bad: Jive

Jive
More conflicting than contrasting here

Things I don’t like

  • This design starts out alright with the contrast between the headline and body copy. Where it fails to me is in the bulleted features section. This area is jumbled and messy.
  • The background colors of the content areas are very similar. The color difference between the headline area and the body copy area are almost indistinguishable.
  • The image and caption do not really add anything to the piece. The image isn’t big or bright enough, and the caption text is in the same style as the body copy

Good: Versions

Versions
Great contrasting imagery on dark background make this very appealing

What I like

  • Main image is awesome…and very contrasting to the dark background
  • Every bit of the description contrasts nicely with the background, and important sections are bolded to further contrast with their surroundings. This makes digesting the information quick and easy.
  • The call to action buttons are well positioned and contrast with the background and each other to demonstrate their differences.

Contrast Summary

The main points of contrast are quite easy. Remember to plan out what order you’d like your viewers to see the information, make items with different form very different, and most of all, don’t be a wimp.

To finish up, we’ll end with another great quote from Robin Williams on contrast…

Contrast is kind of like matching wall paint when you need to spot paint — you can’t sort of match the color; either you match it exactly or you repaint the entire wall.

Read part 1 of the series, Introducing CRAP: the Principles of Design

Read part 2 of the series, Learning Proximity in Design

Read part 3 of the series, Learning Alignment in Design

Read part 5 of the series, Learning Repetition in Design