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
   

   View Slide

2. @nitya | @sketchthedocs
   

   View Slide

3. @SketchTheDocs @nitya
   Using a Visual
   Vocabulary
   To Communicate
   Complex Ideas
   To Assist With
   Understanding,
   Retention, and
   Recall
   @nitya | @sketchthedocs
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. @SketchTheDocs @nitya
   Rapid
   Note-taking
   Visual Capture
   of Ideas
   Information
   Summarization
   & Synthesis
   @nitya | @sketchthedocs
   

   View Slide

8. @SketchTheDocs @nitya
   Rapid
   Note-taking
   Visual Capture
   of Ideas
   Information
   Summarization
   & Synthesis
   Explain
   Metaphorically
   (analogies)
   Connect
   Emotionally
   (anthropomorphism)
   Visualize
   Consistently
   (vocabularies)
   @nitya | @sketchthedocs
   

   View Slide

9. @SketchTheDocs @nitya
   @nitya | @sketchthedocs
   

   View Slide

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
    

    View Slide

11. @SketchTheDocs @nitya
    FONTS
    QUOTES
    PEOPLE
    ICONS
    CONTAINERS
    LAYOUTS
    DIRECTION
    COLORS
    Typography & Imagery
    Colors & Composition
    @nitya | @sketchthedocs
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. @SketchTheDocs @nitya
    Help users navigate visually
    Use familiar signals
    (arrows, maps, trails)
    FONTS
    QUOTES
    PEOPLE
    ICONS
    CONTAINERS
    LAYOUTS
    DIRECTION
    COLORS
    @nitya | @sketchthedocs
    

    View Slide

19. @SketchTheDocs @nitya
    Create visual separation
    Create contextual connection
    Think about accessibility
    FONTS
    QUOTES
    PEOPLE
    ICONS
    CONTAINERS
    LAYOUTS
    DIRECTION
    COLORS
    @nitya | @sketchthedocs
    

    View Slide

20. @SketchTheDocs @nitya
    

    View Slide

21. @SketchTheDocs @nitya
    https://twitter.com/arunulag/status/1335990361768902656
    @nitya | @sketchthedocs
    

    View Slide

22. @SketchTheDocs @nitya
    https://twitter.com/nitya/status/1351765213796851712
    Share in near-real time
    Reinforce team messaging
    @nitya | @sketchthedocs
    

    View Slide

23. @SketchTheDocs @nitya
    @nitya | @sketchthedocs
    

    View Slide

24. @SketchTheDocs @nitya
    @nitya | @sketchthedocs
    https://aka.ms/visual-azure-cmu-elasticity
    

    View Slide

25. @SketchTheDocs @nitya
    Summarize content in 8 cells
    (on a single page)
    Paper or Digital Templates
    (speed up execution)
    @nitya | @sketchthedocs
    

    View Slide

26. @SketchTheDocs @nitya
    @nitya | @sketchthedocs
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. Nitya Narasimhan | @nitya
    https://cloud-skills.dev | @sketchthedocs
    

    View Slide