Sketchnothing: Creative Notes for Technical Content

Sketchnoting

Jessica Eldredge

@jessabean

#sketchnoting

#note-taking

#visual-communication

#developer-experience-dx

#creativity

#front-end-development

#user-experience-ux

Sketchnothing: Creative Notes for Technical Content

by Jessica Eldredge

In the video "Sketchnothing: Creative Notes for Technical Content," Jessica Eldredge, a front-end developer at Shopify, discusses the concept of sketchnoting, which combines text and hand-drawn elements to create visually compelling notes. The talk emphasizes the importance of utilizing analog methods for note-taking in a digital world, helping attendees to better focus, remember, and engage with content during technical talks and meetings.

Key points covered include:
- Definition of Sketchnoting: Visual note-taking that incorporates hand-drawn elements to clarify and document thoughts.
- Benefits of Sketchnoting: Enhances focus and memory through active engagement and reduces distractions from digital devices.
- Techniques for Effective Sketchnoting:
- Live vs. Later Sketchnoting: Emphasizing the importance of capturing ideas in real-time during presentations.
- Active Listening: The necessity of focusing on the speaker’s words, rather than the slides, to capture key messages.
- Drawing Basics: Encouraging participants to get comfortable with simple shapes as foundational to creating sketchnotes.
- Practice and Tools: Recommendations on materials, including preferred pens and sketchbooks, and suggestions for practicing sketchnoting in various settings such as meetings and recorded talks.
- Sharing Notes: The importance of sharing notes using social media, acknowledging speakers, and documenting ideas to enhance community engagement.

Eldredge illustrates her points with personal anecdotes and examples from noted sketchnoters, showing styles and techniques. She addresses common concerns attendees may have, like "I can't draw," and provides reassurance that everyone can sketch with practice. The presentation concludes with a call to action for attendees to embrace and practice sketchnoting, as it is both fun and beneficial to personal and professional growth.

00:00:17.760 Hello everyone, thank you so much for coming. My name is Jessica Eldredge, I'm a front-end developer at Shopify, and today I want to talk to you about taking notes.

00:00:21.520 More specifically, I want to discuss taking awesome notes by practicing sketchnoting. How many of you have heard of sketchnotes before? Oh great, that's exciting! Is anyone sketchnoting right now? I love you guys; please share your notes afterwards. We're going to tweet all the photos.

00:00:30.480 So if you haven't heard of sketchnoting, let me explain. I like to describe it as visual note-taking. It's the practice of combining hand-drawn elements with text to create visually compelling notes. Are you familiar with mind maps? Show of hands—has anybody done that before? Yes! Who here has used a whiteboard when designing software?

00:00:44.879 All right, you guys got this—you're already familiar with the concept of sketchnoting. Basically, it's the difference between notes that look like this and notes that look like that. I first started sketchnoting because of a man named Mike Rohde. He's a designer who lives in the Midwest and coined the term "sketchnoting". I was preparing to go to South by Southwest one year and was searching the internet for photos to get an idea of what I was getting myself into. I stumbled across his notes, and he's been doing this for a long time—at least since 2008.

00:01:10.799 He does it when he travels, at conferences, and meetings. I went down a rabbit hole looking at his wonderful notes and thought to myself, "I think I can do this, or at least I want to give it a try." So I started practicing. I did it at that South by Southwest I attended, as well as local meetups and meetings at work, and I totally fell in love with it.

00:01:56.799 As I was preparing for this talk and going through the archives trying to find some of my first sketchnotes, I found these. These were my very first sketchnotes, and they might be kind of hard to read. The first speaker I saw was actually DHH. I had no idea who he was back then—like what is this 37 Signals? Sketchnotes have changed a lot since then.

00:02:10.640 Get ready for some eye candy: these are some notes by Paul Superset, one of my favorites. I really love his handwriting. Veronica Herb likes to incorporate illustrations into her notes—she has a really playful style. Sasha Chua, who’s from Toronto, attends a lot of tech talks and captures significant content in her notes. She actually uses a tablet PC and a stylus. There’s a lot of dense content here, but you can still tell what’s going on because she highlights the key points.

00:02:32.319 You can also use an iPad with various apps for note-taking, like Daniel Kirsch. He creates super condensed simplified notes. I love the pops of color while still getting the main points across. So there are a couple of different ways that you can take notes: there's live sketchnoting and there’s later sketchnoting. Live sketchnoting involves taking notes at the same time that the presentation is happening—you’re doing it in the moment.

00:03:02.720 Later sketchnoting is where you might jot down some bullet points—maybe using your computer or another piece of paper—and then go back to your sketchbook later and draw them out. I prefer to do live sketchnoting because I'm a developer. I like to keep things dry. I don't want to repeat myself; when the talk is done, my notes are done, too. I can immediately share them and then move on to enjoy the next talk. For the rest of this talk, the techniques I'm going to discuss mostly refer to live sketchnoting.

