Downloaded 111 times
Uploaded byПрофсоUX
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
This document discusses rapid prototyping for web and mobile devices. It begins by defining what a prototype is, as a preliminary model or implementation used to evaluate a design. It then discusses the importance of prototyping, as it allows checking assumptions and minimizing risks. Various prototyping tools are examined, including Keynote/PowerPoint, Axure RP, and Interface 2. Keynote/PowerPoint are easy to use but have limited interactivity, while Axure RP allows more advanced prototyping but costs more. Interface 2 outputs native code but is iOS only. Rapid prototyping is concluded to be important for communicating ideas, saving costs, and enabling agile development, especially for mobile where apps are quickly
More Related Content
Similar to Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
- 1. Rapid Prototyping forthe Web and Mobile Devices Marcio Leibovitch / @marciokl2013
- 2.
- 3.
- 4.
- 5.
- 7.
- 8.
- 9.
- 10. Definition What is aprototype?
- 11. pro•to•type |ˈprōtəˈtīp| noun model andpreliminary implementation for the evaluation of the design of a system, its implementation and its potential, or identification and understanding of the needs.
- 12. pro•to•type |ˈprōtəˈtīp| noun model andpreliminary implementation for the evaluation of the design of a system, its implementation and its potential, or identification and understanding of the needs.
- 13.
- 14. Alexander Graham Bell'sdesign sketch of the telephone. Sketches, undated; handwritten text top and bottom of page, 1876. Box 273, "Subject File: The Telephone--Drawing of the Telephone, Bell's Original" Alexander Graham Bell Family Papers, Manuscript Division, Library of Congress.
- 16. 1616Photo: Companhia daImprensa
- 17.
- 18.
- 19. Prototypes allow youto check your assumptions and by checking your assumptions you minimize the risk of making mistakes when it’s too late and too expensive to correct them. Why do prototypes matter?
- 20. Is it possibleto rapid prototype any kind of product?
- 21. Is it possibleto rapid prototype any kind of product?
- 24. Rapid Prototyping Our typicalprojects
- 25. National Bank ofCanada
- 26. a client + an idea = achallenge
- 27.
- 28. * Validate aswe go along * * Communicate well *
- 29.
- 30. Prototyping is away to materialize an idea
- 31. Prototyping is aboveall a means of communication
- 32. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3
- 33. Rapid Prototyping Details ofthe design process
- 34.
- 35.
- 36.
- 37.
- 38.
- 40.
- 41. Whitelines - Squared http://whitelines.sel Whitelines- Squared http://whitelines.se
- 42. Whitelines - Squared http://whitelines.sel Whitelines- Squared http://whitelines.se
- 43.
- 44. iPhone Wireframe PrototypingPad http://paperwireframes.com UI Stencils http://www.uistencils.com/products/iphone-sketch-pad
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. Wireframes + Prototypes How dowe choose the right tool for the job? IMOCKUPS
- 52. • Web app? •Desktop app? • Mobile app? • Full-featured? • Hotspot only? • Lots of questions... the key is answering the right ones Wireframes + Prototypes How do we choose the right tool for the job?
- 53. • What’s thegoal 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 + Prototypes How do we choose the right tool for the job?
- 54. LOAD LIBRARIES1 BUILD WIREFRAMES2 ADD INTERACTIVITY3 Choose a tooland then: SHARE PROTOTYPE4
- 55.
- 56.
- 57.
- 58.
- 61.
- 63. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3
- 65. Keynote / PowerPoint Wireframes+ Prototypes
- 66. Keynote / Powerpoint Wireframes+ Prototypes
- 67. Keynote / Powerpoint Wireframes+ Prototypes
- 68. 1 2 Keynote / Powerpoint Wireframes+ Prototypes
- 69.
- 70. http://keynotopia.com/ Keynotopia $97 bundle, singleuser Keynote / Powerpoint: Load libraries Wireframes + Prototypes
- 71. http://keynotopia.com/ Keynotopia $97 bundle, singleuser Keynote / Powerpoint: Load libraries Wireframes + Prototypes
- 72. http://keynotopia.com/ Keynotopia $97 bundle, singleuser Keynote / Powerpoint: Load libraries Wireframes + Prototypes • Android • BlackBerry • Facebook • iPad • iPhone • Twitter Bootstrap • OS X • Web • Windows Phone • Windows 7, 8 • Microsoft Office
- 73.
- 74. Keynote / Powerpoint:Build wireframes Wireframes + Prototypes
- 75. Keynote / Powerpoint:Build wireframes Wireframes + Prototypes
- 76. Keynote / Powerpoint:Build wireframes Wireframes + Prototypes
- 77. Keynote / Powerpoint:Build wireframes Wireframes + Prototypes
- 78. Keynote / Powerpoint:Build wireframes Wireframes + Prototypes
- 79. Keynote / Powerpoint:Build wireframes Wireframes + Prototypes
- 80.
- 81. Remember the flow? Keynote/ Powerpoint: Add interactivity Wireframes + Prototypes
- 82. Define your scenario Keynote/ Powerpoint: Add interactivity Wireframes + Prototypes
- 83. Keynote / Powerpoint:Add interactivity Wireframes + Prototypes
- 84. Keynote / Powerpoint:Add interactivity Wireframes + Prototypes
- 85. Keynote / Powerpoint:Add interactivity Wireframes + Prototypes
- 86. Keynote / Powerpoint:Add interactivity Wireframes + Prototypes
- 87. Keynote / Powerpoint:Add interactivity Wireframes + Prototypes
- 88. Test your prototype... ...andadjust, if needed Keynote / Powerpoint: Add interactivity Wireframes + Prototypes
- 89.
- 90. Keynote / Powerpoint:Share prototype Wireframes + Prototypes
- 91. Keynote / Powerpoint:Share prototype Wireframes + Prototypes
- 92. Keynote / Powerpoint:Share prototype Wireframes + Prototypes
- 93. Keynote / Powerpoint:Share prototype Wireframes + Prototypes Recommended software for testing PDF prototypes Adobe Acrobat Reader For PCs Good Reader For iOS ezPDF For Android
- 94. Keynote / Powerpoint:Share prototype Wireframes + Prototypes
- 95. Keynote / Powerpoint:Share prototype Wireframes + Prototypes
- 96. PROS • Very easyto 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 reliable PROS AND CONS Keynote / Powerpoint Wireframes + Prototypes
- 97. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3 ✔
- 98. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3 ✔
- 99. AXURE RP PRO Wireframes+ Prototypes RAPID PROTOTYPING
- 100. Axure RP Pro Wireframes+ Prototypes
- 101. 1 2 3 4 5 Axure RP Pro Wireframes+ Prototypes
- 102.
- 103. Axure RP Pro:Load libraries Wireframes + Prototypes http://www.totalwireframes.com
- 104. Axure RP Pro:Load libraries Wireframes + Prototypes http://www.axureland.com
- 105. Axure RP Pro:Load libraries Wireframes + Prototypes http://www.axure.com/download-widget-libraries
- 106. Axure RP Pro:Load libraries Wireframes + Prototypes http://www.axure.com/download-widget-libraries
- 107. or Axure RP Pro:Load libraries Wireframes + Prototypes
- 108.
- 109. Axure RP Pro:Build wireframes Wireframes + Prototypes
- 110. Axure RP Pro:Build wireframes Wireframes + Prototypes
- 111.
- 112. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 113. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 114. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 115. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 116. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 117. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 118. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 119. Axure RP Pro:Add interactivity Wireframes + Prototypes
- 120.
- 121. Axure RP Pro:Share prototype Wireframes + Prototypes
- 122. Axure RP Pro:Share prototype Wireframes + Prototypes
- 123. Axure RP Pro:Share prototype Wireframes + Prototypes
- 124. Axure RP Pro:Share prototype Wireframes + Prototypes
- 125. URL http://share.axure.com/XXXXXXXX/name_of_the_page Axure RP Pro:Share prototype Wireframes + Prototypes
- 126. Axure RP Pro:Share prototype Wireframes + Prototypes
- 127. Axure RP Pro:Share prototype Wireframes + Prototypes
- 128. Dynamic Panels =Advanced Interaction (Drag and Drop, Swipes, Animations,...) Axure RP Pro Wireframes + Prototypes
- 129. PROS • Easy tolearn • 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 tools PROS AND CONS Axure RP Pro Wireframes + Prototypes
- 130. Give it atry
- 131. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3 ✔ ✔
- 132. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3 ✔ ✔
- 133. Moving from designto code is a risky stage in a project. Lots of small but important details can be lost...
- 134. If we wantto communicate event better yet with programmers and save even more time, why not give them some real code to get started?
- 135.
- 136.
- 137.
- 138.
- 139. Interface 2 Wireframes +Prototypes
- 140. Interface 2 Wireframes +Prototypes
- 141. Interface 2 Wireframes +Prototypes
- 142. Interface 2 Wireframes +Prototypes
- 143.
- 144. Interface 2: Loadlibraries Wireframes + Prototypes
- 145.
- 146. Interface 2: Buildwireframes Wireframes + Prototypes
- 147. Interface 2: Buildwireframes Wireframes + Prototypes
- 148.
- 149. Interface 2: Addinteractivity Wireframes + Prototypes
- 150.
- 151. Interface 2: Shareprototype Wireframes + Prototypes
- 152. Interface 2: Shareprototype Wireframes + Prototypes
- 153. PROS • Cheap • Noneed to use a PC • Exports native code saving app development time • Prototypes look like real iPhone apps CONS • Harder to manipulate, longer prototyping time • Limited control on some of UI objects • iOS only PROS AND CONS Interface 2 Wireframes + Prototypes
- 154. If you havesome HTML/CSS skills...
- 155.
- 156.
- 158. Validate our designdecisions (usability, mental model) Give clear specifications to developers Validate the client’s idea (did we get it right?)PROTOTYPE #1 PROTOTYPE #2 PROTOTYPE #3 ✔ ✔ ✔
- 159. The importance ofprototyping
- 160. Prototyping is important, nomatter the platform (web, mobile, TV, etc.)
- 161. • Prototyping allowsyou to communicate better • Prototyping saves you money (development, marketing, etc.) • Rapid prototyping helps you be part of an agile environment The importance of prototyping
- 162. • Mobile phoneswith touch screens are still a new platform compared to the web • Mobile apps are even younger • Developing and deploying mobile apps is more complex than web sites and web apps, thus more costly • App weaknesses are exposed very quickly through the App Store and Google Play review systems Why is it even more important to rapid prototype mobile apps?
- 163. Better design, bettersoftware, less time, less money Smartphone by Nathan Grealish, tablet by Luis Prado and computer from the Noun Project Rapid Prototyping
- 164.
- 165.