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

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

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

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

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

https://sketchthedocs.github.io #SketchTheDocs | @nitya Scenarios and their impact Visualize TALKS Bring visibility + connections via social engagement Visualize BOOKS Visualize DOCS

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

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

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!

https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs Before we begin .. A mission awaits! https://sketchthedocs.github.io #SketchTheDocs | @nitya

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

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!

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!

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!

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

https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs The Visual Storyteller's Basic Toolkit https://sketchthedocs.github.io #SketchTheDocs | @nitya

https://sketchthedocs.github.io #SketchTheDocs | @nitya Sketchnoting Toolkit FONTS ✓ LAYOUTS ✓ NAVIGATION ✓ QUOTES ✓ ICONS ✓ PEOPLE ✓ COLORS ✓ RESOURCES✓

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

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.

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)

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!

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!

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

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

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

https://sketchthedocs.github.io #SketchTheDocs | @nitya https://sketchthedocs.github.io #SketchTheDocs Next Steps & Final Thoughts https://sketchthedocs.github.io #SketchTheDocs | @nitya

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

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

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

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)

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!

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)