Rapid Prototyping for theWeb and Mobile DevicesMarcio Leibovitch / @marciokl2013
About me
Brazilimage: ©Depositphotos/STYLEPICS
image: ©Depositphotos/AivolieElectronic Engineering
image: ©pc-museum.com1992
Canada
Yu Centrik
9
DefinitionWhat is a prototype?
pro•to•type |ˈprōtəˈtīp|nounmodel and preliminary implementation forthe evaluation of the design of a system, itsimplement...
pro•to•type |ˈprōtəˈtīp|nounmodel and preliminary implementation forthe evaluation of the design of a system, itsimplement...
Sketch by Sangyup Lee
Alexander Graham Bells design sketch of thetelephone.Sketches, undated; handwritten text top and bottom ofpage, 1876.Box 2...
1616Photo: Companhia da Imprensa
1717
1818
Prototypes allow you to check your assumptionsand by checking your assumptions you minimizethe risk of making mistakes whe...
Is it possible to rapid prototypeany kind of product?
Is it possible to rapid prototypeany kind of product?
Rapid PrototypingOur typical projects
National Bank of Canada
a client+an idea=a challenge
?Small budgetTight scheduleLimited resources
* Validate as we go along ** Communicate well *
prototypingAbstractConcrete
Prototyping is a way tomaterialize an idea
Prototyping is above all ameans of communication
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
Rapid PrototypingDetails of the design process
INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPESDEVELOPMENTUSER TESTSUSERRESEARCH
INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPESDEVELOPMENTUSER TESTSUSERRESEARCH
INFORMATIONARCHITECTURE:THE FLOWSKETCHES WIREFRAMES +PROTOTYPES
INFORMATIONARCHITECTURE:THE FLOWSKETCHES WIREFRAMES +PROTOTYPES
http://static.shopify.com/s/files/1/0042/9602/files/website-stencil-template-letter.pdf?1264203576
Whitelines - Squaredhttp://whitelines.se
Whitelines - Squaredhttp://whitelines.selWhitelines - Squaredhttp://whitelines.se
Whitelines - Squaredhttp://whitelines.selWhitelines - Squaredhttp://whitelines.se
UI Stencilswww.uistencils.com
iPhone Wireframe Prototyping Padhttp://paperwireframes.comUI Stencilshttp://www.uistencils.com/products/iphone-sketch-pad
Modoku_iPhone_Sketch_Grid.PDFhttp://modoku.com/resources.html
http://www.erikloehfelm.com/iphone_sketches/iphone_sketchboard.pdfhttp://interactivelogic.net/wp/2009/09/iphone-wireframe-...
http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
http://blog.merrycode.com/windows-phone-7-ux-sketch-templates/
INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPES
Wireframes + Prototypes
Wireframes +PrototypesHow do we choose the right tool for the job?IMOCKUPS
• Web app?• Desktop app?• Mobile app?• Full-featured?• Hotspot only?• Lots of questions... the key is answering the right ...
• What’s the goal of the prototype?• Who’s the audience?• What level of fidelity do you need?• How will you distribute the...
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Choose a tool and then:SHAREPROTOTYPE4
STANDARD UI ELEMENTSLoadlibraries
http://www.matcheck.cz/androidguipsd/
http://graffletopia.com/stencils/689
http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
http://mockupsgallery.com/updated-iphone-stencil
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
Keynote / PowerPointWireframes + Prototypes
Keynote / PowerpointWireframes + Prototypes
Keynote / PowerpointWireframes + Prototypes
12Keynote / PowerpointWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Keynote / Powerpoint:SHAREPROTOTYPE4
http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes
http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes
http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes• Androi...
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
Remember the flow?Keynote / Powerpoint: Add interactivityWireframes + Prototypes
Define your scenarioKeynote / Powerpoint: Add interactivityWireframes + Prototypes
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
Test your prototype......and adjust, if neededKeynote / Powerpoint: Add interactivityWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
Keynote / Powerpoint: Share prototypeWireframes + PrototypesRecommended software fortesting PDF prototypesAdobe Acrobat Re...
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
PROS• Very easy to learn• Cheap (Keynote)• Everyone has it (PowerPoint)CONS• Harder to distribute mobile compatible versio...
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
AXURE RP PROWireframes + PrototypesRAPID PROTOTYPING
Axure RP ProWireframes + Prototypes
12345Axure RP ProWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.totalwireframes.com
Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axureland.com
Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axure.com/download-widget-libraries
Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axure.com/download-widget-libraries
orAxure RP Pro: Load librariesWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
Axure RP Pro: Build wireframesWireframes + Prototypes
Axure RP Pro: Build wireframesWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
Axure RP Pro: Add interactivityWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
Axure RP Pro: Share prototypeWireframes + Prototypes
Axure RP Pro: Share prototypeWireframes + Prototypes
Axure RP Pro: Share prototypeWireframes + Prototypes
Axure RP Pro: Share prototypeWireframes + Prototypes
URLhttp://share.axure.com/XXXXXXXX/name_of_the_pageAxure RP Pro: Share prototypeWireframes + Prototypes
Axure RP Pro: Share prototypeWireframes + Prototypes
Axure RP Pro: Share prototypeWireframes + Prototypes
Dynamic Panels = Advanced Interaction(Drag and Drop, Swipes, Animations,...)Axure RP ProWireframes + Prototypes
PROS• Easy to learn• Capable of producing very low to very high fidelity prototypes• Easy distribution, allow testing in r...
Give it a try
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
Moving from design to codeis a risky stage in a project.Lots of small but importantdetails can be lost...
If we want to communicateevent better yet withprogrammers and save evenmore time, why not givethem some real code to getst...
Some examples...http://twitter.github.io/bootstrap/http://foundation.zurb.com
Some examples...http://www.divshot.comhttp://getwirefy.com
Some examples...http://maker.github.io/ratchet/http://interface2.lesscode.co.nzhttp://dapp.kerofrog.com.au
Some examples...http://appinventor.mit.eduMIT App Inventor
Interface 2Wireframes + Prototypes
Interface 2Wireframes + Prototypes
Interface 2Wireframes + Prototypes
Interface 2Wireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
Interface 2: Load librariesWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
Interface 2: Build wireframesWireframes + Prototypes
Interface 2: Build wireframesWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
Interface 2: Add interactivityWireframes + Prototypes
LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
Interface 2: Share prototypeWireframes + Prototypes
Interface 2: Share prototypeWireframes + Prototypes
PROS• Cheap• No need to use a PC• Exports native code saving app development time• Prototypes look like real iPhone appsCO...
If you have some HTML/CSS skills...
Try
Highly recommended
Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did...
The importance of prototyping
Prototyping is important,no matter the platform(web, mobile, TV, etc.)
• Prototyping allows you to communicate better• Prototyping saves you money (development, marketing, etc.)• Rapid prototyp...
• Mobile phones with touch screens are still a new platformcompared to the web• Mobile apps are even younger• Developing a...
Better design, better software, less time, less moneySmartphone by Nathan Grealish, tablet by Luis Prado and computer from...
Marcio Leibovitchспасибо!@marcioklmarciokl@gmail.com2013
Questions?
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Upcoming SlideShare
Loading in...5
×

Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices

