Sharpie UX @ Fluxible 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Sharpie UX @ Fluxible 2013

on

  • 7,335 views

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

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

Statistics

Views

Total Views
7,335
Views on SlideShare
6,787
Embed Views
548

Actions

Likes
87
Downloads
173
Comments
2

7 Embeds 548

http://samxyuan.org 226
http://www.didoo.net 201
https://twitter.com 115
https://www.linkedin.com 2
https://weber.instructure.com 2
https://www.rebelmouse.com 1
https://my.jolicloud.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sharpie UX @ Fluxible 2013 Presentation Transcript

  • 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
  • 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. 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. uxteamofone.com discount code FLUXIBLEBULEY for 20% off