Presentation is loading. Please wait.

Presentation is loading. Please wait.

Prototyping Ideas. Simplicity is the ultimate sophistication. “ -- Leonardo Da Vinci.

Similar presentations


Presentation on theme: "Prototyping Ideas. Simplicity is the ultimate sophistication. “ -- Leonardo Da Vinci."— Presentation transcript:

1 Prototyping Ideas

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

3 13,000 pages

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

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

6 Prototypes categorized by Fidelity Low Medium High

7 Prototypes categorized by Fidelity Low High Medium

8 Prototypes categorized by Medium Paper Digital

9 How to prototype ? Only Steps ? ! 2

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

11 anything familiar ? 1 2

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

13 Workspace Widgets

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

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

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

17 Design in the wild…

18 Resources Printable sketching templates Balsamiq Liscense name:HCI Online 0214 Liscense key: eJzzzU/OLi0odswsqvFw9lTwz8vJzEtVMDAyNKkxNLY0NjM0NzMAgZqQGkMAR9gNSA== UI Library:https://mockupstogo.mybalsamiq.com/projects https://chrome.google.com/webstore/detail/balsamiq-mockups/pplbmgaodhjmbklkgkgmlghaekcfhhkk Chrome plug-in: Axure 7: Example: UI Library:http://www.axure.com/community/widget-libraries

19 Mockflow Justinmind Installation instruction: Liscense key: JP-evaluation-50-professional == POP https://popapp.in/ By using this software and this academic licence provided 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 1.http://arthistory.about.com/cs/namesdd/a/leonardo.htm 2.http://www.slideshare.net/UXPA/design-like-davinciv11 3.web.nmsu.edu/~ogden/cs485/class9-10.ppt 4.http://www.smashingmagazine.com/2010/06/16/design- better-faster-with-rapid-prototyping/ 5.http://www.slideshare.net/Rachel_Hinman/mobile- prototyping-essentials-workshop-part-2 Reference

21 Design a low-fidelity prototype (paper or digital) for at least one user story in your project. Exercise * 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?


Download ppt "Prototyping Ideas. Simplicity is the ultimate sophistication. “ -- Leonardo Da Vinci."

Similar presentations


Ads by Google