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.
This magazine cover for Proximity uses an interesting contrasty image of tiny white boats floating on a deep blue-green sea.
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.
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.
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.
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.
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?
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Designing UX: Prototyping
Researching UX: Analytics
Designing UX: Forms
- 1 Achieving Modular Architecture with Forwarding Decorators
- 2 Cleaning up Code: Is Refactoring for Aesthetics worth It?
- 3 Type Nugget: Good Typography is About Finding the Right Playground
- 4 Unconventional UX Wisdom for Stressed Out Entrepreneurs
- 5 Using White Space: How Emptiness Can Give So Much to Design