Visual Communication 101: Writing and Designing Instructions

The basics of visual design and plain language writing for instructions and how-tos, targeted towards government officials.

Workshop for the Code for America Summit, 2015.

Transcript

1. Visual Communication 101: Molly McLeod @mollyampersand Writing & Designing Instructions
2. @mollyampersand Hi! What are we doing? 1. Critique some instructions 2. Make lentil soup 3. Content tips 4. Design tips 5. Practice activity! So fun.
6. Why is “and” bold? Duh? Do I need to know this right now?? Why is it step 4?
8. “Some corporations…” Huh? This is a quite a wall of text
10. What information would you want if you were making lentil soup?
11. @mollyampersand
12. @mollyampersand
13. @mollyampersand
14. @mollyampersand
15. @mollyampersand ➔ Who are your users? ➔ What do they need to know? ➔ What’s the order they need to know it? ➔ What are the action steps? Start here
16. @mollyampersand ➔ Am I eligible/is this relevant to me? ➔ What info/materials do I need on hand? ➔ How long will it take? ➔ Key details: deadlines/when/where? Answer these questions up front
17. Content Tips
18. @mollyampersand From Field Guides to Ensuring Voter Intent Content Tips
19. @mollyampersand Content Tips From Field Guides to Ensuring Voter Intent
20. @mollyampersand Content Tips From Field Guides to Ensuring Voter Intent
21. Design Tips
22. @mollyampersand Choose readable and friendly fonts. Design Tips How to Apply Papyrus Times New Roman How to Apply Source Sans Sans-serif fonts tend to be easier to read. How to Apply Verdana
23. @mollyampersand Create a clear header hierarchy. Design Tips
24. @mollyampersand Place related items close to each other and leave white space. Design Tips
25. @mollyampersand Create a clear path for the eye to follow. Design Tips
26. @mollyampersand Let’s practice!
27. @mollyampersand These voting instructions need your help... 1. Find a partner 2. How would you approach redesigning this? Re- write, re-organize, re-think, sketch it out! 3. We’ll share in small groups in about 15 minutes
29. @mollyampersand Read the story at cvq.me/1/redesign
30. @mollyampersand Molly McLeod molly@codeforamerica.org Go forth and design all the things.