Learning to Wireframe: a Quick Guide
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:
- The role of UX in the software development process
- What wireframes are and how they compare to other UX artifacts
- 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:
- how to help customers accomplish their goals
- how to find out if your solution will work
Wireframing addresses these problems in two phases:
- the Ideation Phase. To generate as many ideas as possible.
- 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:
- What is the tool's main purpose?
- Does the tool fit your preferred workflow?
- Is the tool actively developed?
- How is the tool supported?
- Who’s behind the tool? Will they stay in business?
- How much does the tool cost?
- What do others think of the tool?
- 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.
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.
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.