1. How toPrototypeLike a Pro Original iPod Prototype
2. A pictureis worth a thousand words A prototype is worth a thousand pictures
3. Whats aprototype?
4. Early versionof an idea
5. Test able Early version of an idea
6. This is nota prototype
7. This is nota prototype
8. This is
9. Why Prototype?
10. To answerquestionsand generate new ones
11. Validate yourassumptions
13. Failearly d an y ea pl ch
14. To Visualizeyour ideas
15. To Visualizeyour ideasand share themwith others
16. To Visualize your ideas and share them with othersTeam users investors clients
17. So you till youFake it make it
18. What makes a goodPrototype?
19. QuickYou can create multiple versions fastand iterate even faster!
20. Cheap You wouldnt mindthrowing it away andstarting all over again
21. Favorites Check-in ChatPictures Minimal Contains only core features
22. Testable You can put it in front ofpeople and have them try it out(instead of just telling them about it)
23. Measurable You can get thenumbers behind whatsworking and whats not.
24. And hopefully fun to create and use
25. How to create a greatPrototype?
27. Deﬁne stories,and identify tasks
28. Create a userﬂow diagram
29. Sketch roughinterface screens Photo courtesy of StevenVanwel on Flickr
30. 2Build Photo courtesy of Mr. T in DC on Flickr
31. Main screen Login screenDesign main screens
32. Create UI states Update StatusProfile pop-up highlight update
33. Add user interaction
35. Test several prototypesTo get objective feedback
36. Decide whatto measureTo get accurate feedback
37. Choose theright usersTo get relevant feedback
38. Ask them tothink aloudTo get constant feedback
39. Interview them at the end To get even more feedback
41. Discuss resultswith your team
42. Integrate ﬁndings
43. Test againwith users
45. Have yourteam playwith theprototype,instead ofwriting longspeciﬁcationdocuments
46. E nter Key note
47. Design toolwithoutfeature creep
48. clickable Fast SlowLow ﬁdelity High ﬁdelity Proto types
49. Basic shapes The ones you need, without thedistraction of the ones you dont need
51. Copy StyleVisual K Lstyles K LQuickly share styles across shapes
52. Masterslides- Less copy/paste- Update multiple pageswith a single change
53. HyperlinksAdd user interaction without writing code
55. ExportHyperlinks are preserved!
56. Test onDeviceWithout doing any extra work
57. Works withAdobe suite Copy Paste
58. And it costsless than $25 The whole iWork suite costs less than most mock-up and prototyping tools
59. Key not opiaLargest user interface library for Keynote Power point! and
60. To design interfaces andtest prototypes in hoursinstead of days
61. Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow ﬁdelity Finally! high ﬁdelity
62. Hundreds of UI buildingblocks for...
68. Windows Phone 7
69. and Facebook
70. Thousands of companies use it!
71. And everyone loves it!
72. I love Keynotopia prototyping templates.Used them to rapidly develop a ﬁtness appas part of Phoenix Startup Weekend, andended up winning the peoples choice andbest presentation! -Matt Clower, iOS developer I work for a major corporation and my prototype consisted of over 150 slides. Keynotopia turned 60 days worth of work to 20. The executives loved the presentation and are contemplating implementing the app. -Shawn Smith, UX Designer Because it saves time and money!