Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to prototype like a pro

59,371 views

Published on

An uncommon guide to designing user interfaces and interactive application prototypes using Apple Keynote and Keynotopia user interface libraries

Published in: Design, Technology, Business

How to prototype like a pro

  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
  12. comparealternatives
  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?
  26. 1Plan
  27. Define stories,and identify tasks
  28. Create a userflow 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
  34. 3Test
  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
  40. 4Refine
  41. Discuss resultswith your team
  42. Integrate findings
  43. Test againwith users
  44. 5Share
  45. Have yourteam playwith theprototype,instead ofwriting longspecificationdocuments
  46. otypi ng fl avorsProt
  47. Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow fidelity high fidelity
  48. Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow fidelity high fidelity Possible?
  49. E nter Key note
  50. Design toolwithoutfeature creep
  51. clickable Fast SlowLow fidelity High fidelity Proto types
  52. Basic shapes The ones you need, without thedistraction of the ones you dont need
  53. AlignmentandSnapping
  54. Copy StyleVisual K Lstyles K LQuickly share styles across shapes
  55. Masterslides- Less copy/paste- Update multiple pageswith a single change
  56. HyperlinksAdd user interaction without writing code
  57. SlideTransitions
  58. ExportHyperlinks are preserved!
  59. Test onDeviceWithout doing any extra work
  60. Works withAdobe suite Copy Paste
  61. And it costsless than $25 The whole iWork suite costs less than most mock-up and prototyping tools
  62. Key not opiaLargest user interface library for Keynote Power point! and
  63. Hundreds of UI building blocks for...
  64. iPad
  65. iPhone
  66. Web/Desktop
  67. Android
  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 fitness 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!
  73. $9 save you 9 hours Get it at Keynotopia+ free video tutorial on how to prototype an iPhone app in 13 minutes

×