SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
Every creative project has a starting point. For example, it could be an outline for an article or a sketch for a digital illustration. The same applies to the use of a wireframe for app design.
Wireframes are the backbone behind every website and app you use. User experience and user interaction designers use wireframes to sketch out a visual idea that can be customized easily until it’s ready to be built and developed.
If you’re planning to build a website or app — by yourself or with a UX/UI designer — you need to know what a wireframe is and why it's so important.
In this article, we'll help you understand the many ways a wireframe can benefit a UX/UI project, even if it’s as simple as a landing page.
We’ll also cover the different types of wireframes and how they’re used, plus tips on getting started with your own wireframe.
Visualize web pages and app designs with our easy-to-use wireframe software. It's fast, easy and comes with built-in with wireframe templates that you can customize for your own use.
A wireframe is the first step in the UX design workflow of a website or mobile application. The concept of creating a wireframe is similar to how architects start with blueprint drawings and engineers sketch mechanical diagrams.
The literal meaning behind the term ‘wireframe’ is of a wire construction, much like the ones used by sculptors, ceramicists and engineers to build over with a finishing material. In a house or building, the walls and columns have wireframes inside them, large sculptures have wireframes as a base structure and complex ceramic designs are often built on wireframes too.
A mobile or website wireframe is the bare bones of the overall information architecture. It helps pilot the development process from early stages to the final product. A wireframe visualizes an interface and is used widely as a tool in interface design, also called UI design.
In a visual sense, wireframes are 2D visualizations of what a website or app will look like when it’s finished. They are the first draft of the user interface, with grayscale shapes and minimal design elements.
Here are some examples of elements typically used in wireframes:
A wireframe’s overall layout is like a bird’s eye view of all the pages in a website or app. The pages are laid out in a grid side-by-side in columns and rows with enough space between them to add interaction instructions.
UX/UI designers use wireframe pieces to create wireframes faster. The image below shows different elements to put wireframes together as needed. Moving and replacing elements is easy and saves time between iterations.
Wireframes are an essential part of UX/UI design. They improve the creation process by simplifying the initial user interface testing stage. Using wireframes, UX and UI designers test out their initial ideas without spending too much time designing the details.
According to the Web Style Guide by Patrick J. Lynchand Sarah Horton, “Wireframes force teams to stay focused on the information architecture and structural design without getting sidetracked by the distraction of the visual layer.”
UX/UI designers also use wireframes to show clients and stakeholders a quick representation of how their final design will look.
Wireframes serve as a common language for all team members; the clients, the project managers, the designers, and the developers. By being minimalistic and functional, they help everyone understand and keep up with the process from idea to final product.
At the start of every creative project, there are many changes and iterations of the product. Starting with a wireframe diminishes the time it takes to make edits and apply fixes. This not only saves time, but it also saves money.
Prototyping, the next step after user interface wireframing, is started only once the structure has been approved by stakeholders and user testing.
The term wireframe is often used alongside the term prototype. That’s because they are progressions of each other while also being somewhat interchangeable.
Let me explain.
There are three types of wireframes; low-fidelity, mid-fidelity and high-fidelity.
A low-fidelity wireframe is the first step of the UX/UI design process and comes before the prototype. Mid-fidelity and high-fidelity wireframes are the most similar to prototypes and are sometimes referred to as such, even though they aren’t the same.
There’s one crucial difference between the two, even if they look similar.
As I mentioned above in the section about the difference between wireframes and prototypes, there are three main types of wireframes. These are the building blocks of the wireframing process.
Each level of a wireframe is a continuation of the one before it. Start at lo-fi and progressively move to mid-fi and then high-fi. After, move on to prototyping. It’s also OK to start with mid-fi or even high-fi wireframes — it all depends on the complexity of your project.
The images in the following sections depict an interaction design progression from low-fidelity wireframe to a high-fidelity wireframe. As you can see, the page layout is the same; the difference is in the number of final design elements in the composition.
The first and simplest type is the low-fidelity wireframe. These are created either by hand, or with a digital tool.
Low-fidelity wireframes are meant to be created fast and loose, without any design elements at all. Think of it as the skeleton of a website or app. The choice to create these by hand or with a tool depends solely on the work style of each person.
There are printable templates for sketching wireframes on paper, and there are plenty of low-fidelity templates and kits to create these online.
The main idea in a low-fidelity wireframe is to be as minimal as possible. Use only grayscale, one generic font, and no images or design effects like shadows.
A mid-fidelity wireframe is more elaborate than a low-fidelity wireframe and closer to the intended final UI design. The wireframe might show images, more detailed visualizations of what’s intended for the layout, and interactions between pages are clearer and more elaborate than in a low-fi wireframe.
A mid-fidelity wireframe can either be a continuation and improvement of a low-fidelity wireframe or the first step. For example, if this is the second or third wireframe for the same brand, it might not be necessary to start at low-fidelity.
The third type of wireframe is high-fidelity. This is the wireframe type closest to how the UI design will look in the finished project. The UI components, images, icons, colors, fonts, buttons and backgrounds are in place and ready to be turned into a working prototype.
A high-fidelity wireframe is not always the best place to start with a UX/UI project. If you don’t have a good base with a low-fidelity wireframe that has been tested for usability and with a few iterations, you’ll have to do these things in a high-fidelity wireframe. This takes up too much time.
You might be wondering by now why wireframes are even important in the first place.
Wireframes are especially relevant to you if you are:
If your business is in the web and app design industry, then using wireframes might be a no-brainer. Even if you design straight into high-fidelity prototypes using templates and child themes, going back to basics with low-fidelity wireframes could be a good idea.
On the other hand, if you’re a company that’s looking to get a website or app made, you might have just heard the word wireframe or seen it in the designer’s proposal, with no idea as to what it is. This guide will help you understand.
Project managers of a product concept/design are in charge of presenting wireframes to clients. They need to know how to explain a wireframe to stakeholders and C-suite members who have never seen one. In most cases, the product or project manager is in charge of all iterations before prototyping and high-level user testing and development.
Additionally, here are six benefits of using wireframes for your UX/UI projects:
The first benefit of using a wireframe in a web or app design project is getting things going much faster. A wireframe will give the client (or you) a relative idea of what the final project will look like in the end.
When starting a project with a wireframe, there will be something to look at in only a couple of days after the brief meeting.
As I briefly mentioned above, wireframes save money for any medium to large web or app project. It might not seem so at first, but it makes a notable difference in the long run.
Johnny Hill from Expero Blog explains it perfectly;
“One of the most difficult parts of defining requirements is gathering stakeholder alignment. The investors have a vision in their heads of how amazing some feature or product should be, but they don’t understand the technical implications of what they want. The tech lead knows how things need to work, but isn’t able to focus on user-friendliness. The product owner wants everything to work within the budget and may not anticipate certain edge cases or nuances in the request. Having a requirement documentation process in place and defining tasks in a project management system can help to keep things in synch, but those only go so far in fostering stakeholder alignment and clear communication.”
It’s in the clear communication and stakeholder alignment where you save money by using wireframes. In detail, there are fewer meetings, the back and forth of requirement edits is faster, the developers come into the project later on. Plus, with wireframes, user research and testing issues can be resolved faster, meaning less user testing costs, and less time spent on user experience iterations.
The second benefit is that UX testing — or usability testing — is faster in wireframe stages. Waiting for the prototype stage to do initial usability testing will only waste time.
Usability testing is conducted by analyzing how each wireframe page fits in with the next. For this to work, the wireframe must have interactivity connections between pages, from buttons to actions, from menu items to taxonomy pages.
The image below is of a wireframe printed and put up on a wall. The interactivity is visualized with string and pins.
Below is how usability testing for user experience design is done with a wireframe:
Users are asked to follow the steps of the user journey and take personal notes of what they find easy, complicated or simply confusing. Then, the designers take the user feedback and create a new iteration before more user testing is conducted.
This is the most efficient product design process, from the most simple to the most complex, without skipping any steps in between.
The third benefit of using wireframes at the start of a UX/UI project is that the UI can be changed easily before the prototype and final design.
Since wireframes are loosely created and a draft in nature, they are easy to change fast. Big adjustments are simple at this stage, simply move and adjust the bits and pieces to a new location.
First, conduct the usability tests to see what worked and what didn’t, then make iterations easily.
Another benefit of wireframing is that with usability testing and iterations done before the prototype or the final design, the developer and programmers will be more efficient in their work.
They’ll know what needs doing and will hopefully not need to make too many adjustments to reach the final design. The development and programming stage is very detailed, and every new change can take up precious time.
Wireframes are beneficial at many stages of a design project. In the first instance, a low-fidelity wireframe is the best option to build code and UI design. But once you’ve finished that project, the company will need to keep creating more web pages and mobile applications.
Use the initial wireframe and final design to create a design system, a set of branded elements for a specific brand or company, to develop new digital products quickly.
Using the puzzle pieces of a design system, creating a high-fidelity wireframe is easy and fast.
If you arrived here looking for information on creating your first wireframe, this section is for you.
The tips below will help get you started right away.
The first thing you need to do is gain knowledge. Learn all you need to know about what a wireframe is and does. This article is a great starting point.
Familiarize yourself with the differences between low, mid and high fidelity wireframes, investigate prototypes and how they need wireframes to exist.
Search for available digital tools for wireframing or try creating them by hand. Start with a small project first, so you don’t get overwhelmed.
A great way to get better at creating wireframes is to look at other wireframes for inspiration.
By looking at inspiration, you’ll have an easier time creating your wireframe, as the ideas will have grown roots in your brain. Afterward, all you need is a bit of imagination to put it all together.
If you are inclined to use pen and paper, try your hand at creating wireframes by hand. You can either start from scratch and create the frames for a website, phone app or even watch app. Then, inside the frames, you add the elements as you see fit, creating a wireframe.
Another option is to download an empty wireframe template and sketch the elements by hand. There are plenty of efficient printable wireframes available online; web pages, mobile apps, smartwatch apps and more.
If you don’t want to venture into pen and paper, use digital tools and online wireframe software like Visme, Balsamiq, or Miro. You’ll find lots of options in the digital space to help you create wireframes with ease and efficiency. Templates are fast and don’t need design experience to use.
Visme offers low-fidelity wireframe templates to help get you started quickly. Creating a wireframe with Visme starts off with a simple template from a specific category — websites, mobile apps, dashboards and forms — and you grow the structure from there.
The editor includes a library of wireframe elements like image placeholders, simple typography, line icons and more. There’s no limit to the number of pages or slides in your wireframe project.
The same goes for the number of projects you can work on at one time. Plus, you can upload any graphics or photos to your media library that you have a license to use.
Visme wireframes are ideal for those new to this practice or if you’re learning to use them for your projects. With a free Visme account, you can create a low-fidelity wireframe to launch the creation of your digital project.
For more professional experiences, try wireframe design tools like Figma, Adobe XD or Sketch. These tools include all the UI components necessary to build a schematic for a virtual user journey as a mobile application or website design.
These programs offer wireframe design and interactive prototype design in one place with a drag and drop functionality.
Third-party design marketplaces and user interface designers offer complete wireframe kits for wireframing software. These come as downloadable packs and are easily uploaded to software like Adobe XD and Sketch.
This tip is all about sticking to the basics. If you’re genuinely interested in creating wireframes, don’t start at high-fidelity. This will take you longer than expected to get things done. You’ll spend too much time looking for the right header image when you can be laying out the entire page in low-fidelity.
Don’t skip the skeleton stage; building with clay without a foundation will make your project unstable and challenging to fix in the long run. Every web or app design needs good bones, and that’s what a wireframe offers you.
Even though prototypes are the tool to test interactions physically, you still need to add interactions to wireframes. These are important for usability testing and efficient UI design.
A wireframe without visualizing how it’s all supposed to work together is only a set of images with no clear plan. Nevertheless, we suggest that you first create the imagery and then add the interactions. When you find a new action missing, you add the page until you have it all set up.
The primary and most crucial point of a wireframe is that they’re easy to edit and easily change. Don’t overcomplicate yourself by creating the visual wireframe pages on an iPad, then import to your computer to add interaction descriptions in Photoshop and then print to show the client.
Using two or more tools at the start means that you’ll need all those tools every time you need to make a change. When you use one tool or system from the start, it’ll be easier to work on iterations and edits.
If you worked with printed empty templates filled in and tacked to a corkboard, have extra blank templates, scissors and tape on hand to make changes like a collage. Use strings and pins to move interactions to new locations.
Some digital tools offer wireframe and prototype features in one convenient package. In some cases, they provide collaboration features, so you can work on wireframes as a team, cutting the processing time even more. The most professional of these tools even have options for communication and delivery with developers.
Now that you know what a wireframe is, its benefits, and even some practical tips on how to get started, it’s your turn to create a wireframe for your app or web design project.
Pick the style you want to use, either by hand or digitally, and choose the tools you’ll need for production. Visme's wireframe software has some great templates and vector graphics to help you get started.
Here’s to your journey with wireframes and great success!
Design visual brand experiences for your business whether you are a seasoned designer or a total novice.Try Visme for free