Wireframes

What are wireframes?

Wireframes are rough sketches of an interface that are often used in discussions with stakeholders to communicate functionality and to rapidly encourage ideation and iteration. They also help with understanding the requirements at a deeper level, as it helps uncover edge cases. They do not focus on the visual style of the product, and instead, communicate the layout and on-screen elements in the form of simple shapes and placeholder text. Designers may also write directly on the wireframe to communicate functionality.

When used properly, they can save countless hours of fully designing an interface just to find out they got the functionality wrong and have to start again. Wireframes are considered a “low-fidelity” design.

A rough sketch of an interface on a notepad.

What do you need to wireframe?

timeTIME

  • 2-5 minutes per screen
  • 30-60 minutes for review

materialsMATERIALS

  • Pens and paper
  • Or a digital wireframing program (see below for links)

How do you create wireframes?

A rough sketch, showing a few boxes and scribbled lines.
  1. Step 1: Understand the goals and requirements

    Are you trying to design a new checkout system? Are you trying to get them to the checkout page in fewer steps? Understanding the requirements of the feature will allow you to create proper user tasks in step 2.
  2. Step 2: Create a task that the user should complete

    Now that you understand what your requirements, create a user task. This is a goal for the user to accomplish on your site or within your product, and should be broken down into the ideal and simplest steps the user will take. These ideal steps are also known as “the happy path”.
  3. Step 3: Create a wireframe of the user’s starting point

    Once you have the task and happy path defined, you can start wireframing. You should start at the very first step in their task. Sketch out the interface of the page they will be looking at during the first step.
  4. Step 4: Create a wireframe for each step in the user task

    Next, create a wireframe for each step in the happy path until the end of the task. You can use text to explain functionality, and arrows to show movement.
  5. Step 5: Create wireframes for any secondary or additional steps

    These are interactions outside of the happy path, and are important to wireframe as it can help you understand the implications of your design at a deeper level. You may catch things in this step that will force you to change the functionality in your happy path.
  6. Step 6: Create another set of wireframes

    You should now be done your first iteration of your wireframes. Now you should set your set of wireframes aside and address the functionality in a different way. Try presenting everything differently. Go a little crazy! Now is the time to experiment, as it costs next to nothing and could result in some new and exciting ways to accomplish the same task. It also gives you more to discuss when you review them with your stakeholders.
  7. Step 7: Continue creating different sets of wireframes

    Continue crafting different sets of wireframes until you run out of ideas, or run out of time.
  8. Step 8: Review them all

    It’s important to show all of your sets of wireframes because it allows the group to focus on the good parts of each set, and you are less likely to get attached to your designs if you only presented one.
  9. Step 9: Reiterate

    Take the feedback, and reiterate your wireframes, consolidating them into one final version. At this point, you may have time for another review, or you may be in a good position to throw them into a digital prototype and run some usability tests on them with actual users.

Tips for great wireframes

  • Get others involved at the wireframing level. Conduct a design session where you and your team spend 3 minutes sketching out wireframes for each requirement, then discuss them after each round. This will help you generate new ideas and ways of addressing the functionality.
  • Some companies may use different terms for wireframes, or may confuse them for mockups or prototypes. Make sure you understand their terminology before starting any work on your wireframes.
A rough sketch of an interface on a notepad, next to a phone and pen.
UX StrategyA/B Testing