Turn Concepts to Reality Using Prototyping and Feedback Loops
0 likes684 views
The document discusses prototyping and feedback loops for turning concepts into reality, emphasizing visual thinking, technology, and audience in the development process. It provides various tools and techniques for wireframing, low/high fidelity prototyping, and user experience design. Key themes include the importance of communication, iteration, and user engagement throughout the design process.
Turn Concepts to Reality Using Prototyping and Feedback Loops
- 1. Nick Floro Prototyping + Feedback Loops: Turning Concepts into Reality sealworks.com/prototyping.pdf
- 2. think inspire & have fun share & explore experiment
- 8. communicate
- 9. tell a story
- 14. Contents Open Accordion Closed Accordion Closed Accordion Closed Accordion Hamburger Menu Accordion Blind / MODAL Play Text YES Button
- 15. peek and pop
- 16. Sketch A Screen New Project Stakeholder Activity • Multiple Choice • Drag & Drop • Photos • Mobile + Desktop
- 17. Sketch A Screen New Project Stakeholder Activity • Multiple Choice • Drag & Drop • Photos • Mobile + Desktop Questions?
- 18. Questions ‣ Can you provide a sample question(s) ‣ Are the questions short or long (approx how many words or sentences)? ‣ How many choices would a question have? ‣ When can we review the content?
- 19. Visual Thinking
- 24. L O O P S
- 26. Brainstorming
- 28. What is the challenge?
- 29. What are the options?
- 32. 3 Key Factors 1. Audience 2. Technology 3. User Stories
- 33. 3 Key Factors 1. Audience 2. Technology 3. User Stories Why?
- 37. Post-It App
- 39. Post-It App
- 41. Ready or not, here they come : )
- 42. Keep it Simple
- 43. Mobile Apps
- 45. Paper by FiftyThree for iOS
- 47. SketchBook
- 48. Paper by FiftyThree for iOS
- 53. Carbo Handwriting in the Digital Age
- 64. MarvelApp.com
- 65. MarvelApp.com
- 67. Screen 1 Menu Screen 2 Content Screen (include a video & text) Screen 3 Interactive Timeline or Activity (move to see time) MarvelApp.com on paper or in app draw
- 68. Wireframing Low / High Fidelity
- 69. Tools: • Wireframes – Keynote / PowerPoint Quick Prototyping Techniques
- 70. This is my question example where you would tell a story and ask for a response? option 1 option 2 option 3 option 4 option 5
- 71. This is my question example where you would tell a story and ask for a response? Answer example the user could select from one of the options. Answer example the user could select from one of the options. Answer example the user could select from one of the options. Answer example the user could select from one of the options. Answer example the user could select from one of the options.
- 73. keynotopia.com
- 74. Custom Template in Keynote
- 78. Apple Keynote
- 81. Powerpoint Create a new document Add 3 Slides Create 3 buttons • Multiple Choice • Drag & Drop • Photos • Mobile + Desktop
- 82. Adobe Acrobat
- 87. balsamiq.com
- 89. InvisionApp.com
- 91. Tools
- 93. Craft for Photoshop and Sketch labs.invisionapp.com/craft
- 94. Adobe XD | Experience Design www.adobe.com/products/experience-design.html
- 95. Adobe XD | Experience Design www.adobe.com/products/experience-design.html
- 97. Communication
- 98. The Good The Ugly The Bad
- 99. Date Description Details Screen/Video Results Estimate 12/11/16 The screen flashes. When I click on the screen it flashes. Its not suppose to. Attached. Task The Good The Ugly The Bad
- 100. Date Description Details Screen/Video Results Estimate 12/11/16 The screen flashes. When I click on the screen it flashes. Its not suppose to. Attached. Could not recreate. Task The Good The Ugly The Bad
- 101. It’s Critical
- 102. Date Description Details Screen/Video Results Estimate 12/11/16 The screen flashes. When I click on the screen it flashes. Its not suppose to. Attached. Attached screen shows how it was recreated. 1 Critical Task The Good The Ugly The Bad
- 103. Discuss Discuss, Prioritize and Get on the Same Page
- 105. User Interface | UI
- 106. User Interface | UI
- 107. User Experience | UX
- 108. User Experience | UX
- 109. Responsive Design
- 110. Responsive Design
- 111. getskeleton.com
- 112. getBootStrap.com
- 118. Parallax
- 125. Flat Pages
- 126. Apple Weather
- 127. Yahoo Weather
- 128. Yahoo Weather
- 129. Yahoo Weather
- 130. Tab Bar
- 131. Apple Clock
- 133. Tree Structure < Back Screen One > Screen Two > Screen Three > Screen Four > Screen Five > Screen Six >
- 134. First Aid
- 135. First Aid
- 136. First Aid
- 137. First Aid
- 138. Innovation >
- 139. Pulse
- 140. Pulse
- 141. Pulse
- 142. evernote
- 143. evernote
- 144. Flipboard
- 145. Zite
- 146. Zite
- 147. Zite
- 148. Zite
- 150. ResourcesTo help you grow.
- 151. intuitive navigation and information design
- 152. abookapart.com
- 153. Nancy Durate Garr Reynolds
- 155. BrowserStack.com
- 156. UserTesting.com
- 157. uxpin.com
- 158. Reflector Air Parrot Mirror Your Device
- 159. ipsum-generator.com
- 160. CupCakeIpsum.com
- 161. storyboardthat.com
- 162. JingProject.com
- 163. techsmith.com/Snagit
- 164. Adobe Capture
- 170. appear.in
- 171. What can you apply from today?
- 172. Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro
- 173. Project How would you convert it to mobile? How do you want to improve the experience UI/UX? MarvelApp.com