Back to blog

October 7, 2022

How to Create Wireframes and Prototypes

Sunjay Armstead

&

Lisa Panke

UI/UX Designer and Engineer II
Louisburg, NC

Planning software applications can be a lot of fun with all the data collected from research, a structured application map, and clearly defined user stories. Even more exciting, though, is visualizing those plans with wireframes and setting them into motion with interactive prototypes.

Why We Wireframe

At this point, we know what our users need, have some ideas on how to solve their problems, and are ready to visualize it. It can be tempting to open Figma right away and immediately build out your ideas with precision. However, we recommend taking a more strategic approach by starting with a wireframe.

Wireframes are simple sketches that evolve from a drawing to more concrete screens with colors and fonts. They should be based on existing and proven patterns that are familiar to the user, so do your research first.

We love to go to Dribbble, Behance, and other resources to see what has proven effective and what reappears over multiple solutions. Still, we can never be 100% sure that these previously established patterns will work for our specific users. That’s why we encourage doing usability tests before shipping products.

What Are Wireframes

Let’s break down the stages of wireframing.

Low-Fidelity

Low-fidelity wireframes are meant to be quick sketches to quickly communicate visual ideas. Think of a typical box diagram of the fancy new page you plan to build. In this step, your goal is mainly to get an idea in the wild. No need for details or neat lines! You can use wireframing software for this, but I tend to rely on my sketchpad (plus it’s more fun to doodle on paper).

Low-Fidelity Wireframe of the Residency Dashboard
Low-Fidelity Wireframe of the Residency Dashboard

Mid-Fidelity

Mid-fidelity wireframes are a step up from low-fidelity, but not as detailed as the final user interface. These frames are neater representations of your design direction and typically employ one or two monochromatic colors. The goal here is to illustrate a more faithful representation of layout, typography, and design patterns.

Mid-Fidelity Wireframe of the Residency Dashboard
Mid-Fidelity Wireframe of the Residency Dashboard

High-Fidelity

High-fidelity wireframes are typically what you’ll find on Dribbble and Behance. These frames are a near-perfect representation (size, layout, design elements, etc.) of the application after it’s developed.

High-Fidelity Wireframe of the Residency Dashboard
High-Fidelity Wireframe of the Residency Dashboard

From Wireframes to Prototypes

If you have the budget and time to test your designs with real users (which we always recommend), the next step is to build a prototype from all the wireframes you designed in the previous step. Figma is a fantastic tool to do that!

Think about tasks that you want users to complete in a real-world scenario (scenarios help users to visualize real situations they would use the app in). All task flows should have a clear starting point and a point of completion.

Example from the Residency App:

Scenario: Lisa has completed the third quarter of her residency.

Task: Evaluate Lisa’s performance in the residency app and review her summarized results.

Quarterly Evaluation Screen for Residents

Decide if you want to give users a lot or limited freedom in your prototype. Will there be only one way to complete a task, or will they be able to click anywhere to get there? Then connect all buttons with screens and all actions that the user can take within your flow.

You can also choose how screens should transition into each other (instantly, dissolving, or smart-animated). And don’t forget to test your flows a couple of times by yourself or with a teammate.

The Software Residency’s Prototype for Mentors with a crazy amount of connections

Make sure your users are set up for success and who knows, maybe during the process of building your prototype you’ll discover discrepancies that can be solved before moving on to usability testing.

Next Up

Are you curious about how we tested our Software Residency App designs with a prototype and what we learned from talking to real users? Stay tuned and visit the ZEAL blog again next week. Until then, let’s talk about your next idea. We can’t wait to hear from you!

More from this Series

  1. Putting Together the Design Puzzle
  2. How to understand users with User Research?
  3. How to synthesize research with Affinity Mapping
  4. How to Create an Application Map
  5. How to Create UI Flows
  6. How to Write Great User Stories
  7. How to Create Wireframes and Prototypes

Photo by Kelly Sikkema on Unsplash

This article has been written in collaboration with Lisa Panke.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Up next