Principles Of Design: Contrast

By | | Web Design Tutorials & Articles

3

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?

Written By:

Jennifer Farley

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Website - >> More Posts By Jennifer Farley

 

{ 3 comments }

dzibus87 December 8, 2009 at 3:01 am

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…

warrenscott December 3, 2009 at 10:16 pm

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

ravi_k47 December 3, 2009 at 6:54 pm

tat ipod commercial is so coool …

Comments on this entry are closed.