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) Carloyn Snyder,Paper Prototyping (2003)
Morgan Kaufmann
Morgan Kaufmann
Susannah McPhail
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
o arts, industrial design, community courses…
• books
o Drawing on the Right Side of your Brain by Betty Edwards
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
Time to draw: 30 seconds
Technique: Just Draw Something
Exercise: draw this powerpoint screen
• you have 45 seconds
Time to draw: 45 seconds
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
o trace over image on a separate layer
Drawing skill required
• almost zero
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279
Generate blanks for your designs
Screen can be filled in, phone is constant
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
Hybrid Sketches
Lo-fi =
speculative…
Detail = fixed elements
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 96, p 279
Hybrid sketches
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 98, p 281
How much
fidelity do we
really need?
How much
fidelity do we
really need?
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 105 (from Scott McLaoud, Understanding Comics, p30)
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
Picasso’s The Acrobat
Picasso’s Engravings for Carmen
Picasso’s Sleeping woman
Picasso’s Woman with yellow hair
Picasso’s Don Quixote
Computer Telephone
Last Name:
First Name:
Phone:
Place Call
Help
Technique: Annotations
Marks that augment a sketch
• directly on sketch
• as layer
o tracing
o Photoshop layer
• over dynamic media
Bill Buxton Sketching User Experiences, see pages 175-185
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
Photo of Steve Langley
Photo of Steve Langley
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 95, p277
Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 64, p 174
portion of a page from Saul Greenberg’s sketchbook
Vanilla Sketch Examples -screen snapshot
1From
Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann p31
Sketch examples
1From
– design variations
Carloyn Snyder’s Book Paper Prototyping (2003) Morgan Kaufmann, p350
Sketchbook examples
– details to prototype
buddy bugs - sketches and final prototype, by former 581 student Susannah McPhail
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