Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pubs chap 1 5


Published on

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Pubs chap 1 5

  1. 1. Principles of Effective Design:Joshua Tree Epiphany & CRAP<br />Edited & adapted by Barbara B. Nixon<br />Georgia Southern University<br />
  2. 2. The Joshua Tree Epiphany<br />
  3. 3. CRAPcontrast, repetition, alignment, proximity<br />Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press<br />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.<br />
  4. 4.
  5. 5. CRAP<br />Contrast <br />Repetition <br />Alignment <br />Proximity <br />Robin Williams Non-Designers Design Book, Peachpit Press<br />
  6. 6. CRAP<br />Contrast<br />make different things different<br />brings out dominant elements<br />mutes lesser elements<br />creates dynamism<br />Repetition <br />Alignment <br />Proximity <br />1<br />2<br />3<br />4<br />5<br />Robin Williams Non-Designers Design Book, Peachpit Press<br />
  7. 7. CRAP<br />Contrast <br />Repetition <br />repeat design throughout the interface<br />consistency<br />creates unity <br />Alignment <br />Proximity<br />1<br />3<br />2<br />4<br />Robin Williams Non-Designers Design Book, Peachpit Press<br />
  8. 8. CRAP<br />Contrast <br />Repetition<br />Alignment<br />creates a visual flow<br />visually connects elements<br />Proximity<br />1<br />3<br />2<br />4<br />Robin Williams Non-Designers Design Book, Peachpit Press<br />
  9. 9. CRAP<br />Contrast <br />Repetition <br />Alignment <br />Proximity<br />groups related elements<br />separates unrelated ones<br />1<br />2<br />3<br />Robin Williams Non-Designers Design Book, Peachpit Press<br />
  10. 10. Wheredoesyoureye go?<br />CRAP combines to give you cues of how to read the graphic<br />title<br />subtext<br />three points<br />main point<br />sub point<br />Robin Williams Non-Designers Design Book, Peachpit Press<br />
  11. 11. Proximity<br />Chapter 2<br />
  12. 12. Principle of Proximity<br />Group related items together<br />Physical closeness implies a relationship<br />What happens when similar elements are grouped into one unit?<br />Relationships are important<br />
  13. 13. Too many elements for<br />the eye to look at<br />With two bold phrases, the<br />reader doesn’t know which<br />to look at first. Which is<br />more important?<br />
  14. 14. Here the elements are grouped<br />together, into closer proximity.<br />The card is now organized<br />intellectually & visually – making it<br />communicate more clearly.<br />
  15. 15. First masthead has no elements in proximity<br />Second masthead chose better typeface &<br />placed elements in proximity<br />
  16. 16. What to Remember about Proximity<br />When several things are in close proximity, they become one visual unit<br />Items relating to each other should be grouped together<br />Be conscious of where you eye is going<br />Basic purpose is to organize<br />Count the number of visual elements<br />
  17. 17. What to Avoid<br />Don’t stick something in every corner or the middle just ‘cause<br />Avoid too many separate elements on the page<br />Avoid leaving equal amounts of white space between elements unless group is part of a subset<br />Avoid confusion over whether something belongs to its related material<br />Don’t create relationships that don’t belong together<br />
  18. 18. No one will be able to understand this mess<br />With this the reader can<br />easily figure out what’s going on<br />
  19. 19. Alignment<br />Chapter 3<br />
  20. 20. Principle of Alignment<br />Nothing should be placed on the page randomly<br />Every item should have a visual connection with something else on the page<br />Aligned items result in stronger cohesive unit<br />
  21. 21. Elements on the card look like<br />they were randomly placed to fill<br />the corners & middle. There are no<br />connections.<br />Moving elements to the right gives<br />it one alignment. The information<br />is more organized.<br />
  22. 22. Centered alignment. The edges<br />are “soft,” and you can’t see the<br />strength of the line.<br />By aligning text flush-right, it<br />creates a hard edge – an invisible<br />line connecting the information.<br />
  23. 23. Aligning Text<br />On a business card, centered text appears weak.<br />When aligned left or right, the invisible line connects the text & gives a hard vertical edge.<br />Centered alignments creates a more formal look.<br />Lack of alignment is likely a big cause of pieces that don’t communicate well.<br />Lining up the elements can make a difference.<br />
  24. 24. Aligning Text<br />When you find a strong alignment, stick with it.<br />See Newsletters pg. 44-45<br />What about indenting?<br />Strong alignment=Professional look<br />
  25. 25. What to Remember About Alignment<br />Nothing should be placed on the page at random.<br />Every element should have some visual connection with another element on the page.<br />Unity is an important concept.<br />Basic purpose of alignment is to unify & organize the page.<br />Be conscious of where you place elements.<br />
  26. 26. What to Avoid<br />Avoid using more than one alignment.<br />Try to break away from always using a centered alignment.<br />
  27. 27. Repetition<br />Chapter 4<br />
  28. 28. Principle of Repetition<br />Repeat some aspect of the design throughout the entire piece<br />This element may be a bold font, a color, a design element, etc.<br />It must be something the reader will visually recognize.<br />Repetition=Consistency<br />
  29. 29. When you get to the end of the information, does your eye wander off the card?<br />Now, with the bold type at<br />the top & bottom, do you find<br />that your eye “bounces”<br />between the bold type<br />elements?<br />
  30. 30. The letterhead, business card &<br />envelope retain the repetitive<br />elements.<br /><ul><li>Strong left alignment
  31. 31. Spacing</li></ul>Want each piece to belong<br />together. <br />
  32. 32. Repetition<br />Helps organize information<br />Helps guide the reader through the pages<br />Helps unify unrelated parts of the design<br />Repetitive elements establish a sophisticated continuity<br />
  33. 33. What can a repetitive element be?<br />Clip art<br />Picture font<br />Simple element using different sizes, colors, angles<br />Sometimes not exactly the same object, but closely related<br />Look at the examples on pg. 59<br />
  34. 34. What to Remember about Repetition<br />Repetition of visual elements unifies & strengthens a piece<br />It’s critical in multi-page documents<br />Basic purpose is to unify & add visual interest<br />Repetition is about being consistent<br />
  35. 35. What to Avoid<br />Avoid repeating the element so much that it becomes annoying or overwhelming<br />
  36. 36. Contrast<br />Chapter 5<br />
  37. 37. Principle of Contrast<br />If two items are not exactly the same, then make them different<br />Contrast is an effective way to add visual interest<br />Contrast is created when two elements are different<br />There is no contrast between a 12 pt. font & a 14 pt. font<br />
  38. 38. Contrast<br />The piece can be nice & neat, but with no contrast no one will read it!<br />It’s important to the organization of information.<br />Look at the differences between pg. 68 & 69<br />Easiest way to add contrast is with typefaces<br />Create headlines that catch the eye<br />Then create contrast with text<br />Enhance with strong alignments<br />
  39. 39. Contrast<br />Don’t be afraid to make some items small to create a contrast with larger items<br />Don’t be afraid of blank space<br />Elements of contrast can sometimes be used as elements of repetition<br />Let’s take a look at the ads on pgs. 76 & 77<br />
  40. 40. The first example shows some contrast<br />between the typefaces & the rules, but<br />they’re wimpy.<br />The second example has a strong<br />contrast between typefaces making it<br />more eye-catching.<br />Stronger contrast between thickness<br />of the rules.<br />The third example also has a strong<br />contrast.<br />The reverse type draws your eye.<br />
  41. 41. What to Remember about Contrast<br />Contrast draws our eyes to it<br />If placing two elements on the page that aren’t the same, they can’t be similar. They must be VERY different.<br />Contrast has two purposes<br />Create an interest in the page<br />Aid in the organization of the information<br />
  42. 42. Add Contrast Through…<br />Typeface choices<br />Line thicknesses<br />Colors<br />Shapes<br />Sizes<br />Space<br />
  43. 43. What to Avoid<br />Avoid contrasting a sort-of heavy line with a sort of heavier line<br />Avoid contrasting brown text with black headlines<br />Avoid using two or more typefacesthat are similar<br />