The Power of Contrast in Design - Techniques and Examples

1. Chapter 3 Contrast…

2. Objectives • Appreciate the importance of the principle of contrast. • Understand the effect of contrast in a design. • Learn key contrast techniques.

3. What is Contrast? Why Use Contrast? (1 of 2) • Contrast occurs when two or more visual elements on a page look dramatically different from one another. • The principle of contrast is an easy and effective way to draw attention to a page. • Applying contrast techniques to a page visually enhances it.

4. Why Use Contrast? (2 of 2) • Contrast combined with emphasis and alignment organizes and cleans up a page. • The page on the left lacks contrast. • Contrast is added to the page on the right by changing some of the squares to circles.

5. Contrast Techniques (1 of 4) • Some ways to achieve strong contrast include placing: - Small elements with big elements - Warm colors with cool colors - Decorative type with sans serif type - Thin with thick elements - Solid areas with textured elements

6. Contrast Techniques (2 of 4)• This contrast example uses small type with a large initial letter, warm vs. cool colors, and decorative type with a sans serif type. Contrast Techniques (3 of 4) • Thin letterforms contrast with thick letterforms. Contrast Techniques (4 of 4)• Texture placed next to solid letterforms adds visual interest.

7. Contrast Example (1 of 3) • The copy for this flyer design lacks both emphasis and contrast.

8. Contrast Example (2 of 3) • Applying the principle of emphasis to the copy makes it much easier to pick out the important information, but the page still is boring.

9. Contrast Example (3 of 3) • Pages often benefit from strong contrast. - This page contrasts big type with small type, big image with small image, playful typeface with a sans serif typeface - Use of emphasis and contrast organizes the page.

10. Nameplate – the area, usually at the top of the front page of a newsletter, which contains the newsletter’s name in decorative type An ordinary nameplate design from a newsletter that uses one typeface Contrast Techniques Used: big type against small type; serif type against nonserif type, ALL CAPS, gray type against white type

12. Chapter Summary • Don’t be afraid of contrast • Using strong contrast draws attention to a page and organizes it. • Designs with little contrast lack variety and are often visually boring.

13. organization nameplate contrastcolor size • Pages where everything is the same size, typeface, and color lack ___________, and look bland and boring. • Adding contrast to a page can dramatically improve the ___________ of the page. • A newsletter’s ____________ design contains the newsletter’s name in decorative type and is usually placed at the top or run along the side of the front page. • You can use different types of contrast: texture contrast, _______ contrast, ________ contrast, weight contrast, and even typeface contrast to improve your pages.

14. EXERCISE #1 Redesign the list on the right using the principle of contrast. Improve the organization of this list by applying the principle of contrast to the subheads. • Make some of the type bigger. • Make some of the type bolder. • Draw rule lines under category head type. • Add color. • Place some type in boxes.