00:03:43.760 So why do we want to sketchnote? Firstly, I think there's inspiration in analog processes. Taking yourself out of your computer—since we're all developers and spend a lot of time on our gadgets—allows for a change of perspective. Spending some time with just good old pen and paper helps you see things differently. While slowing down, you can clarify ideas you already have and maybe come up with some new ones.

00:04:04.640 Some famous sketchers who did it without it being their profession include Da Vinci, Kurt Vonnegut, Darwin, and Freud. They all used sketching to help clarify their ideas. Sketchnoting also allows you to focus. How many of you have been in a meeting with your computer, and you quickly checked email or maybe someone IMs you about a bug in production that needs fixing right now? The computer can be a rabbit hole of distractions.

00:04:36.559 When I sketchnote, I try to put those distractions away. I usually keep my phone out in case I need to look up unfamiliar words, but all I have is my sketchbook and my pen while I’m actively listening. Once you're on the computer, way too much stuff can come up, and I really like stepping away from that. Sketchnoting also helps improve your memory. There's a concept called the dual coding theory proposed by Alan Pavio. This theory states that we process information in two distinct ways—using both verbal and visual information. By utilizing both, you enhance your chances of remembering the content later.

00:06:06.720 So when sketchnoting, you can use visual elements, employ your handwriting, and hopefully increase your chances of remembering the content you captured. Everything I've mentioned primed your boss to believe you're not just doodling in meetings. The real reason to sketchnote is that it’s just fun. I love talking about it; people enjoy looking at notes, and I like reviewing my own. It's a great practice! I don’t need an excuse to sketchnote—I seek out ways to do it whenever I can.

00:06:51.760 So let's get to the good stuff. You may be thinking, "Jess, I can't draw!" I hear this all the time, and it’s one of the reasons I’m giving this talk today. I'm going to debunk this notion in one slide. What do you see here? We have some simple shapes. If you can draw any of these shapes, then you can sketch them. If you can’t, please come find me—I’m willing to take the time to practice with you.

00:07:18.880 Practicing is how you learn to sketch! You can use lines and arrows to connect ideas, and boxes and clouds to add emphasis. Those shapes also form the basis for creating illustrations or icons. These fundamental building blocks are all you need. You’ll also need some tools for your sketchnoting. I call this my sketchnoting config file. I prefer using a plain sketchbook—I use a Moleskine, preferably one with heavy paper because I tend to go on a bit heavy with my writing. I don’t want it to bleed.

00:07:56.720 I mostly use a Uni-ball pen for writing, as it’s smooth. Some prefer gel pens, and I have other art pens for bolder notes. I've been using a Faber-Castell artist pen for shading. Choose what works best for you. Many people like to start with grid paper, as it helps keep everything in line if you're worried about writing straight. Of course, as I mentioned earlier, you can use various electronic devices—you know, if that makes you feel better, go for it with an iPad.

00:08:53.440 Here are some sketchnotes demonstrating those building blocks. You can see a cloud, arrows, lines, and boxes—essentially, that’s all you need. Now, how do you actually do this? For this, I’ll turn to one of my favorite poets, Mary Oliver, who wrote in her poem, "Instructions for Living a Life": Pay attention, be astonished, tell about it. When I read this poem recently, I thought it offered excellent advice for sketchnoting as well.

00:09:38.880 So how do we pay attention? The very first thing I want to tell you about sketchnoting is that it's not about drawing—it's about listening. It requires active listening to focus on what the speaker is saying. Sketchnoting helps you hone in on the important parts of a presentation. Listening is different from thinking. Sometimes, while the speaker addresses a controversial topic, other ideas may spring to mind while they're speaking. You don’t want your emotional reactions to impede capturing content.

00:10:23.520 If you disagree or think of a different idea, like wishing the speaker had said something else, you don’t want that to interfere with focusing on what the speaker is saying. Let the emotions come later. I also advise following the speaker and not their slides. We live in an age where most speakers graciously provide their slides later online, so you can refer back to them if needed.

00:10:44.000 Most of the valuable insights won’t be on the slides, though—they’ll be in the speaker’s words. You have a moment to be present in the session and truly hear what they say. Knowing the speaker's style can help you plan your notes. I've attended enough tech conferences to have a sense of what to expect.

00:11:43.440 If DHH is on stage, it's likely to be vibrant, colorful, and contemplative. Aaron Patterson loves storytelling, often lacing his talks with humorous elements. Glenn Vandenberg is a great storyteller who maintains a linear format. As you practice, you will notice these styles more easily.

00:12:29.520 Follow the speaker’s body language and speech patterns, and tune in to their dramatic pauses. This allows you to slow down and fully process what they're conveying. Now, how do you listen for key points? It’s not always easy and requires multitasking. Firstly, avoid summarizing everything. When you first start sketchnoting, it’s tempting to get everything on paper; you don't want to miss anything. But you have to let that go.

