Digital Prototype

OK, you've learned how to create a wireframe using InVision.

Now, you'll learn how to create a working prototype of your app as it will look running on a phone. It's very easy.

Your assignment is to making a working mockup up your final app using InVision and share it with me at mbrautigam@metroed.net. If your final app has a lot of screens (or HTML pages), you can mockup just part of it, but only if your app has more than, say, six screens.

This assignment is due on Sunday, May 10 at 11:59 pm.

Comparison of Prototyping Programs

Terms

• Wireframe = draw a low-fidelity sketch using a graphics program or pencil
• Digital prototype = a model with working navigation but no real data
  

InVision

• EAB (Employer Advisory Board) want this one
• Wireframing and Prototyping are separate and do not connect
• Prototyping requires that you import graphics from outside
• Use on the web / cloud

Fluid UI

• Easy to use
• Prototyping and wireframing are done together
• Use on the web / cloud

Balsamiq

• Easy to use
• Wireframing only
• No prototyping
• Use on the web / cloud

Axure

• Download the program on Mac, Windows
• Not easy to learn
• Expensive
• 30-day free trial

Adobe XD (Experience Design)

• Part of Adobe
• Download the program on Mac, Windows
• Runs on iPad?
• I don’t know anyone who actually uses it

Sketch

• Download the program on Mac
• Runs only on Mac?

Others

• https://medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47