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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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!
   

   View Slide

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

    View Slide

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
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

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)
    

    View Slide

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!
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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!
    

    View Slide

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)
    

    View Slide