1. Before we start...
Draw a picture of yourself on a sticky note
Put your name on it
Rate your sketching conïŹdence & ability
low = scribbler | high = sketch-master
left = never | right = sketch-a-holic
13. Boxes
If we get away from the idea of a box as a square or a rectangle,
we can start to think about building a sketch as a box containing a
series of other boxes.
So we need to be able to draw boxes. Even if they are invisible.
[invisible box]
14. Tip #1
Start light and build up weight and thickness as you get more conïŹdent in
the idea (mistakes/over-drawings are ïŹne, itâs not a polished drawing)
Tip #2
Do all your verticals at the same time, then your horizontals
Tip #3
Thicker lines can hide mistakes, as well as lending weight and highlighting
31. Sketches do not have to be pretty, beautiful
or even immediately understandable by
others. However, you should be able to
explain your sketches and ideas when
anyone asks about them.
Sketching User Experiences: The Workbook
(Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton)
33. 3 design activities where sketching can be used
Quick âon the ïŹyâ sketches to explain a concept
(to a colleague or client)
âPrettierâ sketches that make it into documentation
âLiveâ sketching sessions in front of others
(presenting/workshops/co-designing)
38. Activity 1: Stand up
You need to be able to do this on a whiteboard
- sketching lines
- drawing boxes
- writing legibly
39. I use sketches as a prop; a visual aid to explanation:
They donât often
work as
standalone
objects
SKETCH
They are They are
supplementary to often
a (written or created as a
verbal) response or
explanation âon the ïŹyâ
41. Why use sketches?
(paraphrasing Bill Buxton and my Dad)
Sketches give you the freedom to make mistakes and think openly
They can be done at speed - explore lots of ideas quickly
You can record ideas without getting lost in the detail
They are easy to discuss, share and critique with others
To have fun (too often forgotten)
45. Sketching on demand
Whether youâre sketching on a whiteboard, in your notebook
or on a napkin, when youâre sketching in front of others:
- You have to be quick
- Youâll need to think about what to leave out
- You can talk people through your sketch
- Youâre not creating a masterpiece but it shouldnât be a scribble
46. Activity 2: Sketch Battle
Sketch a simple concept
Can you tell what it is yet?
Explain your sketch
47. What helped you communicate?
What words and phrases helped to explain a sketch?
Which bits of the sketch did you point to?
What kinds of gestures and sound eïŹects did you use?
49. My Kit
Hard graphite pencil (H or HB)
Blue âno photocopyâ pencil
Good eraser/rubber
Layout pad
Black pens (various thickness/nibs)
Markers for shading and depth
(3 tones only, 20% apart) + 1 colour
Scanner
Pencil sharpener/sharp knife
50. Tip #1
Any pen/paper is better than no pen/paper
(capture the idea ïŹrst, then come back to it and reïŹne it later)
Tip #2
Avoid fancy sketch pads and notebooks if you have a fear of the blank page
(full notebooks and sketchbooks are beautiful, even if their covers arenât)
Tip #3
Donât throw away old pens, but donât just keep using the same one
(sharpie pens are called âsharp-iesâ for a reason)
51. âPens should be avoided unless you are
practiced with themâ
Bill Buxton
âMistakes are ok. Keeping them makes
it a sketch rather than a drawingâ
Sam Smith
53. Sketches as impressionism
As soon as you start to get into detail you are drawing (not sketching) and in danger
of you, and the people you share your sketches with, focusing on the wrong thing.
via: Dane Petersen (thegreatsunra on Flickr)
56. Lorem ipsum dolor sit amet
Pellentesque rhoncus rhoncus arcu, vitae blandit libero ultrices vitae.
Praesent vulputate augue sed justo tempor sed lobortis orci mollis. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Cras in velit at nisl vulputate hendrerit in nec libero.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec iaculis convallis tortor vel tincidunt. Morbi
varius sem ac leo tristique ac gravida erat adipiscing. Sed ac velit et urna
viverra viverra vitae vestibulum tortor. Nullam fringilla commodo
commodo.
Aliquam gravida, nulla eu sagittis tempor, dolor tortor gravida enim,
elementum hendrerit ipsum mi sed nisl. Praesent tristique, erat vel rhoncus
porta, felis velit cursus erat, sed commodo sem lacus semper orci.
Suspendisse potenti. Sed dignissim placerat nisi egestas molestie. In a
dolor at magna molestie rhoncus a vel nulla. In sed varius dolor. Phasellus
quis suscipit leo. Maecenas odio ante, semper a elementum id, ultricies.
57. Lorem ipsum dolor sit amet
I can still read it, even if I canât understand it
Alternatives:
Lines Squiggles
If headers and labels are real text they will stand out
58. Focus on the bits that are relevant
No need to draw the whole thing
Vary the level of detail/ïŹnesse (high = relevant, low = less important)
Use low-ïŹ sketches of the whole thing and âpull outâ the detail
60. Search for new batman ïŹlm / View oïŹcial trailer on YouTube /
âLikeâ video and share / Friends see video on Google+ and view
Think about how to show:
- how the search helped the user
- the device/s used
- interactions
- the output/display
- the knock-on eïŹect (via social media)
Only show as much as you need to
64. A good note is worth a thousand pictures
Labels must be readable (and not just by you)
Donât make me turn my head to read it (stay on the horizontal)
CAPS ARE YOUR FRIENDS (itâs not shouting in a sketch)
Make your guides into part of the label
Donât write it tiny
Take your time (sketch quick, write slower)
66. Activity 4
1. Fill page with horizontal parallel lines
2. Write out the letters of the alphabet (5 each)
AAAAA BBBBB CCCCC
3. Write this sentence (x3)
I will sketch more ideas, more often, with
more people; to better describe high quality
user experiences that will revolutionize the
world.
69. Colour (a little goes a long way)
I canât think of a simpler way to say it.
Donât colour in your sketches.
TIPS:
Stick to 2 colours (3 maximum)
If youâre using greys keep them in the same warm/cool range
Grey tones should be 10% apart
Pick a primary colour and use the other 1 (or 2) in small measures
Use colour sparingly - as a highlight
70. Through thin and thick
Add some depth and interest TIPS:
Remember your
Show where the important parts of the sketch are (focus) line technique
(conïŹdent lines)
Hide your mistakes
Use the edge of the
Knock oïŹ the rough edges (once youâre conïŹdent itâs right) pen as well as the tip
Use a thicker pen
Donât overdo it
72. A few ïŹourishes and the rest basic
Learn (by practicing) how to make one or two stylistic ïŹourishes and apply them
consistently to your sketches to build up a style, and to go from scribble to sketch.
Examples:
Handwriting (it really can make a big diïŹerence)
Lines and frames
Arrows
Hands (for touch-based gestures)
77. âI canât sketchâ
âIf others canât understand your design or
solution by looking at your messy sketches,
youâve wasted your time... If you are unable to
sketch clearly (some people are just more
talented than the others), donât sketch.â
Better Use of Paper in UX Design
Marcin Treder in UX magazine
78. Ulterior motive?
As well as being UX Manager at Nokaut Marcin
Treder is âCo-father and CEO of UXPinâ,
makers of (quite cool) paper prototyping kits.
He likes paper, but doesnât want to encourage
you to sketch if he can
get you to buy one of his kits.
82. Activity 5
1. Practice the ïŹourishes weâve just looked at
Try to ïŹll a page with examples
2. Use one of the examples from the sketch battle or
the batman story and try to combine all three things in
one sketch
87. Beyond the touch-based interaction
The technology is there but it hasnât quite yet penetrated into our default interaction set.
We can rely on a lot of shared knowledge and visual shortcuts when weâre describing
many touch-based interactions, but how do we communicate voice-based search or
camera-recognition technology like GoogleGoggles?
Sketch Sketch
(voice input) (GoogleGoggles)
89. Take-away tips
Get it down ïŹrst, worry about the presentation later
Donât throw sketches away
Mistakes are ok (and can often be hidden)
Donât try to draw everything - focus
Donât get bogged down in doing detail
Keep it consistent
Practice your handwriting
Remember what youâre trying to achieve
Donât hold back - bust out a sketch if you think itâll help
90. See how the experts do it*
Eva-Lotta Lamm - www.evalotta.net
Bill Buxton - http://billbuxton.com
Sunni Brown - http://sunnibrown.com
Mike Rohde - http://rohdesign.com/sketchnotes/
Peiter Buick - http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching
* Then practice until you become one