Sketchnoting Talk at WebExpo 2010 in Prague

What is it?

Note taking is about capturing a line of thoughts (from a talk, a video, a book or your own head) to be able to go back to it later and remember the points that are interesting to you.

And instead of capturing in pages and pages of written word, sketchnotes are a visual style of note taking that allows for all kinds of visual expression to create richer and more engaging notes. (I’ll get to the building blocks later.)

How I came to Sketchnotes

For me personally, I take notes, because I have a really bad memory.
If I want to remember things, I have to note them down.
The problem with mere written notes for me is though…

…. they are too boring and not really interesting enough to go back to and look at again.

I have to interest myself in my own notes and make them interesting and engaging enough for me to want to look at them again.

Back in school

When I think back at my time at school, I think I have been sketchnoting for almost as long as I took notes.
I was doodling in my excercise books in school, creating playful typography for headings of new subjects and trying to structure notes by using decorative bullets, border, arrows and other graphic elements.
I didn’t really do that on purpose or with a plan, but more because it was fun and felt more interesting than just writing things down.

First conference

When I went to my first web design conference in 2007, I started to taking notes which eventually got more and more visual over the next couple of years.

Sketchnotes aren’t new.

Artists and designers have captured their thoughts in a visual way for centuries.
Here is an example of two pages of notes by Leonardo Da Vinci, drawn around.

People who did a traditional course in design are probably very familiar with keeping a sketchbook for their ideas, notes and designs.
But people with a more technical or theoretical background are probably less familiar with the idea of keeping a sketchbook.

In the last few years, there has been quite a bit of interest in sketching and visual thinking as a tool within the web design and UX community.

And over the last year, the sketchnoting bug has spread in the webdesign community and quite a few people are now posting their notes to flickr.

And there are all kinds and styles of notes.
Some are rougher and sketchier (Notes by Jason Mesut, Kai Chan Vong, Jay Freshuk). And some are really neat and tidy (Notes by David Potsiadlo).

But the great thing is that it doesn’t matter if you are great at drawing or not.
To say it with the words of Jason Santa Maria’s words:

“Sketchbooks are NOT about being a good artist, they’re about being a good thinker.”

And the same is true for sketchnotes. They are NOT about being a good artist, but about being a good (visual) thinker and – for the note taking part – a good listener. We’ll get to the bit of overcoming of “not being an artist” a little bit later.

Characteristics of Sketchnotes

So what are the characteristics of sketchnotes that make them a great tool for capturing talks, books or any stream of thoughts and also a great opportunity for designers to practice quite a few design skills?

Let’s have a closer look!

Non-linear

Sketchnotes can be non-linear and allow to arrange things next to each other. They help to discover and highlight patterns and connections in the content.

Flow
These are notes from the book “Flow” by Mihaly Cziksentmihalyi. This is the original content order in the book spread over several pages.

Now in the structure of the notes, there are several possible reading axises. creating the notes revealed a pattern / structure that was ‘hidden’ in the linear form of the book.

Discussion panel
Interesting notes from Austin Kleon from a discussion panel. You can read them by speaker. Or by topic.

Visual Hierarchy

It’s easy to create visual hierarchy in the notes by using different sizes and treatment of type, using colour and drawings as “visual hooks”.
Makes it easier for the eye to scan a page of notes and find interesting bits and explore from there.

Typography
Visual hierarchy through typography (different sizes and weights) and dividers within the text.
(Notes by Mike Rohde from SEED conference)

Colour
Visual hierarchy through colour.
(Notes by Austin Kleon)

“Visual hooks”
Visual hierarchy through “visual hooks”, whitespace, frames and dividers.
“Visual hooks” can be images, bullets, graphics, dividers, things that look interesting so that the eye is drawn to them.
(Notes by Jessica Esch)
(Notes by Amanda Jahn, Example for hierarchy by colour and visual hooks)

Mnemonic devices

Mnemonic devices are memory or learning aids.
They are used to reorganise information so that it becomes simpler and more meaningful and can therefore be more easily remembered.
Visual mnemonic devices link unfamiliar information to a familiar visual representation that can be recalled more easily.

The “Picture Superiority Effect”

Pictures are generally more easily recognised and recalled than words. Pictures and Words together have an even better recall rate than only pictures. By supporting pictures with textual labels and explanations you can create optimal recall.

The picture superiority effect is strongest when the picture is showing concrete things and when the information is not too complex.

In some respect this effect is not surprising when we look at how our brain actually processes the flood of sensory information that streams in all the time.

