Visual Storytelling For Tech: Let Me Draw You A Picture

by Nitya Narasimhan, PhD

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@nitya | @sketchthedocs

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@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

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

@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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@SketchTheDocs @nitya @nitya | @sketchthedocs

Slide 10

Slide 10 text

@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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@SketchTheDocs @nitya Listen with intent for takeaways Look for repetitions Select for emotional resonance FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs

Slide 14

Slide 14 text

@SketchTheDocs @nitya Start with simple figures Then practice poses & faces Make a cheat sheet! FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs

Slide 15

Slide 15 text

@SketchTheDocs @nitya Just enough to be recognizable Focus on familiar + reusable Inspiration: Noun-Project! FONTS QUOTES PEOPLE ICONS CONTAINERS LAYOUTS DIRECTION COLORS @nitya | @sketchthedocs

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@SketchTheDocs @nitya

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@SketchTheDocs @nitya @nitya | @sketchthedocs

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@SketchTheDocs @nitya @nitya | @sketchthedocs

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

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