1 / 21

Pr o totyping I deas

Discover the importance and benefits of prototyping in interaction design. Learn about different prototyping tools and techniques to refine your design. Use this guide to create low-fidelity prototypes and effectively communicate your ideas.

baguon
Télécharger la présentation

Pr o totyping I deas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Prototyping Ideas

  2. “ ” Simplicity is the ultimate sophistication. -- Leonardo Da Vinci

  3. 13,000 pages

  4. Software Screen sketch 3D printed model Video Cardboard mockup What does prototype mean in interaction design?

  5. Decision-Making Compare design variations and resolve conflicts Communication Create shared preview among all stakeholders Evaluation & Feedback Fast and inexpensive ways to refine design Why do we need prototypes ?

  6. High Medium Low Prototypes categorized by Fidelity

  7. Low Medium High Prototypes categorized by Fidelity

  8. Paper Digital Prototypes categorized by Medium

  9. 2 Only Steps ？! How to prototype ?

  10. 1. Sketch key pages on separate paper 2. Specify how user will transition between them using Arrows Digital Paper Create key pages by placing UI elements in the right place. Add interactivity by establishing links between them

  11. 1 2 anything familiar?

  12. 1. Balsamiq Sketchy Style Balsamiq Mockups lightweight, low fidelity, rapid prototyping tool 75 built-in UI elements + 187 icons + UGC community Easy to use, intuitive, but not interactive enough

  13. Widgets Workspace

  14. 2. Axure PS In Prototype Design Axure RP Medium-high fidelity enterprise-level prototyping solution Generate realistic functional prototype without coding Highly interactive , longer learning curve

  15. Sitemap Workspace Interact! add drag Widgets Static property Dynamic property Page Masters

  16. 3. POP (Prototyping On Paper) Paper and Mobile Only! Hand-drawn joy + easy mobile presentation Design on paper  Take pictures  Simulate

  17. Design in the wild Design in the wild…

  18. Resources Printable sketching templates http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html Balsamiq Download: http://balsamiq.com/download/ Liscense name: HCI Online 0214 eJzzzU/OLi0odswsqvFw9lTwz8vJzEtVMDAyNKkxNLY0NjM0NzMAgZqQGkMAR9gNSA== Liscense key: UI Library: https://mockupstogo.mybalsamiq.com/projects Chrome plug-in: https://chrome.google.com/webstore/detail/balsamiq-mockups/pplbmgaodhjmbklkgkgmlghaekcfhhkk http://web.cs.dal.ca/~hzhou/3130/prototype/balsimiq.rar Example: Axure Axure 7: http://www.axure.com/downloadthanks?dl=70pc UI Library: http://www.axure.com/community/widget-libraries Example: http://web.cs.dal.ca/~hzhou/3130/prototype/axure.rar

  19. POP https://popapp.in/ Mockflow http://www.mockflow.com/ Justinmind Download: http://www.justinmind.com/ Installation instruction: http://www.justinmind.com/media/Justinmind_Prototyper_license_installation.pdf Liscense key: JP-evaluation-50-professional-42864482-4473== By using this software and this academic licenceprovided for UC San Diego / Coursera you agree that the software will not be used on any projects whose outputs will be used by a commercial, government, political or religious organisation. If you cannot agree, you must purchase a full licence.

  20. Reference http://arthistory.about.com/cs/namesdd/a/leonardo.htm http://www.slideshare.net/UXPA/design-like-davinciv11 web.nmsu.edu/~ogden/cs485/class9-10.ppt http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/ http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-workshop-part-2

  21. Exercise Design a low-fidelity prototype (paper or digital) for at least one user story in your project. • * Be sure to answer the following questions before you start: • Who is the user? • What is the task? • Why would the user need to complete this task? • When and Where (scenario/context)? • How could the user go through the task with your prototype?

More Related