VISUAL STORYTELLING FOR WEB DEVS

15-min lightning talk based on longer MSBuild presentation,
What is visual storytelling and why should we care? Let's unpack the process and get started with some basics! Plus a challenge for those who want to explore this,

Transcript

1. Visual Storytelling Sketchno)ng 101 for Web Developers Nitya Narasimhan, PhD Microso2 Developer Rela8ons July 29, 2020 #MSCreate #SketchTheDocs dev.to/nitya | @nitya
2. 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
3. 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.
4. 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
5. 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.
6. 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
7. 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)
8. 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
9. 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
10. SKETCHNOTING TOOLKIT FONTS LAYOUTS NAVIGATION QUOTES ICONS PEOPLE COLORS RESOURCES h"ps://aka.ms/msbuild-sketchno6ng-slides h"ps://aka.ms/msbuild2020-sketchno6ng-video
11. 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!
12. 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
13. 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<er with #MSCreate #SketchTheDocs Sketch a TALK aka.ms/visual-azure-channel9
14. SHOW YOUR WORK! #SketchTheDocs #MSCreate @nitya
15. OFFICE HOURS! Ask questions. Give Feedback! #SketchTheDocs #MSCreate @nitya https://aka.ms/mscreate-sketchOH