Lost your Mockups key?
Log In to myBalsamiq
Already have a monthly subscription for our cloud-based web
Log In to myBalsamiq
Mobile 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!
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:
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:
Wireframing addresses these problems in two phases:
The two keys to making progress and designing better wireframes are practice and carefully integrating feedback in your iteration process.
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:
It's a smart resource that will give you a head start on exploring the landscape of wireframing tools.
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.
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.
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.
Your email is never published nor shared.
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…
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 email@example.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 ❤️.