1 / 39

Intro to Design: CRAP Principles

Intro to Design: CRAP Principles. Design for Journalists Summer 2014. CRAP overview. C ontrast R epetition A lignment P roximity. Contrast overview. A noticeable difference between two elements

lavina
Download Presentation

Intro to Design: CRAP Principles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Intro to Design: CRAP Principles Design for Journalists Summer 2014

  2. CRAP overview • Contrast • Repetition • Alignment • Proximity

  3. Contrast overview • A noticeable difference between two elements • If two elements on a page are different, i.e. headline vs. body type, make them VERY different to create contrast on your page • Avoid making different elements on a page too similar

  4. Effects of contrast • Good use of contrast creates a hierarchy of elements on your page • Tells readers/users which elements are more or less important • Creates a direction for the eye

  5. How to create contrast • Type (serif vs. sans-serif) • Color (direct complementary) • Size (small vs. large) • Line thickness (thin vs. thick) • Shape (hard corners vs. round)

  6. Find the contrast

  7. Find the contrast

  8. Find the contrast

  9. Find the contrast

  10. Find the contrast

  11. Repetition overview • Styles that are exactly the same • If elements on a page are similar, i.e. all photo captions or all body copy, those design styles should be repeated on that page

  12. Repetition effects • Tells readers/users which elements are the same • Organizes and unifies your design

  13. How to create repetition • Type (same font face, font weight, etc.) • Color (same exact color, or harmonious colors) • Size (same exact size) • Line thickness (same exact size) • Shape (same shape throughout)

  14. Find the repetition

  15. Find the repetition

  16. Find the repetition

  17. Find the repetition

  18. Find the repetition

  19. Alignment overview • Connecting left, right or center of elements on a page • Nothing should be placed arbitrarily • Each element on a page should have a visual connection to another element

  20. Alignment effects • Establishes a design grid for the user/reader • Connects elements for user/reader, tells them these elements are part of the same group • Makes the page easy on the eye

  21. How to establish alignment • Choose an alignment for each element and repeat that alignment • Ragged left • Ragged right • Left-justified • Right-justified • Centered

  22. Find the alignment

  23. Find the alignment

  24. Find the alignment

  25. Find the alignment

  26. Find the alignment

  27. Proximity overview • Positioning elements that are part of the same group closer to one another than elements from a different group

  28. Proximity effects • Elements placed close to one another tell the reader/user that they’re part of the same unit • Organizes information and reduces clutter • Increases the effectiveness of the overall communication because the reader/user doesn’t have to search for related information

  29. How to use proximity • If elements are part of the same group (i.e. a story with a headline, subhead, photo, caption, byline + story), place them closer together than elements of a different group • Repeat the space between each of those elements

  30. Find the proximity

  31. Find the proximity

  32. Find the proximity

  33. Find the proximity

  34. Find the proximity

  35. CRAP or CRAP-py?

  36. CRAP or CRAP-py?

  37. CRAP or CRAP-py?

  38. CRAP or CRAP-py?

  39. CRAP or CRAP-py?

More Related