Introduction to Basic Design Principles

1. Introduction to Basic Design Principles Design for Journalists Spring 2013

2. The CRAP Model • Contrast • Repetition • Alignment • Proximity “…the basic principles of design that appear in every well-designed piece of work.” -Robin Williams, The Non-Designers Design Book

3. CRAP: Contrast explained • Elements that are not alike, should be very different. • Why? Because… • Contrast makes elements pop, places an emphasis on what’s most important, attracting attention to the piece and those elements specifically. • Contrast createsa focus, an entry point for the audience, so they know where to begin. • Contrast establishes a visual hierarchy, showing the audience in what order the information should be taken in.

4. CRAP: How we apply contrast • Type • Large type with small type (headline vs. body type) • Bold text with Roman (plain) text (headline vs. subhead) • All caps with lowercase (dateline vs. body type) • Color • Dark colors with light colors (dark/light background vs. light/dark type) • Bright colors with dull colors (bright photo with dull caption box) • Element Size • Large photos/graphics with small photos/graphics • Big boxes with small boxes (main story vs. sidebar)

5. Contrast: Newspaper design

6. Contrast: Magazine design

7. Contrast: Website design

8. CRAP: Repetition explained • Elements that are the same should be repeated throughout the design. • Elements that are different, should not share the same properties. • Why? Because… • Repetition organizeselements into visual units. • Repetition creates unity throughout the design. • Repetition shows which pieces are part of what whole.

9. CRAP: How we apply repetition • Type • Font families, styles (headlines, body copy, bylines, captions) • Color • Background color, type color, box color (page background, body type, photo box background, etc.) • Element Size • Font size, image size, shape size • Space • Space between alike elements (space between headlines and photos, photos and captions, etc.)

10. Repetition: Newspaper design

11. Repetition: Magazine design

12. Repetition: Website design

13. CRAP: Alignment explained • Everything on the page needs to be visually connected to something else. Nothing should be out of place or distinct from all other design elements, unless the designer’s attention is to call attention to that element. • Why? Because… • Aligning elements creates a visual path that leads to a focal point. • Alignment creates unity and organization.

14. Alignment: How we apply alignment • Text elements with other text elements • Headlines, subheads, bylines, stories, etc. • Graphic elements with other graphic elements • Story graphics, photos, shapes, etc. • Text elements with graphic elements • Main headline vs. lead art

15. Alignment: Newspaper design

16. Alignment: Magazine design

17. Alignment: Website design

18. CRAP: Proximity explained • Elements that are part of a group should be grouped together. Related elements should be closer together. Unrelated elements should be further apart. • Why? Because… • Proximity establishes relationships.

19. Proximity: Where we apply proximity • Stories (one story’s headline, subhead, photos, captions, byline, copy vs. another’s) • Site elements (header elements vs. navigation elements vs. content elements vs. advertisements)

20. Proximity: Newspaper design

21. Proximity: Magazine design

22. Proximity: Website design