0
Sharpie
UX 	
  
LEAH BULEY | FLUXIBLE 2013
How I Learned to
Fake Being a
Sketcher—And
How You Can Too
or
Graphic Recording
Sketchnotes
Good Magazine
Obsessive Consumption Blog
The Universe of Sketches
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...
Confidence Games
PART 1
Exercise
INSTRUCTIONS
1.  Spend 2 minutes
drawing this image
INSTRUCTIONS
1.  Spend 2 minutes
drawing this image
2.  Now, spend 2
minutes drawing
this image
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...
Tools for Sketching
Start Here
I’m important!
Background /
depth
Complex shapes
To Create Gray Effect
Warm 

Gray
Hatching
Stippling
INSTRUCTIONS
1.  Fill a page with
overlapping rectangles
using the thing end of
the sharpie
2.  Hold the page up for
every...
Sketching
the User
PART 2
Sketching Facial Expressions
Eyes & Mouth
Eyes &
Mouth
Eyebrows
Eyebrows &
Mouth
Face Shape
Calm Happy Sad Mad/Disgusted
N...
Sketching Simple Bodies
Swoosh
People
Bell
People
Clothespin
People
Star
People
Making Bodies Expressive
Point of
Focus
Surprised
or Averse
Withdrawn
or Sad
Neutral Engaged
or Aggressive
Thoughtful
or Q...
Overlapping Shapes
From the Usborne Art Ideas Big Book of Things to Draw
Artist’s Manikin
Artist’s Manikin
point of
focus
Artist’s Manikin
Exercise
But first, think
about a bad habit	
  
INSTRUCTIONS
1.  Do a rough “overlapping
shapes” sketch of this
manikin
2.  Trace back over your
rough sketch, and turn it...
Sketching
Product Ideas
PART 3
Header
Tab
User
Picture
Photo
Video
Filler text
Pop-up
Module
Arrows
Larger ones can
communicate weight,
or act as labels
...
Highlighting
Sketches by Rachel Graves
Warm GraySketchesbyRachelGraves
Line Weight
The Magical 6-Up Template
INSTRUCTIONS
1.  Draw 6 boxes on a page.
2.  Sketch 6 mutally
independent ideas for
products or interfaces
that could help...
Sketching to Refine an Idea
INSTRUCTIONS
1.  Pick your favorite idea (or
combination of ideas)
from your 6-up template
2.  Re-sketch it in more
detail...
Sketching
User Experiences
PART 4
Basic Elements of Shape
from Drawing With Children by Mona Brooks
Dots Circles Lines Angled Lines Curved Lines
Circle!
Line!
Dot!
Angled !
Line!
Curved!
Lines!
Lines!
Line!
Circle!
Curved Lines!
Angled Lines!
Image from placeit.breezi.com
INSTRUCTIONS
1.  Sketch this image.
2.  Look for lines, circles,
dots, angled lines, and
curved lines.
3.  Add your favori...
INSTRUCTIONS
1.  Do it again.
This time, you have 2
minutes
INSTRUCTIONS
1.  Do it again.
This time, you have 30
seconds
thosepeskyusers.com/ux-storyboarding-tip-using-omnigraffle/
Storyboard Template
Start by showing the context or
problem in the first few panels
Next, show how the solution
would work (high level)
Show the outcome or positive
effect in final panels
Exercise
INSTRUCTIONS
1.  Draw a storyboard that
shows how your concept
would fit into your life
and help you with your
bad habits
...
Validating &
Improving Through
Sketches
PART 5
Edward De Bono’s 6 Thinking Hats
Discernment
Process Emotions
CreativityOptimism
Information
Black Hat Session
INSTRUCTIONS
1.  Share your 1-up sketch
and your storyboard
with a partner
2.  Partner, take a minute to
say what you like...
INSTRUCTIONS
1.  Switch and repeat
Pro Tips for UX Sketching
1.  Have nice pens and pencils.
2.  Trace. Copy. Steal.
3.  Find a font you like and practice tr...
RESOURCES
Books
An Illustrated Life, by Danny Gregory
Drawing With Children, by Mona Brooks
Drawing on the Right Side of t...
uxteamofone.com
discount code FLUXIBLEBULEY for 20% off
Sharpie UX @ Fluxible 2013
Upcoming SlideShare
Loading in...5
×

