WireFrames & Prototypes

OVERVIEW

Wireframing and prototyping are to digital design as the pre-design phase is to construction.
No engineer, architect, or site supervisor would begin constructing a building before the pre-design phase was complete, had time to be well reviewed, and ultimately approved by the necessary bodies. 

The reason being is that many costly and potentially fatal mistakes can be avoided if we fully develop a plan and blueprint via wireframing and prototyping. these tools allow designers to make iterative variations to a design with relative ease. 

Another benefit to this process is that it may expose issues that hadn’t been discussed or discovered up until that point. This not only saves you time, money, and effort, but it also makes your design better in the long run.

WATCH

Required

(3:04) Insight from an agency perspective into wireframing

Recommended

(32:13) wireframe and analysis of design phases (Some great Tips!)

READ

Whats the difference between wireframes and prototypes? (Website)
 By Emily Grace Adiseshiah, Justinmind

Wireframing (Website)
Prototyping (Website)
 By Usability.gov

LISTEN

Project Planning and Prototyping With Wireframes (Podcast, 14:24)
Transcript
 By Lighthouse London, Totally Wired

HANDS ON

  1. Open Adobe XD and complete the tutorial, located at the bottom left of the main window.
  2. With the remaining class time and using a previous interface you have designed in the previous class period, I would like to see you construct a process driven piece of your prototype, for a mobile device (i.e. shopping cart, account registration, search, etc).