1 / 41

Interactive Sketching Methods for non-sketchers

Interactive Sketching Methods for non-sketchers. 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.

cindye
Télécharger la présentation

Interactive Sketching Methods for non-sketchers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 CarloynSnyder,Paper Prototyping (2003) Morgan Kaufmann CarloynSnyder,Paper Prototyping (2003) Morgan Kaufmann Susannah McPhail Morgan Kaufmann p31

  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 • arts, industrial design, community courses… • books • Drawing on the Right Side of your Brain by Betty Edwards

  4. 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

  5. Time to draw: 30 seconds

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

  7. Time to draw: 45 seconds

  8. 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 • trace over image on a separate layer • Drawing skill required • almost zero

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

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

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

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

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

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

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

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

  17. How muchfidelity do wereally need?

  18. How muchfidelity do wereally need? Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 105 (from Scott McLaoud, Understanding Comics, p30)

  19. 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

  20. Picasso’s The Acrobat

  21. Picasso’s Engravings for Carmen

  22. Picasso’s Sleeping woman

  23. Picasso’s Woman with yellow hair

  24. Picasso’s Don Quixote

  25. Computer Telephone Last Name: First Name: Phone: Place Call Help

  26. Technique: Annotations • Marks that augment a sketch • directly on sketch • as layer • tracing • Photoshop layer • over dynamic media Bill Buxton Sketching User Experiences, see pages 175-185

  27. 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

  28. Photo of Steve Langley

  29. Photo of Steve Langley

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

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

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

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

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

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

  36. 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

More Related