Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketch The Docs: Visual Storytelling for Developers

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

Nitya Narasimhan, PhD

November 17, 2020
Tweet

More Decks by Nitya Narasimhan, PhD

Other Decks in Technology

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