Sharpie UX @ Fluxible 2013

8,192

Published on

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

Published in: Art & Photos, Design, Technology
2 Comments
96 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,192
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
207
Comments
2
Likes
96
Embeds 0
No embeds

No notes for slide

Transcript of "Sharpie UX @ Fluxible 2013"

  1. 1. Sharpie UX   LEAH BULEY | FLUXIBLE 2013
  2. 2. How I Learned to Fake Being a Sketcher—And How You Can Too or
  3. 3. Graphic Recording
  4. 4. Sketchnotes
  5. 5. Good Magazine
  6. 6. Obsessive Consumption Blog
  7. 7. The Universe of Sketches
  8. 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. 9. Confidence Games PART 1
  10. 10. Exercise
  11. 11. INSTRUCTIONS 1.  Spend 2 minutes drawing this image
  12. 12. INSTRUCTIONS 1.  Spend 2 minutes drawing this image 2.  Now, spend 2 minutes drawing this image
  13. 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. 14. Tools for Sketching Start Here I’m important! Background / depth Complex shapes
  15. 15. To Create Gray Effect Warm 
 Gray Hatching Stippling
  16. 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. 17. Sketching the User PART 2
  18. 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. 19. Sketching Simple Bodies Swoosh People Bell People Clothespin People Star People
  20. 20. Making Bodies Expressive Point of Focus Surprised or Averse Withdrawn or Sad Neutral Engaged or Aggressive Thoughtful or Questioning
  21. 21. Overlapping Shapes
  22. 22. From the Usborne Art Ideas Big Book of Things to Draw
  23. 23. Artist’s Manikin
  24. 24. Artist’s Manikin point of focus
  25. 25. Artist’s Manikin
  26. 26. Exercise
  27. 27. But first, think about a bad habit  
  28. 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. 29. Sketching Product Ideas PART 3
  30. 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. 31. Highlighting Sketches by Rachel Graves
  32. 32. Warm GraySketchesbyRachelGraves
  33. 33. Line Weight
  34. 34. The Magical 6-Up Template
  35. 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. 36. Sketching to Refine an Idea
  37. 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. 38. Sketching User Experiences PART 4
  39. 39. Basic Elements of Shape from Drawing With Children by Mona Brooks Dots Circles Lines Angled Lines Curved Lines
  40. 40. Circle! Line! Dot! Angled ! Line! Curved! Lines!
  41. 41. Lines! Line! Circle! Curved Lines! Angled Lines! Image from placeit.breezi.com
  42. 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. 43. INSTRUCTIONS 1.  Do it again. This time, you have 2 minutes
  44. 44. INSTRUCTIONS 1.  Do it again. This time, you have 30 seconds
  45. 45. thosepeskyusers.com/ux-storyboarding-tip-using-omnigraffle/
  46. 46. Storyboard Template
  47. 47. Start by showing the context or problem in the first few panels
  48. 48. Next, show how the solution would work (high level)
  49. 49. Show the outcome or positive effect in final panels
  50. 50. Exercise
  51. 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. 52. Validating & Improving Through Sketches PART 5
  53. 53. Edward De Bono’s 6 Thinking Hats Discernment Process Emotions CreativityOptimism Information
  54. 54. Black Hat Session
  55. 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. 56. INSTRUCTIONS 1.  Switch and repeat
  57. 57. 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.
  58. 58. 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
  59. 59. uxteamofone.com discount code FLUXIBLEBULEY for 20% off
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×