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.

Designing for Clarity - Graphic Design Tips for Non-Designers

958 views

Published on

Basic design is a skill that anyone can learn with a bit of practice. And that’s what you can learn from this presentation. It walks you through some basic, “use on Monday” design advice. These practical tips can be used to take any project, from a simple handout to a smartphone app, and make it easier for others to understand and interact with.

The advice in this session isn’t going to make you a graphic designer overnight, but it will give you some basic design rules to use that you can use immediately without much trouble and then continue to build on as you become more and more comfortable with design.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing for Clarity - Graphic Design Tips for Non-Designers

  1. 1. Designing for Clarity Graphic Design Tips for Trainers Session Speaker: Bianca Woods
  2. 2. A story about hats….
  3. 3. InstructionsLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Sed ultricies, eros sit amet rutrum luctus, nibh orci rutrum leo, non vestibulum nisl ipsum at libero. Nulla commodo arcu id mi eleifend semper. Aliquam dignissim vestibulum justo vel ornare. In a ligula nec orci fringilla cursus. Ut accumsan commodo erat, at tempus mi tristique eget. Duis a nisi leo. Mauris scelerisque risus non augue tempus varius. Phasellus id mauris leo, quis tempor sem. Etiam eu metus nibh. Morbi vestibulum, purus eu pellentesque vestibulum, arcu sem dignissim dui, quis gravida lacus eros et libero. Donec sit amet ipsum turpis, sed hendrerit felis. Fusce turpis lorem, posuere sit amet ultricies auctor, lobortis sit amet nulla. Aliquam pellentesque egestas augue blandit ultricies. Donec sit amet aliquet lectus. In ut dolor at turpis ullamcorper pharetra at ut est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer placerat lectus vitae dui blandit et vehicula tellus dictum. Vestibulum eros felis, sollicitudin eget condimentum nec, euismod vel odio. Fusce eget enim non tellus dictum fermentum nec in neque. Nunc ut erat non tellus commodo viverra nec ac nisl. Nulla mauris felis, adipiscing ut gravida nec, sollicitudin ut dui. Nam elit enim, pulvinar id tincidunt nec, gravida vel urna. Nunc fringilla diam ac mauris laoreet tincidunt id sit amet urna. Suspendisse felis felis, placerat a scelerisque id, facilisis id ante.
  4. 4. Instructions 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsummetus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. 2. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. 3. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. 4. Sed ultricies, eros sit amet rutrum luctus, nibh orci rutrum leo, non vestibulum nisl ipsum at libero. Nulla commodo arcu id mi eleifend semper. 5. Aliquam dignissim vestibulum justo vel ornare. In a ligula nec orci fringilla cursus. Ut accumsan commodo erat, at tempus mi tristique eget. Duis a nisi leo. Mauris scelerisque risus non augue tempus varius. Phasellus id mauris leo, quis tempor sem. 6. Etiam eu metus nibh. Morbi vestibulum, purus eu pellentesque vestibulum, arcu sem dignissim dui, quis gravida lacus eros et libero. 7. Donec sit amet ipsum turpis, sed hendrerit felis. Fusce turpis lorem, posuere sit amet ultricies auctor, lobortis sit amet nulla. Aliquam pellentesque egestas augue blandit ultricies.
  5. 5. Instructions 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. 2 Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. 3 Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et.
  6. 6. What about design feels difficult if you don’t have training in it?
  7. 7. “But I’m not a graphic designer”
  8. 8. Who am I? Instructional Designer & Technologist Former art teacher Bianca Woods
  9. 9. General Advice Typeface Graphics Layout
  10. 10. General Advice Let’s start at the very beginning…
  11. 11. Consider your audience
  12. 12. Consider the medium
  13. 13. Stay consistent! Font Font Font
  14. 14. Typeface Just promise me you won’t use Comic Sans
  15. 15. Century Gothic Cooper Black SignPainter Copperplate Georgia American Typewriter Snell Roundhand
  16. 16. Title Here’s some text, but it’s way to small for most of you to read. Too bad! Let’s put a bunch of text here with some important directions, but put them in a typeface that’s too fussy to read for very long. That should be fun. Am I a heading? A sub-heading? A new topic? Who knows? • I’m a very important point • Am I a related point? The list makes it seem like I am, but why am I in a different typeface? • I’M ALSO IN A DIFFERENT TYPEFACE. IS THERE A REASON FOR THAT? • I’m in the same typeface as the first bullet. Is that significant? More tiny text. Aren’t you excited?
  17. 17. Structure Types Serif
  18. 18. Sans Serif Structure Types
  19. 19. Fancy Script & Decorative Structure Types
  20. 20. Using Typefaces Together Typeface 1 Typeface 2 Typeface 3 Typeface 4 Too Different Typeface 1 Typeface 2 Typeface 3 Typeface 4 Too Similar
  21. 21. Using Typefaces Together 1 Serif 1 Sans Serif
  22. 22. Size 12 pt 18 pt 28 pt 40 pt 54 pt 72 pt 96pt
  23. 23. Lorem ipsum Dolor sit amet consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. Maecenas pellentesque Ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Sed ultricies, eros sit amet rutrum luctus, nibh orci rutrum leo, non vestibulum nisl ipsum at libero. Nulla commodo arcu id mi eleifend semper. Aliquam dignissim vestibulum justo vel ornare. In a ligula nec orci fringilla cursus Ut accumsan commodo erat At tempus mi tristique eget. Duis a nisi leo. Mauris scelerisque risus non augue tempus varius. Phasellus id mauris leo, quis tempor sem.
  24. 24. Lorem ipsum Dolor sit amet consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. Maecenas pellentesque Ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Sed ultricies, eros sit amet rutrum luctus, nibh orci rutrum leo, non vestibulum nisl ipsum at libero. Nulla commodo arcu id mi eleifend semper. Aliquam dignissim vestibulum justo vel ornare. In a ligula nec orci fringilla cursus Ut accumsan commodo erat At tempus mi tristique eget. Duis a nisi leo. Mauris scelerisque risus non augue tempus varius. Phasellus id mauris leo, quis tempor sem.
  25. 25. Weight
  26. 26. Tired Times New Roman Arial Ugly Comic Sans Papyrus
  27. 27. Graphics Because you can’t just slap Screen Beans on it and call it a day
  28. 28. Welcome to the presentation! Here’s some red text on a green background. Hooray. And here’s some hard to read yellow text on a white background. It’s almost unreadable.
  29. 29. Choosing Colours
  30. 30. Sources Physical items
  31. 31. Sources Pre- Created Palettes
  32. 32. Sources Palette Generator Websites
  33. 33. Choosing Images
  34. 34. Image Quality
  35. 35. Image Quality
  36. 36. Image Quality
  37. 37. Image Quality
  38. 38. Number
  39. 39. Number
  40. 40. Size
  41. 41. Size
  42. 42. Sources Stock Photo Sites
  43. 43. Sources Free Photos
  44. 44. Sources Make Your Own
  45. 45. Layout A place for everything & everything in its place
  46. 46. Grouping Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Sed ultricies, eros sit amet rutrum luctus, nibh orci rutrum leo, non vestibulum nisl ipsum at libero. Nulla commodo arcu id mi eleifend semper
  47. 47. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Grouping
  48. 48. Whitespace
  49. 49. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Sed ultricies, eros sit amet rutrum luctus, nibh orci rutrum leo, non vestibulum nisl ipsum at libero. Nulla commodo arcu id mi eleifend semper. Aliquam dignissim vestibulum. Your Title Text
  50. 50. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis lorem felis, euismod id feugiat a, laoreet sit amet nunc. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem. Morbi adipiscing vestibulum lacus, eu dictum nulla laoreet et. Your Title Text
  51. 51. Alignment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem.
  52. 52. Alignment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula. Maecenas pellentesque, ligula eu ultricies luctus, magna elit pretium augue, ut placerat erat tortor in nisi. Phasellus sollicitudin neque ac felis vulputate vestibulum vel at sem.
  53. 53. Grid
  54. 54. Title Subtitle text and such Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et est nulla. Cras eu ipsum metus. In euismod pulvinar fringilla. Phasellus porta egestas enim, a adipiscing lacus sodales vel. Integer odio ligula, vehicula in scelerisque in, facilisis ac nibh. Praesent a eros dui, molestie feugiat ipsum. Nam neque tellus, interdum gravida feugiat at, facilisis eu lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
  55. 55. any of you can do this
  56. 56. What’s next? Because knowing is half the battle
  57. 57. Getting Started White Space is Not Your Enemy Kim Golombisky Rebecca Hagen
  58. 58. Typeface Web and iOS
  59. 59. Typeface Web
  60. 60. Graphics Presentation Zen Garr Reynolds
  61. 61. Layout The 892 unique ways to partition a 3 x 4 grid Dubberly Design Office
  62. 62. Boosting Your Creativity Steal Like an Artist Austin Kleon
  63. 63. Boosting Your Creativity Judge This Chip Kidd
  64. 64. Boosting Your Creativity 99% Invisible A podcast created by Roman Mars
  65. 65. Additional Resources biancawoods.weebly.com /design-basics.html e-geeking.blogspot.ca @eGeeking

×