1. Interactive Sketching Methods for non-sketchers

2. Part 1. The Vanilla Sketch Captures: an essence of an idea a moment in time the look of an interface multiple variations of the concept Carloyn Snyder,Paper Prototyping (2003) Morgan Kaufmann Morgan Kaufmann p31 Carloyn Snyder,Paper Prototyping (2003) Morgan Kaufmann Susannah McPhail

3. Technique: Just Draw Something Don’t worry about aesthetics the sketch is for your eyes and the sketch is a social thing: a conversational prop that engages others in talk about your ideas But if you want to learn how to draw sketching courses oarts, industrial design, community courses… books oDrawing on the Right Side of your Brain by Betty Edwards

6. Technique: Just Draw Something Scribble drawing sketch anywhere, anytime, sketch in the dark (while watching a movie) speed sketching (1 minute or less) Trick draw only essentials scribbles suggest details

8. Time to draw: 30 seconds

9. Technique: Just Draw Something Exercise: draw this powerpoint screen you have 45 seconds

10. Time to draw: 45 seconds

11. Technique: Tracing Basic idea copy / trace the fixed elements of an existing interface/screen leave your design space empty Technology camera, photograph, tracing paper or Photoshop or equivalent otrace over image on a separate layer Drawing skill required almost zero

12. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279

16. Generate blanks for your designs Screen can be filled in, phone is constant

17. Technique: Hybrid Sketches Mixes full and low fidelity elements Full fidelity portions: fixed design elements Low fidelity portions speculative components Contrast makes certain parts of sketch stand out over others

18. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279 Detail = fixed elements Hybrid Sketches Lo-fi = speculative…

19. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 98, p 281 Hybrid sketches

20. How much fidelity do we really need?

21. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 105 (from Scott McLaoud, Understanding Comics, p30)

22. How much fidelity do we really need? Constrained resolution no higher than required to capture its concept Consistency with state rendering fidelity matches the actual state of development of the concept Suggest & explore rather than confirm suggests and provokes what could be A catalyst evokes conversations and discussion

23. Picasso’s The Acrobat

24. Picasso’s Engravings for Carmen

25. Picasso’s Sleeping woman

26. Picasso’s Woman with yellow hair

27. Picasso’s Don Quixote

28. Computer Telephone Last Name: First Name: Phone: Place CallHelp

31. Technique: Annotations Marks that augment a sketch directly on sketch as layer otracing oPhotoshop layer over dynamic media Bill Buxton Sketching User Experiences, see pages 175-185

32. Technique: Annotations Textual notes name and / or explain things add detail lists of items questions / issues about design… Graphical marks connects notes to sketch elements relates sketch elements show dynamics of elements or interaction over time… Bill Buxton Sketching User Experiences, see pages 175-185

33. Photo of Steve Langley

35. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 95, p277

36. Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 64, p 174

37. portion of a page from Saul Greenberg’s sketchbook

38. Vanilla Sketch Examples -screen snapshot 1 From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann p31

39. Sketch examples – design variations 1 From Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p350

40. Sketchbook examples – details to prototype buddy bugs - sketches and final prototype, by former 581 student Susannah McPhail

41. Exercise –tracing / copying Choose a handheld device cell phone, PDA, watch… Photograph the device and screen contents choose a good angle/size take several photos of it at different angles/sizes just in case Trace over the phone On paper, or in sketching program capture its essence, not literal high fidelity details