This workshop focuses on basic sketching skills for user experience, with an emphasis on sketching users in context.

1. Sharpie
UX
LEAH BULEY | FLUXIBLE 2013

2. How I Learned to
Fake Being a
Sketcher—And
How You Can Too
or

3. Graphic Recording

4. Sketchnotes

5. Good Magazine

6. Obsessive Consumption Blog

7. The Universe of Sketches

8. AGENDA
2:15-2:30 Intro
2:30-3:15 Confidence Games
3:15-3:45 Sketching The User
3:45-4:15 Sketching Product Ideas
4:15-4:45 Sketching User Experiences
4:45-5:15 Validating With Sketches

9. Confidence Games
PART 1

10. Exercise

11. INSTRUCTIONS
1. Spend 2 minutes
drawing this image

12. INSTRUCTIONS
1. Spend 2 minutes
drawing this image
2. Now, spend 2
minutes drawing
this image

13. 1. Use markers and pens, not pencils;
be fast, not
2. Our :
if you mess up, keep going
3. If you really mess up,
grab a new page
perfect
Rules of Thumb
for Pen & Paper

14. Tools for Sketching
Start Here
I’m important!
Background /
depth
Complex shapes

15. To Create Gray Effect
Warm
Gray
Hatching
Stippling

16. INSTRUCTIONS
1. Fill a page with
overlapping rectangles
using the thing end of
the sharpie
2. Hold the page up for
everyone to see
3. Pass it to your neighbor,
then choose one
rectangle and color it
yellow
4. Pass it to your neighbor,
then outline 3-4
rectangles with the fat
end of the sharpie
5. One more pass! Shade in
3-4 rectangles with
hatching or stippling ...
or add some shadows

17. Sketching
the User
PART 2

18. Sketching Facial Expressions
Eyes & Mouth
Eyes &
Mouth
Eyebrows
Eyebrows &
Mouth
Face Shape
Calm Happy Sad Mad/Disgusted
Neutral Worried Angry Surprised Angry
Surprised
Worry
Surprised
Why the
long face?
Creepy

19. Sketching Simple Bodies
Swoosh
People
Bell
People
Clothespin
People
Star
People

20. Making Bodies Expressive
Point of
Focus
Surprised
or Averse
Withdrawn
or Sad
Neutral Engaged
or Aggressive
Thoughtful
or Questioning

21. Overlapping Shapes

22. From the Usborne Art Ideas Big Book of Things to Draw

23. Artist’s Manikin

24. Artist’s Manikin
point of
focus

25. Artist’s Manikin

26. Exercise

27. But first, think
about a bad habit

28. INSTRUCTIONS
1. Do a rough “overlapping
shapes” sketch of this
manikin
2. Trace back over your
rough sketch, and turn it
into a semi-realistic
sketch of your bad habit
in action.
3. Be sure to give the
sketch a facial
expression.

29. Sketching
Product Ideas
PART 3

30. Header
Tab
User
Picture
Photo
Video
Filler text
Pop-up
Module
Arrows
Larger ones can
communicate weight,
or act as labels
Side-scrolling Module
Drop Shadows
Communicate depth and
bring attention to callouts
or popup boxes
Calendar
Page curl
Mouse Cursor
Quietly indicates a
rollover state
Callouts
Can show alerts,
help, guidance or
sketch annotations
Interface Elements

31. Highlighting
Sketches by Rachel Graves

32. Warm GraySketchesbyRachelGraves

33. Line Weight

34. The Magical 6-Up Template

35. INSTRUCTIONS
1. Draw 6 boxes on a page.
2. Sketch 6 mutally
independent ideas for
products or interfaces
that could help with your
bad habit.
IDEA 1 IDEA 2 IDEA 3
IDEA 4 IDEA 5 IDEA 6

36. Sketching to Refine an Idea

37. INSTRUCTIONS
1. Pick your favorite idea (or
combination of ideas)
from your 6-up template
2. Re-sketch it in more
detail on a new pageFAVORITE IDEA

38. Sketching
User Experiences
PART 4

39. Basic Elements of Shape
from Drawing With Children by Mona Brooks
Dots Circles Lines Angled Lines Curved Lines

40. Circle!
Line!
Dot!
Angled !
Line!
Curved!
Lines!

41. Lines!
Line!
Circle!
Curved Lines!
Angled Lines!
Image from placeit.breezi.com

42. INSTRUCTIONS
1. Sketch this image.
2. Look for lines, circles,
dots, angled lines, and
curved lines.
3. Add your favorite idea
from your 6 up to the
mobile phone
You have 5 minutes.

43. INSTRUCTIONS
1. Do it again.
This time, you have 2
minutes

44. INSTRUCTIONS
1. Do it again.
This time, you have 30
seconds

45. thosepeskyusers.com/ux-storyboarding-tip-using-omnigraffle/

46. Storyboard Template

47. Start by showing the context or
problem in the first few panels

48. Next, show how the solution
would work (high level)

49. Show the outcome or positive
effect in final panels

50. Exercise

51. INSTRUCTIONS
1. Draw a storyboard that
shows how your concept
would fit into your life
and help you with your
bad habits
2. In the first few panels,
show the bad habit in
action
3. In the middle panels,
show the product
solution
4. In the final few panels,
show positive effect

52. Validating &
Improving Through
Sketches
PART 5

53. Edward De Bono’s 6 Thinking Hats
Discernment
Process Emotions
CreativityOptimism
Information

54. Black Hat Session

55. INSTRUCTIONS
1. Share your 1-up sketch
and your storyboard
with a partner
2. Partner, take a minute to
say what you like about
the idea
3. Now, both of you, look at
the 1-up sketch and
storyboard, and think
about what you don’t
like about it
4. Place a sticky note for
every issue you see or
concern you have

56. INSTRUCTIONS
1. Switch and repeat

58. Pro Tips for UX Sketching
1. Have nice pens and pencils.
2. Trace. Copy. Steal.
3. Find a font you like and practice tracing it.
4. Use interface templates and 6 up templates.
5. When in doubt, give it a thick outline.
6. Keep a sketchbook.

59. RESOURCES
Books
An Illustrated Life, by Danny Gregory
Drawing With Children, by Mona Brooks
Drawing on the Right Side of the Brain, by Betty Edwards
The Big Book of Realistic Drawing Secrets, by Carrie Stuart Parks & Rick Parks
Cartooning: Philosophy and Practice, by Ivan Brunetti
Drawing Lab for Mixed-Media Artists, by Carla Sonheim
Me
leah_buley@intuit.com
www.uxteamofone.com
www.leahbuley.com
@ugleah

60. uxteamofone.com
discount code FLUXIBLEBULEY for 20% off