Saving Good Causes from Bad Design

Choosing the right images, fonts, and colors can be the difference between getting the attention of the people you’re trying to reach and getting lost in the noise. Bad design might alienate and confuse people. Good design can build trust and help spread your messages.

You’ll learn about the basics of visual design, the key rules and principles you need to know, and how to create a flyer, social media graphic, or report that will get your message across. You’ll also get started with how to use the free software and tools you need to design just about anything.

www.mollymcleod.com • molly.ampersand@gmail.com

Transcript

1. Molly McLeod @mollyampersand • mollymcleod.com Saving Good Causes from Bad Design What You Need to Know about Visual Communication
2. @mollyampersand Hi! What are we doing? 1. What is design? Why does it matter? 2. Design principles 3. Design tips 4. Tools & resources
3. @mollyampersand Who I am ...a huge design nerd passionate about social justice.
4. @mollyampersand
5. @mollyampersand Worried you’ll forget 99% of this? Check out my slides and links to all the resources at mollymcleod.com/resources. Ask me questions on Twitter @mollyampersand.
6. What is design?
7. @mollyampersand Visual Design User Experience Design Interaction Design Instructional Design Information Design Content Design ...and more. Our focus for today
8. @mollyampersand Design isn’t (only) how things look.
9. @mollyampersand Design is how things work.
10. @mollyampersand Good design moves people to action.
11. @mollyampersand Good design helps people make important decisions.
12. @mollyampersand Good design catalyzes a movement.
13. @mollyampersand
14. @mollyampersand
15. @mollyampersand
16. @mollyampersand
18. @mollyampersand Uhhh… no.
19. @mollyampersand
20. @mollyampersand
21. Choosing the right images, fonts, and colors can be the difference between getting the attention of the people you’re trying to reach... ...and getting lost in the noise.
22. Bad design might alienate and confuse people. Good design can build trust and help spread your messages.
23. WOOOO LET’S DESIGN SOMETHING!!!
24. @mollyampersand Before you start designing... 1. Who is your audience? 2. What is your communication goal? 3. What’s the content and key info? 4. What’s the call to action?
25. @mollyampersand Who is your audience? What are their needs?
26. @mollyampersand
27. @mollyampersand What is your communication goal? What information does your audience need to know?
28. @mollyampersand
29. @mollyampersand What’s the order they need to know the information?
30. @mollyampersand
31. @mollyampersand What’s the call to action?
32. @mollyampersand
33. @mollyampersand Now we’re ready to make a thing! 1. Typography 2. Graphics 3. Color 4. Layout
34. The art of choosing fonts and arranging text Typography
35. @mollyampersand When choosing a font: keep in mind legibility and personality. Times and Helvetica are harder to read. Typography
36. @mollyampersand Avoid decorative fonts. Typography
37. @mollyampersand Sans serif fonts tend to be easier to read. Source Sans, Lato, and Roboto are all great choices available for free download. Typography
38. @mollyampersand Make the text bigger! Typography 24-60 pt: headers 18-24 pt: paragraph/body text (web) 12-18 pt: paragraph/body text (print) 6-10 pt: honey I shrunk the type!
39. @mollyampersand Keep line length short, around 10- 15 words a line. Typography Choosing the right images, fonts, and colors can be the difference between getting the attention of the people you’re trying to reach and getting lost in the noise. Bad design might alienate and confuse people. Good design can build trust and help spread your messages. In this webinar, you’ll learn about the basics of visual design, the key rules and principles you need to know, and how to create a flyer, social media graphic, or report that will get your message across. You’ll also get started with how to use the free software and tools you need to design just about anything. Choosing the right images, fonts, and colors can be the difference between getting the attention of the people you’re trying to reach and getting lost in the noise. Bad design might alienate and confuse people. Good design can build trust and help spread your messages. In this webinar, you’ll learn about the basics of visual design, the key rules and principles you need to know, and how to create a flyer, social media graphic, or report that will get your message across. You’ ll also get started with how to use the free software and tools you need to design just about anything.
40. @mollyampersand Left justify text. Centered text and right justified text is hard to read. Typography
41. @mollyampersand Choose one way to emphasize text. Typography
42. @mollyampersand Use all-caps sparingly. All-caps can convey a bold sense of urgency. When used for more than a few words, it can seem like yelling and is hard to read. Typography
43. @mollyampersand practicaltypography.com Typography in 10 Minutes, formatting, layout, font recommendations, and more Typography Resources
44. @mollyampersand Google Web Fonts – available for web and desktop download. Free! Open source! Sort fonts by popularity to get the best choices. Typography Resources
45. Because a picture is worth a thousand words Graphics
46. @mollyampersand Use icons primarily to inform and draw attention to key information, not as decoration. Graphics
47. @mollyampersand When using text on a photo, use a simple photo and give it a dark or light tint. Add a black or white box on top of the photo and lower the opacity – this is easy to do in any graphics program. Graphics
48. @mollyampersand Using portraits of people alongside quotes is a powerful way to build empathy and connection. Graphics
49. @mollyampersand Engage your audience by encouraging people to share photos as part of a campaign. Graphics
50. @mollyampersand Photography can be a powerful way to show inequalities and power dynamics in a simple way. Graphics
51. @mollyampersand Emulate a well known graphic style in order to subvert it. Graphics
52. @mollyampersand Noun Project thenounproject.com Graphic Resources
53. @mollyampersand Font Awesome fontawesome.io Graphic Resources
54. @mollyampersand Color Stock getcolorstock.com Graphic Resources
55. @mollyampersand Create Her Stock createherstock.com Graphic Resources
56. @mollyampersand Search for Creative Commons licensed photo on Flickr or Google Graphic Resources
57. @mollyampersand Search for Creative Commons licensed photo on Flickr or Google Graphic Resources
58. Only use rainbows!!!! (just kidding) Color
59. @mollyampersand A limited color pallette can have more impact and be easier to read. Color
60. @mollyampersand Use light text on a dark background or dark text on a light background. Make sure there’s enough contrast. Color
61. @mollyampersand Don’t rely on color to convey important information. Keep color- blindness in mind. Color
62. @mollyampersand Sim Daltonism – Color Blindness tool for Mac michelf. ca/projects/mac/si m-daltonism/ Color Resources
63. @mollyampersand Adobe Color color.adobe.com Color Resources
64. How to arrange things in a pleasing fashion Layout
65. @mollyampersand If everything is important, nothing is important. Simplify. Highlight a call-to- action. Layout
66. @mollyampersand To create hierarchy, make a clear path for the eye to follow. Use 2-3 font sizes, and no more than 2 colors for text. Layout
67. @mollyampersand Place related items close to each other and leave white space. Layout
68. @mollyampersand Avoid putting text over someone’s face or over a busy picture. Layout
69. @mollyampersand Use a colored box behind text, or crop an image to fit on one side of the text. Layout
70. @mollyampersand Social Media Image Size Cheat Sheet makeawebsitehub. com/social-media-image- sizes-cheat-sheet/ (Google it) Layout Resources
71. Let’s recap WHEW
72. No hierarchy Too many styles Not enough contrast, too busy Too much information Centered text is hard to read Consider audience needs – no one cares about your logo
73. ★ Clear hierarchy ★ Limited color palette ★ Large, readable text ★ Simple images ★ Call to action!
74. @mollyampersand PROTIP Test your materials with your target audience! Show it to someone for 3 seconds and see what they remember. What do you think? Do you like it?
75. The things you need to make the things Tools & Resources
76. @mollyampersand Field Guides to Ensuring Voter Intent civicdesigning.org/fieldguides/ Resources
77. @mollyampersand Visualizing Information for Advocacy visualisingadvocacy.org tacticaltech.org Resources
78. @mollyampersand Method of Action: learn design through games! method.ac Resources
79. @mollyampersand Canva – free web based design software. www.canva.com Tools
80. @mollyampersand Powerpoint and Google Slides are great design tools! I made a template for you: bit.ly/design-template Tools
81. @mollyampersand Worried you’ll forget 99% of this? Check out my slides and links to all these resources at mollymcleod.com/resources. Ask me questions on Twitter @mollyampersand.
82. @mollyampersand Was this helpful? I’d love your feedback! Did you use any of these tips? Want to share something you designed? molly.ampersand@gmail.com
83. Molly McLeod @mollyampersand mollymcleod.com Go forth and design all the things.