WireFrames & Prototypes


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.



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


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


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

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


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


  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).