Sketch The Docs: Visual Storytelling for Developers

Did you know that 65% of users are visual learners? Visual learning is a powerful tool for communicating complex concepts in constrained spaces, while also improving later recall of that information. More importantly, visual vocabularies can be more inclusive to diverse audiences by using imagery, iconography, typography, color and other navigational cues that transcend languages. And, they improve your own understanding and recall of ideas in ways that can help with public speaking, technical documentation and more.

In this talk, I'll review my roadmap for visual storytelling - from sketchnoting to visual metaphors - and walk through the basic techniques you'll need to get started on your own visual storytelling journey. Come learn how you can "sketch the docs" and build skills to make you a better communicator and listener.

Presented at:
Droidcon Americas 2020
https://www.online.droidcon.com/americas-speaker/nitya-narasimhan

Transcript

1. https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs Visual Storytelling For Developers Nitya Narasimhan - @nitya Senior Cloud Advocate @Microsoft https://sketchthedocs.github.io #SketchTheDocs | @nitya
2. https://sketchthedocs.github.io #SketchTheDocs | @nitya About Me @nitya PhD & Parent Teach concepts by Telling Stories Research & Dev Solve problems by Finding Connections Developer Advocate Communicate ideas to Diverse Audiences
3. https://sketchthedocs.github.io #SketchTheDocs | @nitya This Talk Outline Visual Storytelling What is it? Why should we care? Sketchnoting 101 Usage Examples Visual Storytelling Toolkit Leveling Up Reverse Engineer Refactor & Share You don’t need to be an artist! It’s your perspective that makes this unique
4. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnotes What are they? Rapid Note-taking Usually real-time capture of concepts Using words + images Create visual interest Aid comprehension, retention & recall "It's About Ideas Not Art!" Mike Rohde
5. https://sketchthedocs.github.io #SketchTheDocs | @nitya Roadmaps The Why & How 65% Of Audiences have a visual learning capability 90% Recall of visual examples days after initial viewing The Storytelling Path build vocabulary, create connection, enable comprehension Mike Rohde https://rohdesign.com Denise Yu https://deniseyu.io/art Maggie App https://illustrated.dev
6. https://sketchthedocs.github.io #SketchTheDocs | @nitya Scenarios and their impact Visualize TALKS Bring visibility + connections via social engagement Visualize BOOKS Visualize DOCS
7. https://sketchthedocs.github.io #SketchTheDocs | @nitya Scenarios and their impact Visualize TALKS Bring visibility + connections via social engagement Visualize BOOKS Improve retention + recall via personal highlights Visualize DOCS
8. https://sketchthedocs.github.io #SketchTheDocs | @nitya Scenarios and their impact Visual TALKS Bring visibility + connections via social engagement Visual BOOKS Improve retention + recall via personal highlights Visualize DOCS Enable at-a-glance recall via cheat-sheets, vocabulary https://docs.microsoft.com/en-us/microsoftteams/platform/toolkit/visual-studio-code-overview *This example also uses digital tools, colors for effective visual storytelling
9. https://sketchthedocs.github.io #SketchTheDocs | @nitya Guidance For Beginners Visual TALKS Bring visibility + connections via social engagement Visual BOOKS Improve retention + recall via personal highlights Visualize DOCS Enable at-a-glance recall via cheat-sheets, vocabulary BE SPONTANEOUS. BE PERSISTENT. BE VISIBLE. BE YOURSELF. You don't need to be perfect. Have fun. Do this for yourself first. Share your work online. The positive feedback will surprise & inspire you! Practice. Practice. Practice. It will become second nature! It's your perspective & personality that make the outcomes unique!
10. https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs Before we begin .. A mission awaits! https://sketchthedocs.github.io #SketchTheDocs | @nitya
11. https://sketchthedocs.github.io #SketchTheDocs | @nitya Try It Out! Grab a Pen & Paper Pick a Test Target Sketch a concept Sketch a tutorial Sketch a talk Path 1: Sketchnote Create a 1-page summary that you can embed! Path 2: Zine It! Create an 8-cell comic that you can give away! Technical Documentation: Practice Concept Clarity aka.ms/visual-azure-docs Live Talk: Practice Real-time capture aka.ms/visual-azure-channel9 Technical Training Practice: Practice Information Workflow aka.ms/visual-azure-learn Then .. Share it with us! @nitya #SketchTheDocs Or .. choose your own tech adventure
12. https://sketchthedocs.github.io #SketchTheDocs | @nitya Try It Out! Grab a Pen & Paper Pick a Test Target Sketch a concept Sketch a tutorial Sketch a talk Path 1: Sketchnote Create a 1-page summary that you can embed! Path 2: Zine It! Create an 8-cell comic that you can give away!
13. https://sketchthedocs.github.io #SketchTheDocs | @nitya Try It Out! Grab a Pen & Paper Pick a Test Target Sketch a concept Sketch a tutorial Sketch a talk Path 1: Sketchnote Create a 1-page summary that you can embed! Path 2: Zine It! Create an 8-cell comic that you can give away!
14. https://sketchthedocs.github.io #SketchTheDocs | @nitya Try It Out! Grab a Pen & Paper Pick a Test Target Sketch a concept Sketch a tutorial Sketch a talk Path 1: Sketchnote Create a 1-page summary that you can embed! Path 2: Zine It! Create an 8-cell comic that you can give away!
15. https://sketchthedocs.github.io #SketchTheDocs | @nitya Try It Out! Grab a Pen & Paper Pick a Test Target Sketch a concept Sketch a tutorial Sketch a talk Path 1: Sketchnote Create a 1-page summary that you can embed! Path 2: Zine It! Create an 8-cell comic that you can give away! Don’t forget to share your work! @nitya #SketchTheDocs
16. https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs The Visual Storyteller's Basic Toolkit https://sketchthedocs.github.io #SketchTheDocs | @nitya
17. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓
18. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Try it! Practice some fonts e.g., sketchnote title Monoton | fonts.google.com Font style adds visual interest Custom fonts to convey context, emotion Font sizes signal priority, hierarchy
19. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Try it! Grid for Zines Explore other types Layouts drive narrative flow Layouts as design patterns (vocabulary) Layouts add implicit constraints Try it! Pick a simple layout for your sketchnote.Use grid for zines.
20. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Sacha Chua | Sketchnote Lessons Helen Cann | How to make Hand-drawn maps Try it! Draw arrows & trails. Find inspiration (games, maps)
21. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ “Take Time to be boring .. Practice Productive Procrastination” ~Austin Kleon Try it! Read or listen with contextual intent. Find a representative phrase & showcase it!
22. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Noun Project Be inspired. Attribute authors. Try it! Build visual vocabulary for your domain … Pick key terms to iconify. Recognizability – not art!
23. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Try it! Build a postures cheatsheet! Adding people or faces creates sense of belonging Example: https://pinterest.com/search/pins/?q=stick%20figures%20poses Credit: https://www.louisdecrevel.com/gesturefest
24. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Try it! Pick 2-3 colors Background color for separation. Challenge: Accessibility Example: see color-blind
25. https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ Creative Lettering | Jenny Doh Doodle Revolution | Sunni Brown Sketchnote Books | Mike Rohde On Creativity | Austin Kleon Illustrated.dev | Maggie Appleton Anthropomorphism | Denise Yu Track This Repo
26. https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs Next Steps & Final Thoughts https://sketchthedocs.github.io #SketchTheDocs | @nitya
27. https://sketchthedocs.github.io #SketchTheDocs | @nitya Practice Time Some Mission Options Pick a Test Target Sketch a concept Sketch a tutorial Sketch a talk Path 1: Sketchnote It! Create a 1-page summary that you can embed! Path 2: Zine It! Create an 8-cell comic that you can give away! Technical Documentation: Practice Concept Clarity aka.ms/visual-azure-docs Live Talk: Practice Real-time capture aka.ms/visual-azure-channel9 Technical Training Practice: Practice Information Workflow aka.ms/visual-azure-learn Then .. Share it with us! @nitya #SketchTheDocs Or .. choose your own tech adventure
28. https://sketchthedocs.github.io #SketchTheDocs | @nitya Skilling Up How to build on this Start with Pen & Paper First, practice handwriting (slow & steady) Next, work on pacing (live notes capture) Finally, refactor for impact (leaves spaces, fill in after) Static Sketchnote https://aka.ms/sdd-dual-screen
29. https://sketchthedocs.github.io #SketchTheDocs | @nitya Skilling Up How to build on this Explore Digital Tools Refactoring on-the-fly (resize canvas, re-do writing) Exporting various formats (animations, replays) Digital cheatsheets (color palettes, icons, poses) DynamicSketchnote #dcAmericas(Nov 2020) "Graphics for Android Developers" Chet Haase, Romain Guy
30. https://sketchthedocs.github.io #SketchTheDocs | @nitya Skilling Up How to build on this Reverse Engineer & Refactor Review others' works for 'design patterns' (and tools, process) Reproduce or mimic icons, word images (with attribution) Explore new formats for storytelling (zines, word images, #inktechtober)
31. https://sketchthedocs.github.io #SketchTheDocs | @nitya Skilling Up How to build on this Follow & Amplify Visual Technologists Let's Sketch Tech Conference: https://letssketchtech.com Content: https://dev.to/letssketchtech Twitter: @letssketchtech Ashton Rodenheiser Chiu-kiChan Corey Latislaw Denise Yu Maggie Appleton Marlena Compton … Visualize IT! Series with @MSFTReactor 6 Speakers 6 Saturdays Beginner-Friendly Hands-on Workshops Free & Online!
32. https://sketchthedocs.github.io #SketchTheDocs | @nitya Thank You For Listening INTRODUCTION ✓ FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓ SKILLING UP ✓ Slides, Resources & More Visualize IT! Series (Dec)