EX13 - Wireframing

Adding Fidelity to your UX Toolbox

The simple boxes and lines of a wireframe allow form to be applied to ideas without the investment required for a polished interface.

Updated October 30, 2020

As an iterative profession, Product Design goes through multiple iterations. When the process is functioning well, these cycles push the product forward while eliminating mistakes through the use of feedback and review.

To receive feedback on your work, you have to be able to communicate with your team. Because a design will often first reside inside of our heads and we’re hard pressed to convince someone that they see what we see.

This is where wireframes play a vital role in the internal communication among team members. Wireframes aren’t finished designs, and because they lack refinement, co-workers are more comfortable to talk openly and honestly about the effort.

Resources for review

Article/Video Source/Author
Cleaning up the roughs New Pragmatic
Wireframing with Figma (video) New Pragmatic

Exercise

Length: One-to-two hours to complete.

At some point, you need more than words and user flows to determine the potential contures of a product. That moment is when wireframing takes centerstage as the lowest cost way to begin visualizing possible solutions.

Using your prior research and this Figma file, select the most crucial task that is unique to your product and create the wireframes needed to complete the task. The user flows you created for the task selected should provide the steps involved, but the wireframe will allow you to outline the options a user could posssibly utilize.

///

Once complete, update your Program Journal with links to any assets produced in this exercise. Post your Journal in the #Feedback-Loop channel for review.

///

Up next Microcopy

Receive daily feedback and weekly meetings with Chris Courtney by signing up for monthly mentorship today!

Sign up today!