Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Collaborative Sketching for UX
Robert Stribley
10/22/13
Arguably, we’ve
been sketching for
eons
But now, we’re sketching
more than ever
• IdeaPaint Inc makes a paint
that turns any surface into a
whiteboard
• Its sales...
Why sketch?
• Enable communication
• Make abstract
concepts concrete
• Iterate on ideas
• Jumpstart
collaboration
• Ensure...
What can I sketch?
• Home pages
• Category pages
• Product pages
• Wizards & widgets
• Search results
• Process Flows
• An...
And there’s so
much more to
sketch for …
• Smartphones
• Tablets
• Google Glass
• iWatches
• Responsive design
• Ubiquitou...
Who can sketch?
• Information architects
• Interaction designers
• Graphic designers
• Content strategists
• Project manag...
Really, anyone can
sketch

Cartoon by XKCD
A few ways we sketch at
Razorfish:
•
•
•
•
•

Solo
Sketch to comp
Communicate to client
Storyboarding
As a team – collabor...
What sketching isn’t …
• Sketching isn’t only for
designers
• Sketching isn’t difficult
• Sketching isn’t drawing
You don’...
However, we can
learn from the pros
Who often begin
with a sketch
Adding layers, detail,
color
Until they complete
their masterpiece
A Quick Case Study
Any idea what this is a sketch of?
Twitter
[This sketch] has very special significance – it's hanging in the office somewhere
with one other page. Whenever I...
Some Advice from the Experts
“There are techniques
and processes whereby
we can put experience
front and center in design.
My belief is that the basis
...
Attributes of a Sketch
•Quick
•Timely
•Inexpensive
•Disposable

•Plentiful
•Clear vocabulary
•Distinct gesture
•Minimal de...
"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 m...
Collaborative Sketching
For the purposes
of today’s
workshop,
sketching is …
•Quick
•Simple
•Collaborative
All the tools you
need:
Paper
Sharpies

Photo by JasonTank, Flickr
Defining Collaborative Sketching
Origins
• Rooted in Design Studio Methodology
• Grew out of industrial design and archite...
Methodology
• Sketch
• Limit your time
• Don’t worry about mistakes or style
Goals
• Benefit from the participation of you...
Process:
1. Discuss
2. Sketch
3. Share
4. Revise
Discuss
• Discuss the experience you’re sketching
• What’s its purpose?
• What features are necessary?
• How would you pri...
Sketch
• Sketch silently
• Limit your time – 5, 10 minutes
• Sketch as much has possible, as many different
ideas as possi...
Share
• Review your work with your team
• Keep it short – 60 seconds each
• You provide feedback to others
• What you like...
Revise
• Now begin your wireframe with a more informed
view, more and better ideas
• And sketch again if you need to
Now, it’s your turn
Our Exercise
What to do?
Our Exercise:
A home page for Events.com
• A website for finding local events
– Listed by category
– Listed by date
– List...
Our Exercise:
Consider other
event sites you’re
familiar with. This
will be your
“competitive
analysis”
Our Exercise:
In teams, sketch your ideas.
Events.com Home Page
1. Take 10 minutes to discuss
what features belong here
2....
Our Exercise:

1. Take 10 minutes to discuss what features
belong here
Our Exercise:

2. Sketch your ideas silently for 10 minutes
Our Exercise:

3. Share your sketches with your team
Our Exercise:

4. Sketch again, incorporating what you
learned from others
Some Resources
Online Reading & Viewing
Introduction to Design Studio Methodology
http://uxmag.com/articles/introduction-to-design-studio...
Sketching Tools
The following apps are all
for the iPad:
• Adobe Ideas
• Bamboo Paper
• Muji Notebook
• Penultimate
• Sket...
Prototyping With
Sketches
AppSeed
Currently a Kickstarter
projects, AppSeed allows
you to turn your app
sketches into work...
thanks

www.slideshare.net/stribs
Collaborative Sketching for UX
Collaborative Sketching for UX
Collaborative Sketching for UX
Collaborative Sketching for UX
Collaborative Sketching for UX
Collaborative Sketching for UX
Prochain SlideShare
Chargement dans…5
×

Collaborative Sketching for UX

3 329 vues

Publié le

Collaborative Sketching for UX - as presented by Robert Stribley at Razorfish, NYC, 10/22/13

Publié dans : Design, Technologie, Formation

