How to prototype like a pro
93 likes38,321 views
The document outlines the importance of prototyping, emphasizing that it serves as a testable early version of an idea that helps visualize concepts and generate feedback. It discusses the key features of effective prototypes—quick, cheap, testable, and measurable—and outlines a five-step process for creating them. Additionally, it highlights tools like Keynotopia that can enhance the prototyping experience and efficiency.
How to prototype like a pro
- 1. How to Prototype Like a Pro Original iPod Prototype
- 2. A picture is worth a thousand words A prototype is worth a thousand pictures
- 5. Early version of an idea
- 6. Test able Early version of an idea
- 7. This is not a prototype
- 8. This is not a prototype
- 9. This is
- 11. Why Prototype?
- 12. To answer questions and generate new ones
- 15. Fail early d an y ea pl ch
- 17. To Visualize your ideas and share them with others
- 18. To Visualize your ideas and share them with others Team users investors clients
- 19. So you till you Fake it make it
- 20. What makes a good Prototype?
- 21. Quick You can create multiple versions fast and iterate even faster!
- 22. Cheap You wouldn't mind throwing it away and starting all over again
- 23. Favorites Check-in Chat Pictures Minimal Contains only core features
- 24. Testable You can put it in front of people and have them try it out (instead of just telling them about it)
- 25. Measurable You can get the numbers behind what's working and what's not.
- 26. And hopefully fun to create and use
- 27. How to create a great Prototype?
- 28. 1 Plan
- 29. Define stories, and identify tasks
- 30. Create a user flow diagram
- 31. Sketch rough interface screens Photo courtesy of StevenVanwel on Flickr
- 32. 2 Build Photo courtesy of Mr. T in DC on Flickr
- 33. Main screen Login screen Design main screens
- 34. Create UI states Update Status Profile pop-up highlight update
- 36. 3 Test
- 37. Test several prototypes To get objective feedback
- 38. Decide what to measure To get accurate feedback
- 39. Choose the right users To get relevant feedback
- 40. Ask them to think aloud To get constant feedback
- 41. Interview them at the end To get even more feedback
- 42. 4 Refine
- 43. Discuss results with your team
- 46. 5 Share
- 47. Have your team play with the prototype, instead of writing long specification documents
- 48. E nter Key note
- 49. Design tool without feature creep
- 50. clickable Fast Slow Low fidelity High fidelity Proto types
- 51. Basic shapes The ones you need, without the distraction of the ones you don't need
- 53. Copy Style Visual K L styles K L Quickly share styles across shapes
- 54. Master slides - Less copy/paste - Update multiple pages with a single change
- 55. Hyperlinks Add user interaction without writing code
- 58. Test on Device Without doing any extra work
- 60. Works with Adobe suite Copy Paste
- 61. And it costs less than $25 The whole iWork suite costs less than most mock-up and prototyping tools
- 62. Key not opia Largest user interface library for Keynote Power point! and
- 63. To design interfaces and test prototypes in hours instead of days
- 64. Paper sketches Wireframes HTML /JS / Flash Mockups Comps Fast Slow low fidelity Finally! high fidelity
- 65. Hundreds of UI building blocks for...
- 66. iPad
- 67. iPhone
- 68. Web/Desktop
- 69. Android
- 70. BlackBerry
- 71. Windows Phone 7
- 72. and Facebook
- 73. Thousands of companies use it!
- 74. And everyone loves it!
- 75. I love Keynotopia prototyping templates. Used them to rapidly develop a fitness app as part of Phoenix Startup Weekend, and ended up winning the peoples choice and best 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!
- 76. $9 save you 9 hours Get it at Keynotopia
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n