1. Principles of Effective Design:Joshua Tree Epiphany & CRAP Edited & adapted by Barbara B. Nixon Georgia Southern University

2. The Joshua Tree Epiphany

3. CRAPcontrast, repetition, alignment, proximity Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

5. CRAP Contrast Repetition Alignment Proximity Robin Williams Non-Designers Design Book, Peachpit Press

6. CRAP Contrast make different things different brings out dominant elements mutes lesser elements creates dynamism Repetition Alignment Proximity 1 2 3 4 5 Robin Williams Non-Designers Design Book, Peachpit Press

7. CRAP Contrast Repetition repeat design throughout the interface consistency creates unity Alignment Proximity 1 3 2 4 Robin Williams Non-Designers Design Book, Peachpit Press

8. CRAP Contrast Repetition Alignment creates a visual flow visually connects elements Proximity 1 3 2 4 Robin Williams Non-Designers Design Book, Peachpit Press

9. CRAP Contrast Repetition Alignment Proximity groups related elements separates unrelated ones 1 2 3 Robin Williams Non-Designers Design Book, Peachpit Press

10. Wheredoesyoureye go? CRAP combines to give you cues of how to read the graphic title subtext three points main point sub point Robin Williams Non-Designers Design Book, Peachpit Press

11. Proximity Chapter 2

12. Principle of Proximity Group related items together Physical closeness implies a relationship What happens when similar elements are grouped into one unit? Relationships are important

13. Too many elements for the eye to look at With two bold phrases, the reader doesn’t know which to look at first. Which is more important?

14. Here the elements are grouped together, into closer proximity. The card is now organized intellectually & visually – making it communicate more clearly.

15. First masthead has no elements in proximity Second masthead chose better typeface & placed elements in proximity

16. What to Remember about Proximity When several things are in close proximity, they become one visual unit Items relating to each other should be grouped together Be conscious of where you eye is going Basic purpose is to organize Count the number of visual elements

17. What to Avoid Don’t stick something in every corner or the middle just ‘cause Avoid too many separate elements on the page Avoid leaving equal amounts of white space between elements unless group is part of a subset Avoid confusion over whether something belongs to its related material Don’t create relationships that don’t belong together

18. No one will be able to understand this mess With this the reader can easily figure out what’s going on

19. Alignment Chapter 3

20. Principle of Alignment Nothing should be placed on the page randomly Every item should have a visual connection with something else on the page Aligned items result in stronger cohesive unit

21. Elements on the card look like they were randomly placed to fill the corners & middle. There are no connections. Moving elements to the right gives it one alignment. The information is more organized.

22. Centered alignment. The edges are “soft,” and you can’t see the strength of the line. By aligning text flush-right, it creates a hard edge – an invisible line connecting the information.

23. Aligning Text On a business card, centered text appears weak. When aligned left or right, the invisible line connects the text & gives a hard vertical edge. Centered alignments creates a more formal look. Lack of alignment is likely a big cause of pieces that don’t communicate well. Lining up the elements can make a difference.

24. Aligning Text When you find a strong alignment, stick with it. See Newsletters pg. 44-45 What about indenting? Strong alignment=Professional look

25. What to Remember About Alignment Nothing should be placed on the page at random. Every element should have some visual connection with another element on the page. Unity is an important concept. Basic purpose of alignment is to unify & organize the page. Be conscious of where you place elements.

26. What to Avoid Avoid using more than one alignment. Try to break away from always using a centered alignment.

27. Repetition Chapter 4

28. Principle of Repetition Repeat some aspect of the design throughout the entire piece This element may be a bold font, a color, a design element, etc. It must be something the reader will visually recognize. Repetition=Consistency

29. When you get to the end of the information, does your eye wander off the card? Now, with the bold type at the top & bottom, do you find that your eye “bounces” between the bold type elements?

31. SpacingWant each piece to belong together.

32. Repetition Helps organize information Helps guide the reader through the pages Helps unify unrelated parts of the design Repetitive elements establish a sophisticated continuity

33. What can a repetitive element be? Clip art Picture font Simple element using different sizes, colors, angles Sometimes not exactly the same object, but closely related Look at the examples on pg. 59

34. What to Remember about Repetition Repetition of visual elements unifies & strengthens a piece It’s critical in multi-page documents Basic purpose is to unify & add visual interest Repetition is about being consistent

35. What to Avoid Avoid repeating the element so much that it becomes annoying or overwhelming

36. Contrast Chapter 5

37. Principle of Contrast If two items are not exactly the same, then make them different Contrast is an effective way to add visual interest Contrast is created when two elements are different There is no contrast between a 12 pt. font & a 14 pt. font

38. Contrast The piece can be nice & neat, but with no contrast no one will read it! It’s important to the organization of information. Look at the differences between pg. 68 & 69 Easiest way to add contrast is with typefaces Create headlines that catch the eye Then create contrast with text Enhance with strong alignments

39. Contrast Don’t be afraid to make some items small to create a contrast with larger items Don’t be afraid of blank space Elements of contrast can sometimes be used as elements of repetition Let’s take a look at the ads on pgs. 76 & 77

40. The first example shows some contrast between the typefaces & the rules, but they’re wimpy. The second example has a strong contrast between typefaces making it more eye-catching. Stronger contrast between thickness of the rules. The third example also has a strong contrast. The reverse type draws your eye.

41. What to Remember about Contrast Contrast draws our eyes to it If placing two elements on the page that aren’t the same, they can’t be similar. They must be VERY different. Contrast has two purposes Create an interest in the page Aid in the organization of the information

42. Add Contrast Through… Typeface choices Line thicknesses Colors Shapes Sizes Space

43. What to Avoid Avoid contrasting a sort-of heavy line with a sort of heavier line Avoid contrasting brown text with black headlines Avoid using two or more typefacesthat are similar