Updated version of my original Sketching Interfaces workshop - presented at Google (London) in June 2012

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

2. NAUGHTY LITTLE SCAMPS
The ‘art’ of sketching

5. There’s a lot of buzz about sketching ...

6. ... so isn’t it surprising how few digital
designers are comfortable with what
is essentially a core design skill?

7. We’ve got a couple of hours either side
of lunch. We’re not miracle workers, but
we can try to put you on the right path.
H0 2 CH02 6

9. Anatomy of a sketch

10. Line up
At a fundamental level, sketches are made up of lines
(and a little bit of shading, but that’s just more lines, right?)

11. Basic line technique
Smooth action
Start light, then build up thickness

12. Basic line technique
Go further than you need to
Don’t panic if you don’t quite make it

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

15. Are you sitting comfortably?

16. If you're not comfortable, you won't sketch well
If you can, spread out
Find your angle
Have your stuff in reach
Light is important

17. Warm up
Parallel lines
Intersecting lines
Squares
Squares in squares

19. Smooth action
Go further than you need to
Don’t panic if you don’t quite make it
Start light, then build up thickness

20. What is a sketch (and what is not)?

27. <opinion><rant>

28. “Wiggly Wireframes” (not a sketch)

29. Hand-drawn wireframes (not a sketch)

30. </rant></opinion>

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)

32. Why Sketch?

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)

34. On the fly sketches

35. On the fly sketches
On the fly sketches
Via: Shades of Grey: Thoughts on Sketching
by Will Evans

36. Pretty sketches

37. Live sketches

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’

40. Example: sketch and text working in tandem

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)

42. “Like sign-language, but more better”

44. Grab a coffee and a snack
Back here in 15 mins

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?

48. Tools of the Trade

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

52. The devil is in the
(lack of) detail

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)

54. Can you tell what it is yet?

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

59. Activity 3: Focus
Show me just as much as you need to

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

61. Give us a clue (Labelling)

62. Good labels saved many a bad sketch

63. Copyright © Night Beacon (www.taehok.com)

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)

65. Activity 4: Writing
AAAAA
AN ARMY OF ANTS
ANNOTATE

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.

68. A sketch not a scribble

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

71. Through thin and thick

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)

74. Hands can be a right bugger ...

75. ... but they don’t have to be

76. sometimes you don’t even need to draw a hand

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.

79. Best of both worlds?

80. Best of both worlds?

81. Activity 5: Adding style
Hands / Shading / Lettering / Arrows

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

83. Sketching Interaction

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)

88. Activity 6: Interaction
Show me:
What happens?
How is it initiated?

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

91. Thank You
Sam (@pub)
Jason (@jasonmesut)

92. RMA
Design Driven Innovation