Visual Storytelling For Tech: Let Me Draw You A Picture

What is Visual Storytelling? Why Should You Care? How can you get started with a Visual Toolkit of your own? And how can you put these skills to use in real life communications?

This 25-minute talk covers all these topics and more. Don't forget to check out @sketchthedocs (Twitter) for links to a longer blog post and sketchnotes

Transcript

1. Nitya Narasimhan | @nitya https://cloud-skills.dev | @sketchthedocs
2. @nitya | @sketchthedocs
3. @SketchTheDocs @nitya Using a Visual Vocabulary To Communicate Complex Ideas To Assist With Understanding, Retention, and Recall @nitya | @sketchthedocs
4. @SketchTheDocs @nitya We all process information differently 2 out of 3 humans learn visually Our brains absorb spatial & visual information faster, detecting patterns, making connections improving retention From: "How to Spot Visual, Auditory and Kinesthetic Learning Executives..", Inc Online @nitya | @sketchthedocs
5. @SketchTheDocs @nitya To Journaling evolved to a way of capturing key memories From Self-Care drawing helped me cope with anxiety and stress To Tech Storytelling visualizing technology to grow awareness, understanding & recall @nitya | @sketchthedocs
6. @SketchTheDocs @nitya Visual Storytelling apply your skills to other areas (public speaking), learn from community Sketchnoting 101 jumpstart your journey by building your visual toolkit for note-taking Visual Messaging visualizing key takeaways for attention and recall Personal Branding visualizing people's stories for better engagement
7. @SketchTheDocs @nitya Rapid Note-taking Visual Capture of Ideas Information Summarization & Synthesis @nitya | @sketchthedocs
8. @SketchTheDocs @nitya Rapid Note-taking Visual Capture of Ideas Information Summarization & Synthesis Explain Metaphorically (analogies) Connect Emotionally (anthropomorphism) Visualize Consistently (vocabularies) @nitya | @sketchthedocs
9. @SketchTheDocs @nitya @nitya | @sketchthedocs
10. @SketchTheDocs @nitya Rediscover the joy of doodling making visual marks will help you think and increases your focus Without lifting your pen, doodle a line over and around, crisscrossing in many places. Color or pattern enclosed areas. How did that feel? @nitya | @sketchthedocs
11. @SketchTheDocs @nitya FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS Typography & Imagery Colors & Composition @nitya | @sketchthedocs
12. @SketchTheDocs @nitya Font types for visual interest Font sizes for hierarchy Fast for capture, Slow for clarity FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
13. @SketchTheDocs @nitya Listen with intent for takeaways Look for repetitions Select for emotional resonance FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
14. @SketchTheDocs @nitya Start with simple figures Then practice poses & faces Make a cheat sheet! FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
15. @SketchTheDocs @nitya Just enough to be recognizable Focus on familiar + reusable Inspiration: Noun-Project! FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
16. @SketchTheDocs @nitya Focus on composition + clarity Group ideas, create boundaries Cultivate whimsy FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS Credit: Getting Started With Sketchnoting | Michele Ide-Smith @nitya | @sketchthedocs
17. @SketchTheDocs @nitya Think about how the information is being shared – and consumed ex: book, webpage, workflow, tabular FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
18. @SketchTheDocs @nitya Help users navigate visually Use familiar signals (arrows, maps, trails) FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
19. @SketchTheDocs @nitya Create visual separation Create contextual connection Think about accessibility FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs
20. @SketchTheDocs @nitya
21. @SketchTheDocs @nitya https://twitter.com/arunulag/status/1335990361768902656 @nitya | @sketchthedocs
22. @SketchTheDocs @nitya https://twitter.com/nitya/status/1351765213796851712 Share in near-real time Reinforce team messaging @nitya | @sketchthedocs
23. @SketchTheDocs @nitya @nitya | @sketchthedocs
24. @SketchTheDocs @nitya @nitya | @sketchthedocs https://aka.ms/visual-azure-cmu-elasticity
25. @SketchTheDocs @nitya Summarize content in 8 cells (on a single page) Paper or Digital Templates (speed up execution) @nitya | @sketchthedocs
26. @SketchTheDocs @nitya @nitya | @sketchthedocs
27. @SketchTheDocs @nitya https://cloud-skills.dev https://dev.to/t/visualizeit Free, 6-part online workshop series (skill yourself up!) Repository of tech sketchnotes (contributions welcome!) @nitya | @sketchthedocs
28. @SketchTheDocs @nitya On Creativity | Austin Kleon Letters, Maps, Processes Eva-Lotta Lamm Sketchnoting Ideas Denise Yu | Anthropomorphism Maggie Appleton Visual Metaphors Mike Rohde | #SketchnoteArmy @nitya | @sketchthedocs
29. Nitya Narasimhan | @nitya https://cloud-skills.dev | @sketchthedocs