Slide 1

Slide 1 text

Visual Storytelling Sketchno)ng 101 for Web Developers Nitya Narasimhan, PhD Microso2 Developer Rela8ons July 29, 2020 #MSCreate #SketchTheDocs dev.to/nitya | @nitya

Slide 2

Slide 2 text

Agenda Participate & Share! Visual Storytelling What is it? Why should we care? Sketchnoting 101 Deconstructing Process Quickstart & Resources Summer Learner Challenge Try it out, share your work Earn a limited edi>on badge You don’t need to be an ar5st! It’s your perspec5ve that makes this unique

Slide 3

Slide 3 text

What is a Sketchnote? Quick capture of ideas with words and imagery! Support visual learning. Visual notes and vocabulary clarify understanding & improve recall Build your professional brand. Show your work. Share your perspective. Create meaningful connections.

Slide 4

Slide 4 text

Why should you sketchnote? 65% of users are Visual Learners (let’s be inclusive) 90% accuracy On recall in 72 hours (enhance the takeaway) Build a skill creaEvity revitalizes the brain, visuals amplify your brand Mike Rohde https://rohdesign.com Denise Yu h1ps://deniseyu.io/art Maggie Appleton https://illustrated.dev

Slide 5

Slide 5 text

Behind The Sketchnote It’s your unique voice It’s the imperfections that make it authentic “It’s about ideas, not art” Mike Rohde Prac?ce. Prac?ce. Prac?ce. HandwriEng. Layout. Pacing. Color. Visual Vocabulary.

Slide 6

Slide 6 text

What is a Zine? Home-made mini magazine structured layout, focused topic, visual storytelling 1 sheet / 8 Pages / Handout! Personalized takeaways to assist recall of topic & speaker

Slide 7

Slide 7 text

Behind The Zine Quick. Easy. Fun To Create! Cover Page. Back Page. 6 “topical” cards. Simple Template Cover: Title (font). What Why How – Step 1 How – Step 2 How – Step 3 Recap / Takeaway Back: Author (image)

Slide 8

Slide 8 text

1- FONTS FONT TYPES create visual interest Cursive WriEng Bold Font Bubble leQers FONT SIZES create hierarchy Header vs. Body RESOURCES Google Fonts Pinterest Typography Books

Slide 9

Slide 9 text

2- ICONS VISUAL VOCABULARY create consistency Familiar visual cues across sketchnotes SUCCINCT & INCLUSIVE create efficiency Picture is worth 1K words RESOURCES Noun Project Pinterest Mapmaking Books

Slide 10

Slide 10 text

SKETCHNOTING TOOLKIT FONTS LAYOUTS NAVIGATION QUOTES ICONS PEOPLE COLORS RESOURCES h"ps://aka.ms/msbuild-sketchno6ng-slides h"ps://aka.ms/msbuild2020-sketchno6ng-video

Slide 11

Slide 11 text

Receive Summer Learner a special edition badger given to attendees of this event. Limited to the first 200 submissions. ENDS JUL 30 / 2PM PDT ✅ PICK A CHALLENGE (Easy or Difficult) ✅ CREATE A SKETCHNOTE (Take a picture) ✅ SHARE ON TWITTER (Tag #MSCreate #SketchTheDocs) Once we see your submission, we’ll reach out with a unique link to unlock your digital badge! Other digital badgers are provably scarce and must be earned with verifiable acts of impact. Ex: Attend John Papa’s workshop to earn a Builder badger Participate in polls and quizzes to earn the Kudos badger Distributed upon submission of a sketchnote!

Slide 12

Slide 12 text

Easy Challenge Pick a web concept Observability, Accessibility, Inclusive Design, Remote Work, Service Workers, Serverless Use some Fonts Write the word in a large font Explain the concept in 1 sentence in small font Add an Image Draw an icon or image represenEng the concept Share on Twitter with #MSCreate #SketchTheDocs

Slide 13

Slide 13 text

Tough Challenge Pick a content item Docs = Concept Learn = Tutorial Channel 9 = Video Create Sketchnote Or Zine Make a single-page sketchnote or 8-tile zine that captures the essence of that content! Sketch DOCUMENTATION aka.ms/visual-swa-docs Sketch A TUTORIAL aka.ms/visual-azure-learn Share on Twi

Slide 14

Slide 14 text

SHOW YOUR WORK! #SketchTheDocs #MSCreate @nitya

Slide 15

Slide 15 text

OFFICE HOURS! Ask questions. Give Feedback! #SketchTheDocs #MSCreate @nitya https://aka.ms/mscreate-sketchOH