Upload
robert-stribley
View
350
Download
3
Embed Size (px)
Citation preview
But now, we’re sketching more
than ever
• IdeaPaint Inc makes a paint that
turns any surface into a whiteboard
• Its sales have doubled every year
since introduced in 2008
• More than ½ its business is in the
workplace
See “Doodling for Dollars,” Wall Street Journal, April 24, 2012
Why sketch?
• Enable
communication
• Make abstract
concepts concrete
• Iterate on ideas
• Ensure
recollection
• Humanize ideas
• Jumpstart
collaboration
What can I sketch?
• Home pages
• Category pages
• Product pages
• Forms
• Wizards & widgets
• Search results
• Process Flows
• Anything, really
And there’s so much
more to sketch for …
• Smartphones
• Tablets
• Watches
• Google Glass
• Other wearables
• Responsive design
• Ubiquitous computing
A few ways we sketch at
Razorfish:
• Solo
• Sketch to comp
• Communicate to client
• Storyboarding
• As a team – collaboratively
Who can sketch?
• Information architects
• Interaction designers
• Graphic designers
• Content strategists
• Project managers
• Business analysts
• Functional analysts
• Developers
• Client directors
… Anyone really
What sketching isn’t …
• Sketching isn’t only for
designers
• Sketching isn’t difficult
• Sketching isn’t drawing
You needn’t be Michelangelo to
participate
“twttr sketch” Twitter.com
[This sketch] has very special significance – it's hanging in the office
somewhere with one other page. Whenever I'm thinking about something, I
really like to take out the yellow notepad and get it down.
– Jack Dorsey, Twitter
“The great benefit of drawing is that when you
look at something, you see it for the first time.”
Milton Glaser
“We sit
around, stand
around those
tables and we
draw. We still
draw. … We
would draw
and we would
make lots of
models.” Jonathan Ive
“There are
techniques and
processes
whereby we can
put experience
front and center in
design. My belief
is that the basis
for doing so lies in
extending the
traditional practice
of sketching.”
Bill Buxton
Attributes of a Sketch
• Quick
• Timely
• Inexpensive
• Disposable
• Plentiful
• Clear vocabulary
• Distinct gesture
• Minimal detail
• Appropriate degree of refinement
• Suggest & explore rather than confirm
• Ambiguity
Bill BuxtonSketching User Experiences
"There is no more powerful way
to prove that we know
something well than to draw a
simple picture of it. And there is
no more powerful way to see
hidden solutions than to pick up
a pen and draw out the pieces
of our problem.”
Dan RoamThe Back of the Napkin
Defining Collaborative Sketching
Origins
• Rooted in Design Studio
Methodology
• Grew out of industrial design and
architecture
• Jim Ungar and Jeff White, “Agile
user centered design: enter the
design studio - a case study,”
2008
- Stefan Klocek, “Better together;
the practice of successful
creative collaboration,” Cooper
Journal
Defining Collaborative Sketching
“Ninja. Rockstar. Gifted
genius. Many of the
ways we talk about
creative work (whether
it’s design or
development) only
capture the brilliance of
a single individual.”
Defining Collaborative Sketching
Origins
• Will Evans
• Introduction to Design Studio
Methodology – Article
• Process
• Illumination
• Collaborative Ideation
• Presentation
• Critique
• Iteration@semanticwill
Origins
• Todd Zaki Warfel, Message First
• The Design Studio Method –
Presentation
• Create. Pitch. Critique.
• 6.8.5• 6-8 sketches in 5 minutes
• 3 minutes to pitch
• 2 minutes of review
• Concept generation not details
• Not just designers
• Stealing is encouraged
Defining Collaborative Sketching
@zakiwarfel
• To communicate your ideas
effectively by visualizing them
• To benefit from the participation of
your colleagues
• To quickly generate ideas and refine
through iterations
Goals
Discuss
• Discuss the experience you’re sketching
• What’s its purpose?
• What features are necessary?
• How would you prioritize them?
• Who’s the audience?
• You’re not discussing layout or design
• Just the problem you’re trying to solve
• You’re not sketching yet
Process
Sketch
• Sketch silently
• Limit your time – 5, 10 minutes
• Sketch as much as possible, as many different
ideas as possible
• Don’t worry about mistakes or style
• Emphasis is on the quantity of ideas not the
quality of sketches
Process
Share
• Review your work with your team
• Keep it short – 60 seconds each
• You provide feedback to others
• What you like
• Questions about what didn’t work for you
• You’re not grilling your colleagues and this
isn’t a competition
Process
Iterate
• Now sketch again if you need to
• Or collaborate on a high-level wireframe (e.g.
via whiteboard)
• Then begin your wireframe with a more
informed view, with more and better ideas
• Iterate on your design
Process
Events.com
A website for finding and posting local
events
• Listed by category
• Listed by date
• Listed by … what else?
Our Project
In teams, sketch your ideas for the
Events.com Home Page
1. Take 15 minutes to discuss what
features belong here
2. Sketch your ideas silently for 10
minutes
3. Share your sketches with your team
4. Collaborate on a sketch together as a
group, incorporating what you
learned
Discu
ssSketc
hShar
eIterate
Our Project
Exercise 1
4. Collaborate on a sketch together as a group,
incorporating what you learned from each
other.
Our Project
The following apps are all
for the iPad:
• Adobe Ideas
• Bamboo Paper
• Muji Notebook
• Penultimate
• SketchBook Pro
• Paper
Sketching Apps
AppSeed
Currently in development,
this Kickstarter project lets
you to turn your app
sketches into working
mobile prototypes
“Sketching is simply the
fastest way to test ideas
and visually brainstorm”– Greg Goralski, AppSeed creator
Prototyping
• User Interface Design in an Agile Environment: Enter
the Design Studio – Jim Ungar and Jeff White
• Design Studio Methodology – Article by Will Evans
• The Design Studio Method – Presentation by Todd Zaki
Warfel
Further Study