Digital prototypes

Requires: desktop web access

Let's contrast the paper prototyping we did earlier with modern digital user interface prototyping tools.

In this lab, you'll use a diagramming tool to create a user interface mockup.

Find your partner (1 min)

This should be the same person you made a paper prototype with in the last class meeting.

Build mockups (20 min)

Use a free web-based diagramming tool such as Draw.io or Gliffy to create two mockup screens: a before screen, showing the state of a UI before a user clicks, and an after screen, showing the state of your UI after they click. You'll use these to create an interactive prototype.

InVision (20 min)

Visit InVision. You can either create a free trial account, or if you want, you can get a free upgrade at this link the education code 56-73-13-19 (valid this quarter only), and create an interactive prototype using your two screen mockups. Use a hotspot that navigates from the before screen to the after screen.

Reflection (5 min)

What was different about using paper versus this digital tool?

Credit (5 min)

Show your prototype and sign for credit.