Learning to Wireframe: a Quick Guide

Mobile App Wireframe - Ideation PhaseMobile App Wireframe

Wireframing is becoming more commonplace in the product and design industry for a good reason: it works.

Creating wireframes helps you think and communicate better about the structure of the website, software or mobile app you are building. They are representations of ideas that can be quickly discarded and iterated upon until you find the best solution for your customers.

If you are looking forward to getting started with this important UX technique, keep on reading!

1. Learning to Wireframe

Watching videos is a great way to quickly pick up new skills.

Wireframing for Newbies is a 19-minute in-depth introduction to the practice of User Interface Wireframing that will guide you through the main concepts of this technique and how it fits into the design process.

The video covers three main topics:

  1. The role of UX in the software development process
  2. What wireframes are and how they compare to other UX artifacts
  3. The two phases of wireframing

Wireframing is a skill that can be learned and honed. To complement the video tutorial above, this article on Wireframing for Beginners will help you reinforce the basic ideas and start improving right away.

Here are some useful tidbits from the links above:

Successful wireframing makes it easier to solve two problems:

  1. how to help customers accomplish their goals
  2. how to find out if your solution will work

Wireframing addresses these problems in two phases:

  1. the Ideation Phase. To generate as many ideas as possible.
  2. the Validation Phase. To determine whether your proposed solution can be agreed upon by the stakeholders.

The two keys to making progress and designing better wireframes are practice and carefully integrating feedback in your iteration process.

2. Choosing a Wireframing Tool

Wireframes can be created with pen and paper, but "these days, the software available for creating interactive wireframes makes the task quick and easy to do." (from UX Mastery) If you decide to go with software instead of pen and paper, choosing a tool can be daunting.

We've created a resource to ease up this task on you. In How to Choose a Wireframing Tool you will find a set of questions and recommendations to evaluate different software. It includes:

  1. What is the tool's main purpose?
  2. Does the tool fit your preferred workflow?
  3. Is the tool actively developed?
  4. How is the tool supported?
  5. Who’s behind the tool? Will they stay in business?
  6. How much does the tool cost?
  7. What do others think of the tool?
  8. Where can I find a list of wireframing tools?

It's a smart resource that will give you a head start on exploring the landscape of wireframing tools.

3. Diving Deeper Into UX

Wireframing will help you achieve important goals in the initial phase of your projects. However, the UX process is made up of several stages that will require the mastery of a variety of techniques and concepts.

We have partnered with Theresa Neil to develop UX Apprentice, a learning resource for people interested in getting a broader understanding of the basics of UX Design.

Thanks to our awesome community, UX Apprentice is now available in 7 languages. Use it to explore all the resources available to you on your journey as a UX Designer. You might even want to collaborate with us translating it if it's not yet available in your own language.

UX Apprentice

This is it. We hope these resources give you the confidence to start making awesome wireframes!

Let us know what you think once you try this out! What else should we include in this quick guide? Is there any part of the process we can help you improve? What tool did you choose and why?

Tell us here ⬇️ in the comments.

Happy wireframing!

- Jess


Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.

Comments (2)

  1. So where is the actual guide on how to wireframe? 🙂 was really hoping to see some great content that I could share with students (b/c I do like your UX Apprentice resource) but do not really see any “guide” here on how to wireframe… is this just a page to get people to UX apprentice? Disappointed a bit…

    Michael
    • Hi Michael,

      You’re right, there’s definitely room for improvement in this quick guide. We will update it soon.

      We’d love to know more about how can we be more helpful for you. Would you like to chat with us about it? Please send me an email jess@balsamiq.com, and we can schedule a meeting when is more convenient for you.

      In the meantime, there are other resources we’ve been working on to help our users get better at wireframing. We’ve started Live Wireframing with Balsamiq a Youtube series where people can learn by watching experts wireframe real products.

      We’ve also created UI Design 101, a resource to help you learn the basics of user interface design through established guidelines and best practices.

      Thanks for being open and honest about your experience so we can learn from it ❤️.

      Jessica