The cerebral cortex

Processing of sensory information takes place in the cerebral cortex, which is the outermost layer of the brain – and which is responsible for all the key things that distinguish us humans from other species – like memory, attention, perceptual awareness, thought, language, and consciousness.

In preserved brains, it has a gray color, that’s where the expression “gray matter” or “Graue Zellen” stems from.

If we look at the neurons in the sensory area of our cerebral cortex we can see that about 75% of the neurons are dedicated to processing visual information, and only the remaining 25% are dedicated to our other senses like hearing, touch, smell and taste.

Dual coding theory

Another theory that can help us understand why images are so powerful is called Gual Coding Theory, first advanced by Allan Paivio in the 1970s. According to Paivio, visual and verbal information are processed differently and in distinct channels.

Images are analogue codes, while the verbal representation of words are symbolic codes.
Images are directly linked to our perception, how we see things, while symbolic codes have an added layer of abstraction through the arbitrary code that has been chosen to represent a thing.

Problem with this symbolic layer is that the code has to be learned in order to be able to understand. We are probably all experiencing and overcoming this layer second layer of abstraction at the moment. English is not my mother tongue and where I come from, I would use this word “Apfel” to describe what’s shown here. And most of you would probably use this “Jablko” and so on.

On the other hand the symbolic layer allows us to be much more precise and than we can on the symbolic layer. It would very difficult to represent this level of distinction in a simple picture without using photographs and probably even then, most people wouldn’t be able to correctly distinguishing the different apple varieties.

And language also allows us to think and express more abstract concepts that go beyond actual objects and things that we can see and touch.

The dual coding theory also provides us with an explanation why the image and word combination is even more powerful than pictures alone. As analogue and symbolic codes are processed in two different channel, we are very good at processing verbal and visual information at the same time, like for example when watching a nature documentary, we can follow the images of birds building a nest and listen to the explanations of the particular species of birds from the voice in the off at the same time. Each channel also has its limitations. Our ability to process multiple visual inputs or multiple verbal inputs at the same time is very limited. That’s why reading a book and listening to a conversation at the same time doesn’t really work.

Realtime processing

Note taking happens in realtime. Even if you are fast, you can never capture everything, therefore you have to make a selection of the things that resonate with you, that make sense and interest you.

By condensing the information into short notes and by visualising certain concepts, you already analyse and interpret the content. You mentally dissect it and reassemble it on the page. This interaction with the content anchors it much deeper in the mind than only passive listening.

Concentration

There is a common perception that doodling distracts you from listening.
The opposite is actually the case.

The brain is designed to constantly process information. When the brain lacks stimulating information, it doesn’t become less active but instead, produces ‘information’ itself. The mind starts to wander. Typically what happens in this situation is that the brain ends up manufacturing its own material. In other words, the brain turns to daydreams and fantasies. But those daydreams take up an enormous amount of energy.
According to a recent study, doodling can provide just enough cognitive stimulation during an otherwise boring task to prevent the mind from taking the more radical step of totally opting out of the situation and running off into a fantasy world.
When presented with a recording of rather dry facts, participants of a study who were given a doodling task while listening recalled 28% more facts correctly than participants who didn’t doodle.

Fun

if a talk is not THAT interesting, you can still have a bit of fun and keep yourself entertained (and keep your concentration up by doodling ;)

Building Blocks

The pictures (Objects, people)
You can draw basically anything when you can draw these basic shapes.

The language (words, lettering)
There are some many ways to write. Play around with your handwriting. These are just some examples from a search for “handwritten” on myfonts.com

You can also have some fun with more decorative lettering for titles and main points. Here are some examples of some titles from my own sketchnotes and some by Mike Rohde.

Inspiration is everywhere: Hand lettering artists like Nate Williams (www.n8w.com) or Alison Carmichael (www.alisoncarmichael.com)

The type on the Superhero illustrations on “The Superest” blog by Kevin Cornell and Matthew Sutter (www.thesuperest.com)

The structure (frames, connectors, bullets, dividers)
You can create your own visual arsenal of ‘cliparts’ to give your notes clear structure.

Materials

A spiral note book with nice thick blank pages.

I tried out lots of different types of sketchbooks. Soft covers, hard covers, Moleskines, but spiral bound books are just the best for sketching when you don’t have a table in front of you. You can fold the page over completely and end up with a nice compact block to sketch on. Perfect.

