Your SlideShare is downloading. ×
Collaborative Sketching for UX - NYU 02/19/14
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Collaborative Sketching for UX - NYU 02/19/14

5,868

Published on

Collaborative Sketching for UX - as presented at NYU Poly, Brooklyn, NY, 02/19/14

Collaborative Sketching for UX - as presented at NYU Poly, Brooklyn, NY, 02/19/14

Published in: Design
4 Comments
70 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,868
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
144
Comments
4
Likes
70
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Collaborative Sketching for UX
  • “Aerial Screw” sketch by Leonardo DaVinci - circa 1483
  • Cave painting in Lascaux, France
  • Reference - “Doodling for Dollars,” Wall Street Journal, April 24, 2012
  • Why Sketch?
  • Sketches by Razorfish UX
  • XKCD Cartoon http://xkcd.com/386/
  • Sketch by Edward Hopper – Photo by Robert Stribley
  • Sketch by Edward Hopper– Photo by Robert Stribley
  • Sketch by Edward Hopper – Photo by Robert Stribley
  • “Nighthawks” by Edward Hopper, 1942 – Photo by Robert Stribley
  • Milton Glaser, graphic designer, designer of the I <3 New York logo
  • Bill Buxton – Sketching User Experiences
  • Common precognitive visual attributes – from The Back of the Napkin – Dan Roam
  • Our Exercise
  • Photo by JasonTank, Flickr
  • Defining Collaborative Sketching6.8.5 – Create 6-8 sketches in 5 minutes
  • Our Exercise
  • Our Exercise
  • Our Exercise
  • Our Exercise
  • Our Exercise
  • Our Exercise
  • Photo: Flickr.com/stribs
  • Refer to websites: Flavorpill, NYCgo, Eventful, etc
  • Resources
  • Books: Sketching User Experiences by Bill Buxton, The Back of the Napkin by Dan Roam
  • Sketching Apps
  • Prototyping with sketches – source: http://www.fastcodesign.com/3017637/kickstarting-appseed-turns-your-sketches-into-apps
  • thanks
  • Transcript

    • 1. Collaborative Sketching for UX Robert Stribley 02/19/14
    • 2. Arguably, we’ve been sketching for eons
    • 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. Why sketch? • Enable communication • Make abstract concepts concrete • Iterate on ideas • Jumpstart collaboration • Ensure recollection • Humanize ideas
    • 5. What can I sketch? • Home pages • Category pages • Product pages • Wizards & widgets • Search results • Process Flows • Anything, really
    • 6. And there’s so much more to sketch for … • Smartphones • Tablets • Google Glass • iWatches • Responsive design • Ubiquitous computing
    • 7. Who can sketch? • Information architects • Interaction designers • Graphic designers • Content strategists • Project managers • Business analysts • Functional analysts • Developers • Client directors
    • 8. Really, anyone can sketch Cartoon by XKCD
    • 9. A few ways we sketch at Razorfish: • • • • • Solo Sketch to comp Communicate to client Storyboarding As a team – collaboratively
    • 10. 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
    • 11. However, we can learn from the pros
    • 12. Who often begin with a sketch
    • 13. Adding layers, detail, color
    • 14. Until they complete their masterpiece
    • 15. A Quick Case Study
    • 16. Any idea what this is a sketch of?
    • 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. Some Advice from the Experts
    • 19. “The great benefit of drawing is that when you look at something, you see it for the first time.” - Milton Glaser
    • 20. “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
    • 21. 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
    • 22. "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
    • 23. Collaborative Sketching
    • 24. For the purposes of today’s workshop, sketching is … •Quick •Simple •Collaborative
    • 25. All the tools you need: Paper Sharpies Photo by JasonTank, Flickr
    • 26. 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
    • 27. 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
    • 28. Process: 1. Discuss 2. Sketch 3. Share 4. Revise
    • 29. 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
    • 30. 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
    • 31. 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
    • 32. Revise • Now begin your wireframe with a more informed view, more and better ideas • And sketch again if you need to
    • 33. Now, it’s your turn
    • 34. Our Exercise
    • 35. What to do?
    • 36. Our Exercise: A home page for Events.com • A website for finding local events – Listed by category – Listed by date – Listed by … what else? • Who is the audience? – Locals – Tourists – Event promoters
    • 37. Also, consider other event sites you’re familiar with. This will be your “competitive analysis”
    • 38. Our Exercise: In teams, sketch your ideas 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
    • 39. Our Exercise: 1. Take 10 minutes to discuss what features belong here
    • 40. Our Exercise: 2. Sketch your ideas silently for 10 minutes
    • 41. Our Exercise: 3. Share your sketches with your team
    • 42. Our Exercise: 4. Sketch again, incorporating what you learned from others
    • 43. Some Resources
    • 44. Books
    • 45. Sketching Tools The following apps are all for the iPad: • Adobe Ideas • Bamboo Paper • Muji Notebook • Penultimate • SketchBook Pro • Paper
    • 46. Prototyping 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
    • 47. Further Study • 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
    • 48. Thank you www.slideshare.net/stribs

    ×