You will hear the term "wireframe" often as a UX/UI designer. But what exactly is a wireframe? Why should you create a wireframe? What wireframing tools do you need?
In this article, I will cover 5 topics:
- 1. What is a wireframe?
- 2. Why do you need a wireframe?
- 3. What are the best wireframing tools?
- 4. Where can you find inspiring wireframe examples?
- 5. How do you create a wireframe for a website?
What is a wireframe?
In short, a wireframe is a very simple representation of a website that shows only the structural level of the site, without any design. However, simple doesn’t mean that a wireframe is easy to create. Wireframing is a crucial step in the entire interactive design process and often occurs early in the project lifecycle. A wireframe is a graphic skeleton of a website, similar to an architectural blueprint.
A wireframe often has 3 core goals:
-
To determine the information hierarchy of the site.
-
To display the content and functionality of the pages for further design work.
-
To help designers communicate the design concept to clients.
In summary, a wireframe can be broken down into the following 3 main elements:
- Information Design
Includes the key information, outlining the structure and layout of the page. - Navigation Design
Creates global and secondary navigation to improve the user experience. - Interface Design
Imagery and a description of the user interface.
Why do you need a wireframe?
As a crucial part of the design process, wireframes play an important role in several aspects. Here are some benefits of wireframes:
1. A wireframe is much easier to understand than an abstract conceptual design.
How difficult is it to get stakeholder approval with just an explanation of the concept design? With a wireframe, you can turn the abstract sitemap into a visual site. It's much easier and faster to assess and understand with a clear wireframe.
2. A wireframe can be used to gather feedback
Users, team members, and stakeholders can review your design early on and provide feedback to improve the user experience. It helps make the design process iterative. It costs more if the problem is found later.
3. Wireframes help define website features
Wireframes ensure that the page content and functionality are designed in a way that meets user needs. Your design should be based on several business requirements; if no one ever wanted your design, all your work would be in vain.
4. Wireframing is quick to build and low-cost
It is inexpensive and fast to create a wireframe. The simplest method is to use pen and paper. With more wireframing tools available today, you can create a wireframe with a tool in just a few minutes.
What are the best wireframing tools?
It is much easier to present your design concept with a wireframe. When you're ready to build a wireframe, you'll need a tool. If you're still looking, check out the following list. I've gathered the 5 best wireframing tools for websites in 2018.
Mockplus - A free and fast wireframing tool to help you design faster
Mockplus is a fast and easy wireframing and prototyping tool. The standout feature of Mockplus is its speed. All elements are pre-designed, so you can use them with just a drag and drop. With this tool, you can create interactive prototypes or wireframes in less than 5 minutes.
Wireframe|cc - A free and fast wireframing tool to help you design faster
Wireframe.cc is an online wireframe tool. It’s a very simple tool, even the toolbar is omitted in the interface. You can connect a frame as you wish, with no restrictions on pre-set components, elements, or icons. If you're looking for a different drawing tool or want to start your design by creating each element yourself, try Wireframe CC.
Pencil Project - Diagrams and GUI wireframing tool
Pencil Project is a free wireframing tool. If you're using Firefox, you can try Pencil Project.
Balsamiq Mockups - A simple wireframing tool with a unique sketch style
Balsamiq Mockups is also a unique tool. It has a sketch style. If you want the experience of wireframing with pen and paper, give it a try. However, note that Balsamiq does not support interactions, so it’s not a tool for further design work.
Framebox - Lightweight online tool for creating mockups
Frame Box is completely free to use, making it a good choice for teams with incredibly limited budgets. The downside is that it’s somewhat basic and might not be the best tool for creating a detailed wireframe of a complex project. However, it's perfect for smaller, less complex projects.
We think it's unlikely that Frame Box will be everyone's permanent choice, but it will help you get started without any strain on your wallet.
How do you create a wireframe for a website?
1. Get some inspiration
As the link from mockup.com above shows, you can find the best examples of wireframes for mobile apps and websites there. So before you start wireframing, you can gather inspiration from there.
2. Figure out when you should create a wireframe
The most common complete design process includes:
- Sketch => pencil and paper
- Wireframe => Lo-fi Prototype
- Wireframe => Mid-fi Prototype
- Wireframe => Hi-fi Prototype
Wire