2,254

Published on

http://2013.profsoux.ru/papers/24/

Published in: Technology

Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices

  1. 1. Rapid Prototyping for theWeb and Mobile DevicesMarcio Leibovitch / @marciokl2013
  2. 2. About me
  3. 3. Brazilimage: ©Depositphotos/STYLEPICS
  4. 4. image: ©Depositphotos/AivolieElectronic Engineering
  5. 5. image: ©pc-museum.com1992
  6. 6. Canada
  7. 7. Yu Centrik
  8. 8. 9
  9. 9. DefinitionWhat is a prototype?
  10. 10. pro•to•type |ˈprōtəˈtīp|nounmodel and preliminary implementation forthe evaluation of the design of a system, itsimplementation and its potential, oridentification and understanding of theneeds.
  11. 11. pro•to•type |ˈprōtəˈtīp|nounmodel and preliminary implementation forthe evaluation of the design of a system, itsimplementation and its potential, oridentification and understanding of theneeds.
  12. 12. Sketch by Sangyup Lee
  13. 13. Alexander Graham Bells design sketch of thetelephone.Sketches, undated; handwritten text top and bottom ofpage, 1876.Box 273, "Subject File: The Telephone--Drawing ofthe Telephone, Bells Original"Alexander Graham Bell Family Papers, ManuscriptDivision, Library of Congress.
  14. 14. 1616Photo: Companhia da Imprensa
  15. 15. 1717
  16. 16. 1818
  17. 17. Prototypes allow you to check your assumptionsand by checking your assumptions you minimizethe risk of making mistakes when it’s too late andtoo expensive to correct them.Why do prototypes matter?
  18. 18. Is it possible to rapid prototypeany kind of product?
  19. 19. Is it possible to rapid prototypeany kind of product?
  20. 20. Rapid PrototypingOur typical projects
  21. 21. National Bank of Canada
  22. 22. a client+an idea=a challenge
  23. 23. ?Small budgetTight scheduleLimited resources
  24. 24. * Validate as we go along ** Communicate well *
  25. 25. prototypingAbstractConcrete
  26. 26. Prototyping is a way tomaterialize an idea
  27. 27. Prototyping is above all ameans of communication
  28. 28. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3
  29. 29. Rapid PrototypingDetails of the design process
  30. 30. INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPESDEVELOPMENTUSER TESTSUSERRESEARCH
  31. 31. INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPESDEVELOPMENTUSER TESTSUSERRESEARCH
  32. 32. INFORMATIONARCHITECTURE:THE FLOWSKETCHES WIREFRAMES +PROTOTYPES
  33. 33. INFORMATIONARCHITECTURE:THE FLOWSKETCHES WIREFRAMES +PROTOTYPES
  34. 34. http://static.shopify.com/s/files/1/0042/9602/files/website-stencil-template-letter.pdf?1264203576
  35. 35. Whitelines - Squaredhttp://whitelines.se
  36. 36. Whitelines - Squaredhttp://whitelines.selWhitelines - Squaredhttp://whitelines.se
  37. 37. Whitelines - Squaredhttp://whitelines.selWhitelines - Squaredhttp://whitelines.se
  38. 38. UI Stencilswww.uistencils.com
  39. 39. iPhone Wireframe Prototyping Padhttp://paperwireframes.comUI Stencilshttp://www.uistencils.com/products/iphone-sketch-pad
  40. 40. Modoku_iPhone_Sketch_Grid.PDFhttp://modoku.com/resources.html
  41. 41. http://www.erikloehfelm.com/iphone_sketches/iphone_sketchboard.pdfhttp://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
  42. 42. http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
  43. 43. http://blog.merrycode.com/windows-phone-7-ux-sketch-templates/
  44. 44. INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPES
  45. 45. Wireframes + Prototypes
  46. 46. Wireframes +PrototypesHow do we choose the right tool for the job?IMOCKUPS
  47. 47. • Web app?• Desktop app?• Mobile app?• Full-featured?• Hotspot only?• Lots of questions... the key is answering the right onesWireframes +PrototypesHow do we choose the right tool for the job?
  48. 48. • What’s the goal of the prototype?• Who’s the audience?• What level of fidelity do you need?• How will you distribute the prototype?• What level of prototyping collaboration do you need?• How will you get feedback from users?• How familiar are you with the tool?• How much does it cost?• How many people are using it?• What are the chances that it will stay on the market for a longtime?• Can you use it in your organization?Wireframes +PrototypesHow do we choose the right tool for the job?
  49. 49. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Choose a tool and then:SHAREPROTOTYPE4
  50. 50. STANDARD UI ELEMENTSLoadlibraries
  51. 51. http://www.matcheck.cz/androidguipsd/
  52. 52. http://graffletopia.com/stencils/689
  53. 53. http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
  54. 54. http://mockupsgallery.com/updated-iphone-stencil
  55. 55. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3
  56. 56. Keynote / PowerPointWireframes + Prototypes
  57. 57. Keynote / PowerpointWireframes + Prototypes
  58. 58. Keynote / PowerpointWireframes + Prototypes
  59. 59. 12Keynote / PowerpointWireframes + Prototypes
  60. 60. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Keynote / Powerpoint:SHAREPROTOTYPE4
  61. 61. http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes
  62. 62. http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes
  63. 63. http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes• Android• BlackBerry• Facebook• iPad• iPhone• Twitter Bootstrap• OS X• Web• Windows Phone• Windows 7, 8• Microsoft Office
  64. 64. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
  65. 65. Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  66. 66. Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  67. 67. Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  68. 68. Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  69. 69. Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  70. 70. Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  71. 71. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
  72. 72. Remember the flow?Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  73. 73. Define your scenarioKeynote / Powerpoint: Add interactivityWireframes + Prototypes
  74. 74. Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  75. 75. Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  76. 76. Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  77. 77. Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  78. 78. Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  79. 79. Test your prototype......and adjust, if neededKeynote / Powerpoint: Add interactivityWireframes + Prototypes
  80. 80. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
  81. 81. Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  82. 82. Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  83. 83. Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  84. 84. Keynote / Powerpoint: Share prototypeWireframes + PrototypesRecommended software fortesting PDF prototypesAdobe Acrobat ReaderFor PCsGood ReaderFor iOSezPDFFor Android
  85. 85. Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  86. 86. Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  87. 87. PROS• Very easy to learn• Cheap (Keynote)• Everyone has it (PowerPoint)CONS• Harder to distribute mobile compatible versions• Limited interactivity• Keynote is Mac only, PowerPoint for Mac is not reliablePROS AND CONSKeynote / PowerpointWireframes + Prototypes
  88. 88. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔
  89. 89. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔
  90. 90. AXURE RP PROWireframes + PrototypesRAPID PROTOTYPING
  91. 91. Axure RP ProWireframes + Prototypes
  92. 92. 12345Axure RP ProWireframes + Prototypes
  93. 93. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  94. 94. Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.totalwireframes.com
  95. 95. Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axureland.com
  96. 96. Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axure.com/download-widget-libraries
  97. 97. Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axure.com/download-widget-libraries
  98. 98. orAxure RP Pro: Load librariesWireframes + Prototypes
  99. 99. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  100. 100. Axure RP Pro: Build wireframesWireframes + Prototypes
  101. 101. Axure RP Pro: Build wireframesWireframes + Prototypes
  102. 102. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  103. 103. Axure RP Pro: Add interactivityWireframes + Prototypes
  104. 104. Axure RP Pro: Add interactivityWireframes + Prototypes
  105. 105. Axure RP Pro: Add interactivityWireframes + Prototypes
  106. 106. Axure RP Pro: Add interactivityWireframes + Prototypes
  107. 107. Axure RP Pro: Add interactivityWireframes + Prototypes
  108. 108. Axure RP Pro: Add interactivityWireframes + Prototypes
  109. 109. Axure RP Pro: Add interactivityWireframes + Prototypes
  110. 110. Axure RP Pro: Add interactivityWireframes + Prototypes
  111. 111. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  112. 112. Axure RP Pro: Share prototypeWireframes + Prototypes
  113. 113. Axure RP Pro: Share prototypeWireframes + Prototypes
  114. 114. Axure RP Pro: Share prototypeWireframes + Prototypes
  115. 115. Axure RP Pro: Share prototypeWireframes + Prototypes
  116. 116. URLhttp://share.axure.com/XXXXXXXX/name_of_the_pageAxure RP Pro: Share prototypeWireframes + Prototypes
  117. 117. Axure RP Pro: Share prototypeWireframes + Prototypes
  118. 118. Axure RP Pro: Share prototypeWireframes + Prototypes
  119. 119. Dynamic Panels = Advanced Interaction(Drag and Drop, Swipes, Animations,...)Axure RP ProWireframes + Prototypes
  120. 120. PROS• Easy to learn• Capable of producing very low to very high fidelity prototypes• Easy distribution, allow testing in real usage context• Good development collaboration via shared projects• Good feedback tools via AxShare• Mac and PC compatible• Lot of people using it!CONS More expensive than other toolsPROS AND CONSAxure RP ProWireframes + Prototypes
  121. 121. Give it a try
  122. 122. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔✔
  123. 123. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔✔
  124. 124. Moving from design to codeis a risky stage in a project.Lots of small but importantdetails can be lost...
  125. 125. If we want to communicateevent better yet withprogrammers and save evenmore time, why not givethem some real code to getstarted?
  126. 126. Some examples...http://twitter.github.io/bootstrap/http://foundation.zurb.com
  127. 127. Some examples...http://www.divshot.comhttp://getwirefy.com
  128. 128. Some examples...http://maker.github.io/ratchet/http://interface2.lesscode.co.nzhttp://dapp.kerofrog.com.au
  129. 129. Some examples...http://appinventor.mit.eduMIT App Inventor
  130. 130. Interface 2Wireframes + Prototypes
  131. 131. Interface 2Wireframes + Prototypes
  132. 132. Interface 2Wireframes + Prototypes
  133. 133. Interface 2Wireframes + Prototypes
  134. 134. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  135. 135. Interface 2: Load librariesWireframes + Prototypes
  136. 136. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  137. 137. Interface 2: Build wireframesWireframes + Prototypes
  138. 138. Interface 2: Build wireframesWireframes + Prototypes
  139. 139. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  140. 140. Interface 2: Add interactivityWireframes + Prototypes
  141. 141. LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  142. 142. Interface 2: Share prototypeWireframes + Prototypes
  143. 143. Interface 2: Share prototypeWireframes + Prototypes
  144. 144. PROS• Cheap• No need to use a PC• Exports native code saving app development time• Prototypes look like real iPhone appsCONS• Harder to manipulate, longer prototyping time• Limited control on some of UI objects• iOS onlyPROS AND CONSInterface 2Wireframes + Prototypes
  145. 145. If you have some HTML/CSS skills...
  146. 146. Try
  147. 147. Highly recommended
  148. 148. Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔✔✔
  149. 149. The importance of prototyping
  150. 150. Prototyping is important,no matter the platform(web, mobile, TV, etc.)
  151. 151. • Prototyping allows you to communicate better• Prototyping saves you money (development, marketing, etc.)• Rapid prototyping helps you be part of an agile environmentThe importance of prototyping
  152. 152. • Mobile phones with touch screens are still a new platformcompared to the web• Mobile apps are even younger• Developing and deploying mobile apps is more complex thanweb sites and web apps, thus more costly• App weaknesses are exposed very quickly through the AppStore and Google Play review systemsWhy is it even more important torapid prototype mobile apps?
  153. 153. Better design, better software, less time, less moneySmartphone by Nathan Grealish, tablet by Luis Prado and computer from the Noun ProjectRapidPrototyping
  154. 154. Marcio Leibovitchспасибо!@marcioklmarciokl@gmail.com2013
  155. 155. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×