In terms of size, you also have to look around what is right for you. Again, Moleskines were tempting because they have a great compact format, but I found them too small for me. Everybody has a ‘natural’ size to their drawings and doodles – and mine is just a tad too big for a Moleskine.

My favourite pen:
Pilot Hi-Tec-C 0.3
Super thin. Lovely for small writing and line drawings.

My other favourite pens:
MUJI pens

Not as thin as the pilot, but great for any king of writing and drawing. They have a great flow to them and they come in all kinds of colours! Great for choosing some cool colour combinations for your notes.

Some thicker felt pens in highlight colors. Always handy to colour in some bigger areas quickly.

My little colour game
For every meeting I go to at work, I grab a set of 2 or 3 random colours to use for my notes (and doodles) of the meeting. Like that I try out colour combinations I wouldn’t have otherwise and the results are sometime quite nice.

Markers
And, the magic weapon for creating a bit of depth: light grey markers for quick and easy shadows.

They are great to add subtle shadows to objects and give a bit of depth and dimension to your notes.
Examples by Craighton Berman a.k. “Fueled by coffee” (fueledbycoffee.tumblr.com)

But beware….

… markers can (and will) bleed.
Which can be nice if it’s deliberate…
…like the Bleeding Art by Daniel Eatock.
But not that nice if it just stains the notes on the back of the page.

Why designers should sketchnote

We can use sketching…

…to remember
We had a very good look at that already and it should be clear that sketching can really help us remember things better.

…to understand
As designers we need to be able to first understand a problem, which is often complex and has different aspects and layers. Often, sketching out a problem or a system can help us to understand which elements it is made of and how they are related.

…to explain
Be able to paint a full picture of the situation and to visualise our thinking.
Explain what we learned and share our insights with others.

…to create
Use sketching to explore possible solutions and
to make something come to live that hasn’t existed before.

The particular strength of a designer is to be able to support our thinking though drawing and sketching and to communicate out ideas in a visual way. Visual thinking is a powerful tool that designers should be absolute experts in.

Visual note taking, or sketchnoting, is a great way to practice all the necessary skills. Not only the drawing skills, but first and foremost skills like listening, processing information in realtime, filtering out important points, spotting relationships between bits of information.

Why not sketchnote?

“I can’t draw!”

“Yes you can!”
Let’s look at some basic principles of drawing to get you started right away.

How to draw a stick figure

Start with the body (the center of gravity).
The shape and position of the body contains a lot of the person’s expressions (you don’t need to see the facial expression to see what someone feels like).
Then the legs (and the floor they stand on)…
…and the arms.
Remember people don’t have sticks as legs and arms. There are knees and elbows. Even if you don’t ‘need’ them to draw the position of you figure, think of them when you are drawing.
And the head at last. 
The position of the head in relation to the body emphasises the person’s expression
Accessorise.

More resources

A great source for training your basic drawing skills are Illustrator Ed Emberley’s drawing books like “Make a world” that show step by step drawing of everyday things and people by assembling basic shapes.

Also check out the excellent basic drawing videos on Dave Gray’s site (www.davegrayinfo.com/category/videos/).

“I don’t know what to draw!”

This seems to be quite an issue for people who are new to visual thinking or visual note taking.
A big part of our information intake and processing is done on the abstract level of words, either spoken or written.
So the question is how do we get this information off the abstract highway onto the visual one.

Thinking in images is an ability that we all have in us, a bit like our muscles. We all have them but, when we neglect to train them, it feels quite hard and awkward in the beginning when we start using and stretching certain muscles again that we didn’t use much for a while.
But it also means that we can train our visual thinking muscles and when we do so, they get stronger and stronger, which is great.

Some strategies

Be literal
Copy slides / examples that are shown.
Portrait of speaker

Illustrate
Take single words in what was said and draw them.
Have fun with typography when no images come to mind

Interpret
Interpret the content more freely.
Find visual metaphors.
Draw associations that come up when listening

“Learn Something Every Day” by Manchester based design studio Young

http://www.learnsomethingeveryday.co.uk/

Visualisation of random facts.

Practice your visual thinking skills

Use randomness

Tea stain sketches

  1. Make yourself a nice cup of tea.
  2. Place tea bag on a piece of paper (or better a nice sturdy index card). Leave to dry.
  3. Remove the tea bag and look at the stain it left on the paper.
  4. Let yourself inspire by its shape and what you can see in it (a bit like waht you do when watching clouds on a summer’s day).
  5. Draw some details to make the stain come alive.

