If you're studying UX, you have probably come across the term wireframe. And if you haven't, you're in the right place to start!

In this article, you will understand what a wireframe is, its importance, and why it differs from mockups and prototypes.

Check it out to learn more about this essential process within UX Design!

What is wireframing?

A wireframe is a simple sketch of a webpage containing the UI elements that should appear on key pages. The intention is to have a rough draft and validate ideas; it doesn't require details such as colors, fonts, icons, or images.

This way, wireframes can demonstrate to stakeholders and team members an overall understanding of a project before delivering further into it. The wireframe will show the positioning of the elements in a simple and organized manner. And it reflects only what is necessary for the initial proposal of a website.

Wireframes have two main objectives:

• To assist the UX Designer and other team members in the early steps of a project;
• Align the client's expectations with project and user needs.

Besides that, wireframes aim to answer three fundamental questions of the project:

• What: which groups of content will be used;
• How: how will the interface be visualized, and how will the user use it;
• Where: define the position and structure of information on the user interface.

Reading tip: Storytelling: How To Tell The Right Story

What should you include in a wireframe?

A wireframe is a flexible tool, and the level of detail of each wireframe will depend on its purpose and goals.

However, there are some basic elements needed in all wireframing processes, such as:

• Headers;
• Footers;
• Sidebars;
• Content areas.

Without these elements, it is impossible to develop a good wireframe.

The differences between wireframes and mockups

Normally, mockups represent the second stage of the development of a product or service, coming after wireframes and before prototypes.

The mockup represents a more detailed model of the final product, with more aesthetic and visual elements. However, the basic functionalities are still demonstrated in a static way.

But despite this, the mockup allows a few user experience issues to be evaluated, such as:

• content structure preference:
• layout;
• color palette.

Mockups are usually created in Figma, Adobe XD, or Sketch, but they can be drawn in Photoshop, or Illustrator, among other tools.

Reading tip: Design System: How To Create One?

Difference between a wireframe and a prototype

Prototyping is commonly mistaken for wireframing, but they have different concepts. Prototypes are usually the last phase before the final product/service is developed and launched.

In this sense, prototypes are functional examples of a design and are typically used to:

• Simulate key user interactions with that product/service;
• Test the content along with the interactions;

Although it does not contain all the information and characteristics of the final product/service, it shows the users certain UI functions and allows interaction.

Therefore, prototypes can be made using wireframes but offer more detailed mockups, depending on the project's phase or the needs of the prototype.

Prototypes are the first interaction users have with a product or service; this interaction will provide results and information through usability tests.

Therefore, through these tests, the UX Designer can:

• Adjust points that need improvement;
• Find and correct errors;
• Improve visual feedback;
• Understand how users interact with the product and social contexts.

Reading tip: Building Prototypes: What’s The Best Type For Your UX/UI Project

The benefits of a wireframe in UX Design

The greatest benefit of a wireframe is how it demonstrates the information and UI elements in a simple and effective way while being low cost.

This way, designers and developers can understand several aspects of their project, like:

• The types of content it should contain;
• Where these contents should be positioned on the interface;
• Arrange texts, images, and call-to-action appropriately based on the project's strategy and final objective.

Therefore, wireframes create friendly and intuitive UIs, while meeting your business proposal and conveying the correct message to your users.

Wireframes also help:

• To understand how many screens the project will need and how they should be designed and developed;
• Developers to solve their doubts without having to ask several questions to the designer;
• In the communication with the client and other stakeholders, by showing how the ideas will behave in the interface.

In addition, wireframes can help decrease the costs of a project because their revision and adaptation are cheaper to do than mockups or prototypes.

Reading tip: Information Architecture: How to Organize UI Content

How to create a wireframe?

Just like in any other technical work, wireframing can be more difficult for a beginner. But, surely, with time and experience, this process will get easier and faster.

Check out a small guide with tips to help you create a wireframe.

1. Look for inspiration and references

Before creating your wireframe, look at similar projects to the one you will develop for inspiration and reference.

Most UX Design portfolios contain wireframes, so you can take a look at wireframes templates on sites like Behance.

However, try not to spend too much time on this, as there are many ways you can go, so stick to your project needs and business goals; you will have time to iterate and improve later. This is just a moment to get inspired before starting your wireframe.

2. Map user flows

A wireframe is meant to validate ideas. Therefore, to avoid getting lost in your project, map out the flow you want your user to follow before you start designing wireframes. In this sense, you should have the concept and goal well-defined.

A good interface structure allows users to be self-sufficient and navigate intuitively. Thus, you decrease the user's frustration and ensure they stay longer on your website.

Reading tip: User Journey Map: Understanding and Improving Interactions

3. Create blocks

Now is the time to start working on your project. So take pen and paper and have the end user and business goals very well-defined for this phase.

At this stage, you should think about factors such as:

• User expectations: what they expect to find in certain areas of the interface;
• The position of your main message and your logo;
• What will be the first thing the user will find when they enter your interface;
• Where to place your call-to-action.

With this in mind, you can separate your content into different blocks and position them according to your goal throughout the page. Remember to use only shades of gray and only represent the spaces of the images that will be inserted.

4. Include the details

Now that you have your user flow and screens designed, the next step is to add some details to prepare the wireframe for the project's next stage (mockup).

But remember: your wireframe is the skeleton of the project, so think about functional details, such as:

• Position the logo and home in the upper left corner;
• Place a search box in the upper right corner;
• Among other simple and efficient ways to call the user's attention.

5. Establish a deadline

Setting a deadline for your activities it's always a good habit and recommended for any process. Wireframing is no different.

Therefore, set a feasible deadline to develop and deliver the material.

However, pay attention to the following:

• The purpose of the wireframe is to validate and communicate ideas, so there is no need to create something complex and time-consuming;
• Do not get emotionally attached to the wireframe; after all, it is not the final version yet, and probably, many ideas will be discarded until product release.

6. Stick to the basics

Remember: a wireframe is about the functionality of a UI, not the design. Avoid adding complex visual elements. At this point, less is more.

Also, don't use colors or images. These elements can distract you from the main task.

To help visualization, you can use different shades of gray and define spaces and sizes for images that you will use in the future.

When presenting the wireframe to someone, make sure it is clear and easy to see!

7. Focus on the user

A wireframe is meant to validate ideas. Therefore, always have in mind your users' experience. Doing so will give your wireframe more usability and chances for good results.

8. Organize your wireframe

Websites and mobile apps are usually divided into sections. It is interesting to separate your wireframe in a logical way, representing each of the important sections of your product, such as:

• Home Page;
• Contact area;
• Product demonstration.

Also, list the pages of the wireframe. This way, you create a logical journey and avoid confusion when presenting or revising your document.

Reading tip: Nielsen’s Heuristics: 10 Usability Principles To Improve UI Design

‍