SketchTheDocs: How Visual Storytelling Can Improve Your Learning & Communication Skills

@NITYA NARASIMHAN | 2021 VISUAL STORYTELLING & TECH @SKETCHTHEDOCS | HTTPS://CLOUD-SKILLS.DEV
#SketchTheDocs
Why How Visual Storytelling Can Improve
Your Learning & Communication Skills

View Slide

Abstract
Did you know 65% of us are visual learners?
And that writing things down, and using
visual vocabularies, can improve your
understanding, retention, and recall, of
complex information?
Join me as we explore the world of visual
storytelling from building your own visual
toolkit ("learn to sketch") to creating rich
visual guides ("sketch to learn") that make
technology feel more relatable.
We'll explore a visual storytelling roadmap
from note-taking to metaphors, from digital
to physical, and passive to interactive, usage.

View Slide

What is Visual
Storytelling?
Using a Visual
Vocabulary
To Communicate
Complex Ideas
To Assist With
Understanding
Retention
Recall

View Slide

Why Visual
Storytelling?
Every person processes
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

View Slide

My Visual Storytelling Journey
Became Journaling
evolved to a way of capturing key memories
Started As Self-Care
drawing helped me cope with anxiety
Then Storytelling
visualizing technology to grow awareness,
understanding & recall
@nitya | @sketchthedocs

View Slide

Visual Storytelling : Tech & DevRel
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
Amplify Messaging
visualizing takeaways
for attention & recall
Personal Branding
document user tech
journeys memorably

View Slide

What is Sketchnoting?
Rapid
Note-taking
Visual Capture
of Ideas
Information
Summarization
& Synthesis

View Slide

Rapid
Note-taking
Visual Capture
of Ideas
Information
Summarization
& Synthesis
What is Visual Storytelling??
Explain
Metaphorically
(analogies)
Connect
Emotionally
(anthropomorphism)
Visualize
Consistently
(vocabularies)

View Slide

Learn To Sketch:

View Slide

1. Stretch your sketching muscles daily!
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?

View Slide

2. Build a Visual Storytelling Toolkit
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Typography & Imagery
Colors & Composition

View Slide

3. Visual Toolkit : Fonts
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Types = Visual Interest
Sizes = Hierarchy
Fast for Capture, Slow for Clarity

View Slide

4. Visual Toolkit : Quotes
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Listen for repetitions
Select for resonance
Learn to listen with intent!

View Slide

5. Visual Toolkit : People
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Start with basic figures
Build up to faces
Make a cheatsheet!

View Slide

6. Visual Toolkit : Icons
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Focus on the familiar
Just enough to recognize
Inspiration: Noun Project!

View Slide

7. Visual Toolkit : Containers
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Composition for clarity
Groups & Boundaries
Cultivate a sense of whimsy

View Slide

8. Visual Toolkit : Layouts
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Think about how your
audience consumes info
Book, Webpage, Workflow, Table

View Slide

9. Visual Toolkit : Direction
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Help your reader navigate
Use familiar signals
Arrows, Maps, Trails

View Slide

10. Visual Toolkit : Colors
FONTS
QUOTES
PEOPLE
ICONS
CONTAINERS
LAYOUTS
DIRECTION
COLORS
Create visual separation
Create contextual connect
Challenge: Think accessibility!!

View Slide

Sketch To Learn:

View Slide

Capture Talks Live: Share & Recall
https://twitter.com/arunulag/status/1335990361768902656

View Slide

https://twitter.com/nitya/status/1351765213796851712
Share in near-real time
Reinforce core messaging
Capture Ahead, Share Live: Amplify

View Slide

Learning Guides: Pre-Read, Post-Review
https://aka.ms/visual-azure-cmu-elasticity

View Slide

Chalk The Talk: Before, During, After

View Slide

Zine The Scene – Giveaway your message!
Summarize content in 8 cells
(on a single page)
Paper or Digital Templates
(speed up execution)

View Slide

#ABSee – Visual Vocabulary Games

View Slide

Resources: Learn, Copy, Contribute!
https://cloud-skills.dev
https://dev.to/t/visualizeit
Free, 6-part online workshop series
(skill yourself up!)
Repository of tech sketchnotes
(contributions welcome!)

View Slide

Resources: People, Books & Practice
On Creativity | Austin Kleon
Letters, Maps, Processes
Eva-Lotta Lamm
Sketchnoting Ideas
Denise Yu |
Anthropomorphism
Maggie Appleton
Visual Metaphors
Mike Rohde | #SketchnoteArmy

View Slide

Own your Takeaway! – @sketchthedocs

View Slide

Thank You!
Follow @sketchthedocs | Chat @nitya
Share your journey: #SketchTheDocs
Sketchnotes: https://cloud-skills.dev
Workshops: https://dev.to/t/visualizeit

View Slide

SketchTheDocs: How Visual Storytelling Can Improve Your Learning & Communication Skills

SketchTheDocs: How Visual Storytelling Can Improve Your Learning & Communication Skills

Nitya Narasimhan, PhD

More Decks by Nitya Narasimhan, PhD

Other Decks in Technology

Featured

Transcript