Ever taken a step back from the computer, tablet, or smartphone and captured notes on paper?
We all have plenty of fancy tools, devices and apps, and yet jotting down verbatim online still seems to lack the appeal of loosely scrawling something down on paper with a sharpie.
That’s why I’ve put together this guide on sketch noting for web designers: to show how a hands-on way of capturing notes with simple pictures can enhance your own understanding.
“Sketchbooks are not about being a good artist, they’re about being a good thinker” - Jason Santa Maria
Below you’ll see why sketch noting is a useful tool for web designers and how it can be used to filter information. I’ll also go through the basic building blocks of sketch noting and some specific techniques as a takeaway.
Filtering Information
Your sketch notes are not for everyone else. They’re for you! That’s the best part about it.
You can draw exactly what you see or are shown, but you can also draw what makes sense to you. Whatever helps you remember and understand the topic more clearly. Sketching with a sharpie is also a bit of fun if the topic you’re trying to capture is dry.
You’ll often meet clients in industries you’ve never come across before, so sketch noting the information that they give you can help visually connect the dots and make sense of things.
Sketch noting can help you capture and filter the information in a unique way that you will understand.
Building Blocks
Now for some of the building blocks of sketch noting. Let’s look at some of the building blocks.
The Language
Typography is effectively whatever notes that you jot down. You’re doing this already! Good start.
The Pictures
Objects and people are best represented in pictures. You can give your illustrations a lot more personality, making it more likely you’ll remember what you’re putting down on paper. You don’t need to be a good illustrator, stick figures will do! Just keep at it. You’ll see your skills improve over time.
The Structure
Now, link it up together using frames, connectors, bullets and dividers. This will give everything some structure. If you’ve ever seen a mind map before you’ll get the gist of it. If you have time you can even do a bit of practice.
Techniques & Takeaways
The first exercise you can do is to find a picture of a kitchen utensil, chair, car.. anything that is simple to draw. Use a sharpie (not a pencil). Then practice.. Try one minute first, then 30 seconds. See the difference in detail each time you sketch.
And then you might find a video online... practice...Listen, understand, draw.
Other Tips & Tricks
- Use numbers or dividers and connectors to show flow
- Highlight key quotes
- Be literal, draw exactly what you see or are shown
- Illustrating the word(s) you hear, only add words later
- Use metaphors or translate what you hear into what it means to you
Conclusion
Sketch loosely.. don’t worry too much about rubbing stuff out. You can be as quirky as you want. Move quickly and don’t be afraid to capture ideas in your own way. As a web designer you can bridge the gap between creativity in your early note taking to any story boarding and even wireframes later. In my experience, moving from electronic note taking to sharpies and paper will help you also think more in a UX frame of mind.
Did you find this blog post helpful? If so share it with your friends and followers on LinkedIn, Facebook, Twitter, Google Plus+ etc!
Resources
- Visual Note Taking by Eva-Lotta Lamm
- How to create awesome visual notes by Matthew Magain
- The Sketch note Handbook by Mike Rohde
- The Doodle Revolution by Sunni Brown
- The Verbal To Visual Notebook by Doug Neill
