DEV Community

Cover image for Visual Storytelling For WebDevs: Create Sketchnotes!
Nitya Narasimhan, Ph.D for Microsoft Azure

Posted on • Updated on

Visual Storytelling For WebDevs: Create Sketchnotes!

Want to do more with static web apps?

Join us at CREATE:Frontend on Jul 29 (8:30am PDT / 11:30am EDT) for a 4-hr free virtual event with 8 talks and a 90-minute hands-on workshop to jumpstart your static web apps journey

Bookmark our anchor post and do check back for updates

Updated: Aug 4, 2020

Talk Resources & Recording

You can check out the slides from the event here:

I'm still waiting for the spliced up videos from the event, but you can see the archived video for the whole conference at the link below.

My segment starts at the 1:51:00 mark (or you can click this link to load the player directly at that offset). It's a quick 10-minute segment and I hope you like it!

Visual Storytelling For WebDevs

If you follow me on, you might have read my previous post on Sketchnoting. Here it is for reference. In that I talk about the origins of my interest in visual storytelling, and why it matters. I recommend you scan it first. Go on. I'll wait.

I've actually been doodling and sketching for years but I never actually tried to make talks on it, or teach other people to do what I did. Like many of you, I assumed doodling was just a hobby - and in my case, it was also a self-care strategy (focusing on drawing improves attention and avoids the stressful feeling I get in large conferences).

So here I am, about to do another 15-minute speed review on sketchnoting and visual storytelling at the Microsoft Create: FrontEnd event on Jul 29. And yes, because it's so much fun, here is a meta-tweet about it.

I decided to make this post because in an utterly selfish way, I hope you will join me tomorrow and take the first steps to become a visual storyteller. The event is free and online, and my talk is 15 mins long. Once it is over, I absolutely encourage you to hop on here and chat with me, share your ideas or experience and just build your creative muscle!

3 Reasons Why Web Devs Should Explore Visual Storytelling

This particular event is focused on web developers (frontend devs will find all talks valuable) but my talk is meant for all audiences, at all levels. However if you are a web developer, here are three reasons why sketchnoting helps.

    Think about it! You are effectively reducing long talks or pages of text to a simple sheet with visual cues that anyone can understand. Written or spoken materials may have cultural nuances and language-specific meanings. From the dawn of time, pictures have always been relatable!

    In my talk I explain that the visual storytelling journey benefits from metaphors and analogies to make complex concepts easier to understand and recall. The web was born metaphor-friendly. It's a web and we have spiders crawling and indexing it, and we have routes to take us from page to page, and we start at a home page and have visitors. See what I mean? You have plenty of clay - you just need to mould it into memorable sculptures!

  • IT'S FUN!!
    I can't emphasize this enough. Being in tech is stressful. If you are an under-represented developer in tech, or are stressed with all the things in our world today - you need self-care. The act of creating something visual can help you focus, relax and just bring joy! More importantly, visual notes often have more visibility and engagement than written ones. If you are new to tech and looking to connect with others and share your knowledge, this is a great skill to have.

Update: Aug 4, 2020

This is one of my favorite talks to do because people enjoy it so much, and they engage. IF you have an event or meetup where you think this might be a good talk or activity, reach out via or DM me on twitter (@nitya) and I'd love to support it!

Attendee Responses

I had a simple call to action. Sketch a concept based on what I shared, tag it with #SketchTheDocs #MSCreate and share it on Twitter. And some of you did just that. These are amazing!

MSCreate: Frontend

If you want to learn more about the MSCreate:Frontend event then check out this post with links to all the talks and speakers. And bookmark it to be notified of links to recordings and resources after the end!

Want to learn more about Azure Static Web Apps?

Call To Action: Join me!

So what are you waiting for? Join me - and if you have ideas or want to share your own visual storytelling journey, just tag me in the comments below and I would love to talk to, and amplify, you!

Let's go #SketchTheDocs

Top comments (4)

nitya profile image
Nitya Narasimhan, Ph.D

Hello all - I just came by to answer any questions so definitely leave them here for me.
If you want to submit a sketchnote and get a challenge badge, just tag ur sketchh with #SketchTheDocs #MSCreate and post to Twitter and I will be able to follow up with claim codes.

shaijut profile image
Shaiju T

Nice 😄, What if I am not good at writing and drawing, is there any tool for doing sketch notes ?

nitya profile image
Nitya Narasimhan, Ph.D

The whole idea here is that when you write something down it helps your brain remember it and gives it context for recall. That said, there are lots of ways where you can improve your sketchnoting.

  1. Use digital tools like Procreate on iPad - you can do a lot of things with brushes, textures and inks - and it allows you to apply algorithms to smooth any lines so it looks fairly neat

  2. Copy. Copy. Copy. I love Austin Kleon's book (and his quote at top of page) for just that reason - nothing is original. We are all simply building on other people's ideas. So for icons or fonts - find writing and examples that work then trace them

Practice is everything!

shaijut profile image
Shaiju T • Edited

CREATE:Frontend , session was good :)