00:13:06.240 The title of the talk is your first cue about the critical content. However, it isn’t always accurate. Sometimes the speaker will give you a heads-up on their content, outlining what they will discuss on the opening slide. But you can’t always rely on that. One tip I give people is: if you were taking notes without sketching, what would you tweet about? Focus on what truly stands out; that’s what you want to capture.

00:13:45.600 Now, we're at a technical conference with developers eager to implement sketchnoting. My advice for situations involving demos and live coding: don’t sketch them. I’ve tried, and it's very challenging to sketch code samples. Plus, they can often look boring because, well, it’s just code. However, you can sketchnote during a demo by listening for valuable insights being shared, as there's usually a reason for someone to showcase something.

00:14:25.440 They want to compare something better to something else or guide you through a problem-solving exercise. Often, this can include mentioning code libraries, gems, or plugins that you might not have heard of before. I usually jot down these items to look up later.

00:14:44.400 Capture pros and cons when a speaker shares significant differentiators. It’s virtually impossible to write as quickly as someone speaks, so you'll need a backup plan! I recommend carrying around scratch paper; I find using Post-it notes to jot down quick ideas works great if you can’t keep up with the speaker. Additionally, there are often pauses between main ideas, and those moments provide excellent opportunities to fill in any earlier gaps.

00:15:34.880 You can also use Post-it notes as placeholders for a thought while waiting for the connection between ideas. Sometimes a speaker presents a problem and talks about the solution later; you’ll want to hold on to that thought. It’s a good idea to avoid committing to an idea immediately; something better may come up shortly after, so a Post-it can serve as a temporary note.

00:15:44.400 It's also crucial to be astonished! You might want to share your notes with the world and show them to others, but ultimately, your notes are for you. You should capture what stands out to you in the moment, not worry about what anyone else thinks. Feel free to fill in gaps and add your own notes in the margins. I used to worry about capturing what a speaker said exactly as they said it; I didn't want to misrepresent their words. However, I learned to let that go.

00:16:39.440 The key is interpreting what they say in your own light. This is important because everyone can attend the same talk and walk away with different understanding. Here are some sketchnotes by Carolyn Sewell at Brooklyn Beta of a talk by Tim O'Reilly. I went to the same talk, and my notes were vastly different.

00:17:40.800 Other fun things to capture include jokes, quotes, and any exclamatory elements if the speaker is humorous. Capturing a joke adds depth to your notes, allowing them to evoke laughter when you revisit them. Exaggerations or curses are often used for emphasis, which usually indicates something important. If you want vibrant notes, I suggest reviewing all of DHH's previous talks.

00:18:20.320 Listen for quotable moments when a speaker takes a pause, or when they repeat a phrase. Pay attention to the metaphors and similes; they provide you the chance to visualize ideas as the speaker conveys them. When a speaker provides a comparison—"this is like that"—you should create an image that captures that concept in your notes.

00:19:28.240 Moving on to linguistic elements, these notes belong to Aaron Hawkins; clearly, this talk was fun. Another strategy is to develop your visual language. It's essentially about creating a system to remind you of specific ideas during a talk. For instance, you can use quote marks for direct quotes or bubbles to represent questions you want to explore later.

00:20:50.640 You can personalize symbols, like using an eye and circle for info or tips. I read on a blog about a girl who encloses book titles in drawings of books. That way, when scanning through her notes, she can quickly find the books she wants to buy. You can see Eve a lot of Lamb’s notes with highlighted quotes everywhere, making it easier to identify direct quotes from the speaker.

00:21:34.560 There will be talks where the content might be challenging and not stick. In those instances, it’s okay to struggle, because sometimes you just have to be present. The final step is to share what you’ve learned. I believe sharing your notes is a great way to keep the dialogue alive after a presentation.

00:22:08.880 I primarily use Twitter for sharing my notes. I always use the conference hashtag and mention the speaker. You can also upload them to platforms like Flickr, Instagram, or Dribbble. There's a blog called Sketchnote Army run by Mike Rohde; he accepts submissions via Twitter or email. He’s also gathered a committee of people who browse the internet for sketchnotes shared on platforms like Flickr or Twitter to feature on his blog.

00:23:12.080 I highly encourage sharing your notes, as speakers appreciate it. I didn’t realize this was valuable until last year when I started publishing my notes. I received feedback from people expressing their gratitude and it felt nice to see that my notes could have an impact. It helps create artifacts of the talk and keep the conversation alive afterward.

00:24:01.679 Lastly, sketch notes are a good way to thank the speaker and demonstrate that you were there and truly engaged in listening. You might find it's interesting how many insights you capture that the speaker didn’t realize were significant. By sharing your notes, you provide feedback that it was, indeed, valuable information.

00:25:01.440 Your boss will surely be impressed with your sketchnotes. It's likely no one else in your meeting is sketchnoting, capturing diverse ideas and enhancing team dialogue while brainstorming solutions to challenges. Sketch notes add diversity to the conversation.

00:25:26.000 This isn’t all; there are practical tips I can pass on. Firstly, get comfortable. Arrive early for a meeting or talk to find a good seat, as the aisle seats can be too disruptive.