Examples
Tea sketches by Dave Gray and by Austin Kleon
Tape sketches by Till Lassmann
Daily monster by Stefan Bucher

http://www.dailymonster.com/

It’s a two way street

When practicing visual thinking skills, it’s not only about translating words into visuals, but also about being able to go back and forth between the two.
We’ve seen that a combination of words and images is the most powerful tool to convey information.
As visual thinkers, we need to be comfortable with both directions: turning words into images and adding deeper levels of meaning to our images by using the right words.

(Re)invent the story

Look at what you are seeing in a different light. What story could the picture tell when you look beyond the obvious. What does the image remind you of?

Some (silly examples)

LOL cats
Well, you know them. They are funny because they add a story to an otherwise rather normal picture of a car.

‘Faces in places’ stories
A little side project of mine. Spotting the faces in everyday objects and coming up with a little story around the character.
They make you look at things in a different way. You can alter people’s perception and understanding of an image by layering a story on top.

Visual improvisation

Simple set of rules

The tea sketch game:
Make tea, place bag on paper, let it dry, make something out of it.

The ‘living things’ game:
Find a face in a place, give the character a name and make a little story that fits into a tweet (including the URL, so about 120 chars max).

Don’t plan. Do.

There is no planned outcome. Accidents are welcome.

Work with what’s there

Use your imagination the material that is there. You don’t need anything more.
There is no good or bad material.

Playful & Fun

Allow your imagination to flow, to play around, to be silly.
You can get more serious later.

Tea Stain Sketch

Unfortunately we don’t have time today to try out some visual improvisation but each of you should have a card with a teastain on it on their chair, so you can improvise a bit later when you feel like it.
I created a teastain group on flickr, so if you feel like sharing your sketch, just upload it to flickr and add it to the group. You can find the link to the group on the back of the card.

Some closing remarks

Before I end my talk, I have just a few closing remarks that I want to share with you.

NO RUBBERS!

Draw with confidence. Live with your lines. If one line is not quite right, set another line on top to correct it.

QUIRKY IS GOOD.

Quirky can be interesting. One sketch on its own might look weird because it’s not perfect, but in combination with all other elements on the page, it works.

MOVE QUICKLY

The good thing about taking sketchnotes is that you are forced to move on quickly.  You have to decide on the fly what’s important and what is not. Don’t hesitate and overthink. Just let it flow.

DON’T BE AFRAID TO MISS THINGS.

Select the things that resonate with you. Use written text to capture details quickly. You can come back to ‘finish’ some of the pictures in less dense parts if the talk.

HAVE A LITTLE FUN.

Let go of the wish for perfection. They are just notes after all.

Resources

Books

My own little book with sketchnotes from two years of design conferences and talks: Sketchnotes 2009/2010

Dan Roam (2008): Back of the Napkin

Ed Emberly (1972): Make a World

Scott McCloud (1999): Understanding Comics

Visual thinkers and Sketchnoters

Dave Gray
http://www.davegrayinfo.com/
http://www.xplane.com/
http://www.flickr.com/people/davegray

Craighton Berman
http://www.craightonberman.com/
http://www.fueledbycoffee.com/
http://www.flickr.com/people/fueledbycoffee/

Austin Kleon
http://www.austinkleon.com/
http://www.flickr.com/people/deathtogutenberg/

Mike Rohde
http://www.rohdesign.com/
http://www.flickr.com/people/rohdesign/
http://sketchnotearmy.com/

Sunni Brown
http://sunnibrown.com/

Brandy Agerbeck
http://www.loosetooth.com/
http://www.flickr.com/photos/loosetooth/

More Sketchnoters on flickr

Lettering artist and illustrators

Nate Williams
www.n8w.com

Alison Carmichael
www.alisoncarmichael.com

Kevin Cornell
http://bearskinrug.co.uk/

The Superest blog
http://www.thesuperest.com

Daniel Eatock (Bleeding Art)
http://www.eatock.com/

Other sources

Visual Mnemonics, Picture Superiority Effect
W. Lidwell, K. Holden and J. Butler (2003): Universal Principles of Design

Doodling enhances concentration
Andrade, J. (2009): What does doodling do? Applied Cognitive Psychology.

Doodling should be encouraged in boring meetings, claims psychologist, guardian.co.uk, 2009

US President’s doodles
All the Presidents’ Doodles – A history in sketches, theatlantic.com, 2006

One response to “Sketchnoting Talk at WebExpo 2010 in Prague

  1. Pingback: Sketchnotes // UX Café

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s