Principles Of Design: Contrast

So far in this series, we’ve already looked at how you can improve your design work by applying the principles of Balance and Proximity. Today we’re continuing with the concept of Contrast.

Contrast occurs when two elements on a page are different. For example, it could be different colors between the text and the background color. It could be a heading set in a big, bold, grungy font combined with a sans-serif font (read more about contrast and conflict in typography) for the body text. It could be a difference between a large graphic and a small graphic or it could be a rough texture combined with a smooth texture. Our eyes like contrast.

The important thing about contrast is that the elements should be completely different. Not just a little bit different.


1. Contrast is attractive to the eye

One of the main reasons to use contrast in your designs, whether for print or web, is to grab attention.

The Carsonified site uses contrast to make an impact. The site has large bold text and images, as well as a reversed out, high contrast color scheme.

Carsonified

This magazine cover for Proximity uses an interesting contrasty image of tiny white boats floating on a deep blue-green sea.

michaelfreimuth23
Image Credit: Graphic Exchange

 

2. Contrast aids organization of information

Not only is a page more attractive when contrast is used, but the purpose and organization of the document are much clearer. In the magazine spread below, Studio8 have used Contrast, Balance and Proximity laws to produce an unusual, eye-catching page with the contributors bios. Heavy black type provides a good contrast to the lighter body text.

studio804 

This spread, also by Studio8 is divided into two halves with reversed out type on the left. Each page provides information about two separate but related products. A huge ampersand joins the pages together.

Caviar

3. Contrast creates a focus

The famous adverts for the iPod expertly used contrast to focus the viewers attention on the music player. The ads featured a silhouetted character on a brightly colored background. The iPod and earphones appear in white and stand out clearly against the silhouettes and colored backgrounds.

ipod

The design for this specially commissioned wine bottle relies on the contrast of the white text and doodles against the dark red color of the wine. It works very effectively as a unique Christmas gift.

WineBottles
Image Credit: The Dieline

Things to think about when adding contrast to your designs

1. How are you creating contrast? Is it through texture, typography, color, or shape?

2. If you want to achieve contrast through typography, which fonts are you using? Are they very different, or just a little bit different? Be bold with your font choices but remember to make sure the text is legible.

3. Is contrast strengthening your design idea?

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Foundations of Photoshop.

Comments on this article are closed. Have a question about Photoshop? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • ravi_k47

    tat ipod commercial is so coool …

  • warrenscott

    Brilliant article and examples of contrast. Would love any prospective designers that are experts in contrast to submit logos for my company: http://99designs.com/contests/32898

  • dzibus87

    http://carsonified.com/ is not browser friendly… i know it doesn’t have much to do with this subject, but i think it is important to stress it out…