Presentation slides of the talk I gave on prototyping at DelveUI in NYC.

1. Prototyping in the Wild
DelveNYC

2. Prototypes are artifacts.

3. Prototyping is a process.

4. Inspired by the design studio
http://www.flickr.com/photos/98736785@N00/1589941777/

5. 6-8-5

6. !"#$%&'$("#%)*!+* ,, -./01*2.0345.6 ,, #789#:';<'==%>'?#:=@ABC< ,,

7. !"#$%&'$("#%)*!+* ,, -./01*2.0345.6 ,, #789#:';<'==%>'?#:=@ABC< ,,

8. !"#$%&'$("#%)*!+* ,, -./01*2.0345.6 ,, #789#:';<'==%>'?#:=@ABC< ,,

9. 1. Sketch out your ideas

10. 2. Present to team

11. 3. Critique with team

12. 4. Bring it to life

13. ITERATE & REPEAT

14. !"#$%"&'
%(*$*
+ *+,#
*$
,#
%(
!#)$
$%
!"# &
'(#
$
!"
)
#$ #
%& '(#!
()*& +('
*&

15. Reasons to Prototype

16. Reasons to Prototype
➡ Work through a design
➡ Communicate concepts
➡ Sell an idea
➡ Gauge technical feasibility
➡ Test concepts with customers

17. 8 Guiding Principles

18. Know your audience and

19. Plan a little. Prototype the

20. Set expectations.

21. You CAN sketch.

22. It’s not the Mona Lisa.

23. If you can’t make it fake it.

27. Prototype only what you

28. Reduce risk. Prototype early
and often.

29. Let’s talk paper prototyping

30. Paper Prototyping Pros

31. Paper Prototyping Pros
➡ Fast.Cheap. Easy.
➡ Manipulate on the fly.
➡ No computer necessary.
➡ Not bound by SW/HW limitations.
➡ Mobile and gestural interfaces.
➡ Collaboration.

34. Techniques
➡ Handlebars
➡ Accordion
➡ Transparencies
➡ Dental floss

38. Let’s talk Fireworks

39. Fireworks Pros

40. Fireworks Pros
➡ CS4 integration.
➡ Small file size.
➡ Page states.
➡ Vector and raster under one roof.
➡ Export to HTML, PDF, AIR, and more.
➡ Master pages, shared layers, and
symbols.

48. Let’s talk HTML

49. HTML Pros

50. HTML Pros
➡ Platform independent.
➡ Portable.
➡ It’sreal.
➡ Modular, component-based.
➡ Collaborative.
➡ Lots of free frameworks.
➡ Possible reusable for production.

51. Prototyping Book
➡ rosenfeldmedia.com/books/
prototyping
➡ todd@messagefirst.com
➡ @zakiwarfel