How to prototype like a pro

46,925 views
45,931 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
5 Comments
86 Likes
Statistics
Notes
No Downloads
Views
Total views
46,925
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
1,334
Comments
5
Likes
86
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×