EX16 - Wireframing

Determining the shape of things

The overall form of a project must be determined before you can begin to address the details.

Updated February 17, 2020

Congratulations! The visual form of your project is about to cross into the digital realm.

Wireframing is a critical moment for several reasons, but this is also a moment to take care and exercise caution. In many situations, you're going to have people pushing for a finished product. I'm not encouraging you to stall — but to remind those around you that wireframing is an essential step for more than just determining the form the project will take.

Wireframes provide the foundation needed for a prototype, and designers make prototypes so we can test them with users and make adjustments. We make these adjustments to keep our companies and clients from wasting valuable money and time.

When you frame wireframes in the proper context, it is easy to see how far away from the finish line that they reside. Making sure that is communicated to the other members of your team is the quickest way to alleviate any potential issues with the good people whom you are working for and with.

Resources for review

Article/Video Source/Author
Cleaning up the roughs New Pragmatic


Length: Around six hours to complete

As you move from your previous rough sketches to these initial wireframes, it is important to remember that you're goal isn't just to translate your work into digital form. The prior work related to content creation now plays a major factor in helping your give your project an actual shape. While your sketches where a rough estimate, these initial wireframes are looking to properly size the project based on content.

All work performed for this exercise should be conducted in Figma. The video above is an excellent resource if you're still getting the hang of the tool.

Your wireframes will form the base for the next step in your project — the prototype — so you will want to include the wireframes needed to complete the tasks that you intend on testing with users.

These may include but are not limited to:

  • Product Homepage
  • Pricing
  • Menu
  • Sign-up/Sign-in
  • Cart/Checkout
  • User Account

Once you design your initial wireframes, you are encouraged to schedule a mentor call for review and guidance.

This is a larger exercise, so you are encouraged to post your Program Journal in the #Feedback-Loop channel for review as you progress through the work.


Up next Fresh Market: Microcopy

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

Sign up today!