prototyping
!
David Sturtz
david@davidsturtz.com
twitter: @sturtz
[Explaining prototyping
to a five-year-old.]
Frozen storyboard image. (Walt Disney Pictures) via NPR

http://www.wbur.org/npr/247209372/for-top-flight-animators-the-gag...
Prototypes
tell a story.
We prototype
to think.
We prototype
to learn.
We prototype
to decide.
Design Thinking
“a human-centered, creative, iterative, 

and practical approach to finding the best
ideas and ultimate so...
Empathize
Observe
Engage
Immerse
INTERVIEWS + ETHNOGRAPHY
Tools
Telephone
Skype / Video Chat
Web conferencing/screen
sharing applications
Digital photos
Bl...
EMPATHY MAP
empathize
PARTICIPATORY DESIGN
Tools
Paper, scissors, glue
YUI Design Stencils
Other images
empathize
What is it?
A tangible represe...
PARTICIPATORY DESIGN
empathize
PARTICIPATORY DESIGN
empathize
Define
[USER] needs to [USER’s NEED] 

because [SURPRISING INSIGHT].
Analogy
Design Principles
Ideate
1. Defer judgment
2. Encourage wild ideas
3. Build on the ideas of others
4. Stay focused on the topic
6. Be visual...
Prototype
If a picture is worth a thousand words, 

a prototype is worth a thousand pictures.
“Prototypes should only command as much
time, effort, and investment as are needed to
generate useful feedback and evolve ...
SKETCHBOARDS
getting organized
USER FLOWS
prototyping
CUSTOMER JOURNEY MAPS
prototyping
STORYBOARDS / COMICS
prototyping
PAPER PROTOTYPES
prototyping
WIZARD OF OZ
prototyping
PAPER + POWERPOINT
prototyping
BALSAMIQ MOCKUPS
prototyping
Balsamiq Mockups
AXURE
prototyping
Axure RP
HTML / BOOTSTRAP / ETC.
prototyping
getbootstrap.com
getclank.com
foundation.zurb.com
!
jetstrap.com
easel.io
!
framerjs.c...
WEB-BASED TOOLS
Tools
Mockflow
Proto.io
ProtoShare
HotGloo
FluidUI
InvisionApp
... etc.
prototyping
ADOBE EDGE REFLOW
prototyping
PATTERN LIBRARIES
prototyping
Recommended…
Design Thinking
http://dschool.stanford.edu/use-our-methods/
http://www.ideo.com/images/uploads/thoughts/IDEO...
Recommended…
prototyping
!
David Sturtz
david@davidsturtz.com
twitter: @sturtz
Photo Credits
"Shaping" by Becky Wetherington

https://www.flickr.com/photos/macbeck/3949856872
"Tea Anyone?" by Manish Ban...
Prototyping
Prototyping
Prototyping
Prototyping
Upcoming SlideShare
Loading in …5
×

Prototyping

527 views
462 views

Published on

Introduction to prototyping for user interface design, including how prototyping fits into an overall design thinking process.

Presented at University of Iowa's Dev/Iowa Bootcamp, June 2014 (http://www.iowajpec.org/entrepreneur-support/deviowa/).

Recommended reading:
http://www.amazon.com/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702/
http://rosenfeldmedia.com/books/prototyping/
http://rosenfeldmedia.com/books/see-what-i-mean/

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
527
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototyping

  1. 1. prototyping ! David Sturtz david@davidsturtz.com twitter: @sturtz
  2. 2. [Explaining prototyping to a five-year-old.]
  3. 3. Frozen storyboard image. (Walt Disney Pictures) via NPR
 http://www.wbur.org/npr/247209372/for-top-flight-animators-the-gag-is-an-art-all-its-own
  4. 4. Prototypes tell a story.
  5. 5. We prototype to think.
  6. 6. We prototype to learn.
  7. 7. We prototype to decide.
  8. 8. Design Thinking “a human-centered, creative, iterative, 
 and practical approach to finding the best ideas and ultimate solutions.” 
 — Tim Brown, IDEO
  9. 9. Empathize Observe Engage Immerse
  10. 10. INTERVIEWS + ETHNOGRAPHY Tools Telephone Skype / Video Chat Web conferencing/screen sharing applications Digital photos Blogs, notebooks, diaries ! empathize What is it? An open-ended conversation with users about your area of interest. ! Why do it? The best bang-for-your-buck as a first step in getting to know your users. Allow these conversations to snowball using affinity diagramming and mental models. ! Pay attention to tasks and goals.
  11. 11. EMPATHY MAP empathize
  12. 12. PARTICIPATORY DESIGN Tools Paper, scissors, glue YUI Design Stencils Other images empathize What is it? A tangible representation of a system ! Why do it? Fun for everyone. Allows participants to express needs in a different format. We’re not interested in the actual prototypes as much as the conversations about the reasons behind them.
  13. 13. PARTICIPATORY DESIGN empathize
  14. 14. PARTICIPATORY DESIGN empathize
  15. 15. Define [USER] needs to [USER’s NEED] 
 because [SURPRISING INSIGHT]. Analogy Design Principles
  16. 16. Ideate 1. Defer judgment 2. Encourage wild ideas 3. Build on the ideas of others 4. Stay focused on the topic 6. Be visual 7. Go for quantity
  17. 17. Prototype If a picture is worth a thousand words, 
 a prototype is worth a thousand pictures.
  18. 18. “Prototypes should only command as much time, effort, and investment as are needed to generate useful feedback and evolve an idea.”
 — Tim Brown, IDEO
 http://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf
  19. 19. SKETCHBOARDS getting organized
  20. 20. USER FLOWS prototyping
  21. 21. CUSTOMER JOURNEY MAPS prototyping
  22. 22. STORYBOARDS / COMICS prototyping
  23. 23. PAPER PROTOTYPES prototyping
  24. 24. WIZARD OF OZ prototyping
  25. 25. PAPER + POWERPOINT prototyping
  26. 26. BALSAMIQ MOCKUPS prototyping Balsamiq Mockups
  27. 27. AXURE prototyping Axure RP
  28. 28. HTML / BOOTSTRAP / ETC. prototyping getbootstrap.com getclank.com foundation.zurb.com ! jetstrap.com easel.io ! framerjs.com
  29. 29. WEB-BASED TOOLS Tools Mockflow Proto.io ProtoShare HotGloo FluidUI InvisionApp ... etc. prototyping
  30. 30. ADOBE EDGE REFLOW prototyping
  31. 31. PATTERN LIBRARIES prototyping
  32. 32. Recommended… Design Thinking http://dschool.stanford.edu/use-our-methods/ http://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf ! Customer Journey Mapping http://www.servicedesigntools.org/ http://mappingexperiences.com ! Comics http://kevnull.com/creating-concepts-through-comics http://alistapart.com/article/see-what-i-mean designcomics.org ! Design Pattern Libraries http://ui-patterns.com/ https://ux.mailchimp.com/patterns/ https://developer.yahoo.com/ypatterns/about/libraries.html !
  33. 33. Recommended…
  34. 34. prototyping ! David Sturtz david@davidsturtz.com twitter: @sturtz
  35. 35. Photo Credits "Shaping" by Becky Wetherington
 https://www.flickr.com/photos/macbeck/3949856872 "Tea Anyone?" by Manish Bansal
 https://www.flickr.com/photos/bansal98/2318035539 "Lauri at the Wheel" by kellinahandbasket
 https://www.flickr.com/photos/kellinahandbasket/ 2183799236 "Trimmed Bowls" by Martin Cathrae
 https://www.flickr.com/photos/suckamc/2829328496

×