Collaborative Sketching for UX

  1. 1. Collaborative Sketching for UX Robert Stribley 10/22/13
  2. 2. Arguably, we’ve been sketching for eons
  3. 3. 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
  4. 4. Why sketch? • Enable communication • Make abstract concepts concrete • Iterate on ideas • Jumpstart collaboration • Ensure recollection • Humanize ideas
  5. 5. What can I sketch? • Home pages • Category pages • Product pages • Wizards & widgets • Search results • Process Flows • Anything, really
  6. 6. And there’s so much more to sketch for … • Smartphones • Tablets • Google Glass • iWatches • Responsive design • Ubiquitous computing
  7. 7. Who can sketch? • Information architects • Interaction designers • Graphic designers • Content strategists • Project managers • Business analysts • Functional analysts • Developers • Client directors
  8. 8. Really, anyone can sketch Cartoon by XKCD
  9. 9. A few ways we sketch at Razorfish: • • • • • Solo Sketch to comp Communicate to client Storyboarding As a team – collaboratively
  10. 10. What sketching isn’t … • Sketching isn’t only for designers • Sketching isn’t difficult • Sketching isn’t drawing You don’t need to be Michelangelo to participate
  11. 11. However, we can learn from the pros
  12. 12. Who often begin with a sketch
  13. 13. Adding layers, detail, color
  14. 14. Until they complete their masterpiece
  15. 15. A Quick Case Study
  16. 16. Any idea what this is a sketch of?
  17. 17. Twitter [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 “twttr sketch” Twitter.com
  18. 18. Some Advice from the Experts
  19. 19. “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 Bill Buxton Sketching User Experiences
  20. 20. 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 Buxton Sketching User Experiences
  21. 21. "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 Roam The Back of the Napkin
  22. 22. Collaborative Sketching
  23. 23. For the purposes of today’s workshop, sketching is … •Quick •Simple •Collaborative
  24. 24. All the tools you need: Paper Sharpies Photo by JasonTank, Flickr
  25. 25. Defining Collaborative Sketching Origins • Rooted in Design Studio Methodology • Grew out of industrial design and architecture • No “rockstars” • Different versions/methods • For example, Todd Zaki Warfel, Message First, talks about … • Create. Pitch. Critique. • 6.8.5 game
  26. 26. Methodology • Sketch • Limit your time • Don’t worry about mistakes or style Goals • Benefit from the participation of your colleagues • Communicate ideas effectively by visualizing them • Quickly generate ideas and refine through iterations
  27. 27. Process: 1. Discuss 2. Sketch 3. Share 4. Revise
  28. 28. Discuss • Discuss the experience you’re sketching • What’s its purpose? • What features are necessary? • How would you prioritize them? • What’s the audience? • However, you are not discussing layout or design • Just the problem you’re trying to solve • No sketching yet
  29. 29. Sketch • Sketch silently • Limit your time – 5, 10 minutes • Sketch as much has possible, as many different ideas as possible • Emphasis is on quantity of ideas not quality of sketches
  30. 30. Share • Review your work with your team • Keep it short – 60 seconds each • You provide feedback to others • What you like • Questions about didn’t work for you • You’re not grilling your colleagues and this is not a competition
  31. 31. Revise • Now begin your wireframe with a more informed view, more and better ideas • And sketch again if you need to
  32. 32. Now, it’s your turn
  33. 33. Our Exercise
  34. 34. What to do?
  35. 35. Our Exercise: A home page for Events.com • A website for finding local events – Listed by category – Listed by date – Listed by ??? • Who is the audience? – Personas
  36. 36. Our Exercise: Consider other event sites you’re familiar with. This will be your “competitive analysis”
  37. 37. Our Exercise: In teams, sketch your ideas. Events.com Home Page 1. Take 10 minutes to discuss what features belong here 2. Sketch your ideas silently for 10 minutes 3. Share your sketches with your team 4. Sketch again, incorporating what you learned from others Discuss Sketch Share Revise
  38. 38. Our Exercise: 1. Take 10 minutes to discuss what features belong here
  39. 39. Our Exercise: 2. Sketch your ideas silently for 10 minutes
  40. 40. Our Exercise: 3. Share your sketches with your team
  41. 41. Our Exercise: 4. Sketch again, incorporating what you learned from others
  42. 42. Some Resources
  43. 43. Online Reading & Viewing Introduction to Design Studio Methodology http://uxmag.com/articles/introduction-to-design-studio-methodology The Design Studio Method – Presentation by Todd Zaki Warfel https://vimeo.com/37861987
  44. 44. Sketching Tools The following apps are all for the iPad: • Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro • Paper
  45. 45. Prototyping With Sketches AppSeed Currently a Kickstarter projects, AppSeed allows 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
  46. 46. thanks www.slideshare.net/stribs

×