Download
1 / 39
400 likes | 552 Views
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
E N D
Intro to Design: CRAP Principles Design for Journalists Summer 2014
CRAP overview • Contrast • Repetition • Alignment • Proximity
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
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
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)
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
Repetition effects • Tells readers/users which elements are the same • Organizes and unifies your design
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)
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
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
How to establish alignment • Choose an alignment for each element and repeat that alignment • Ragged left • Ragged right • Left-justified • Right-justified • Centered
Proximity overview • Positioning elements that are part of the same group closer to one another than elements from a different group
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
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
