1. Before we start...
Draw a picture of yourself on a sticky note
Put your name on it
Rate your sketching confidence & 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 confident in
the idea (mistakes/over-drawings are fine, 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 fly’ 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 fly’
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 effects 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 first, then come back to it and refine 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/finesse (high = relevant, low = less important)
Use low-fi sketches of the whole thing and ‘pull out’ the detail
60. Search for new batman film / View official 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 effect (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
(confident lines)
Hide your mistakes
Use the edge of the
Knock off the rough edges (once you’re confident it’s right) pen as well as the tip
Use a thicker pen
Don’t overdo it
72. A few flourishes and the rest basic
Learn (by practicing) how to make one or two stylistic flourishes 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 difference)
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 flourishes we’ve just looked at
Try to fill 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 first, 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