What are wireframes? (Explanation for non-designers)

If you work in the world of UX / UI design or you belong to the development area, you will know what wireframes are, but probably every time you start a project with a new client you will have to spend time explaining what wireframes are, what they are for and what benefits do they bring before starting the UI.

Freepik @stories

What is a wireframe?

Wireframes are schematic representations of the most significant screens that are part of a digital product and show the layout and structure. They are used in the design of any type of digital interface (web, mobile, etc.) The wireframe for AR / VR is called a scene frame.

Wireframe examples

Levels of wireframes:

Hand sketches.

Low fidelity.

Created with a digital tool such as Axure, Balsamiq, Whimsical, Miro, etc.

High fidelity.

Designed with interface design tools such as Figma, Sketch o Adobe XD.

Sketch wireframe. Unsplash @sigmund

Low fidelity wireframe designed with Whimsical

High fidelity wireframe designed with Figma

UX Wireframe

Wireframe design is the most effective way to connect information architecture (AI) with the product. Through wireframes, we can translate the structure of a content map and transform it into the emotion that the user will feel when using the platform.

Wireframes in the design process of a digital product

Visually wireframes are very simple, just lines and boxes. Their purpose is not to show the final design of the product, therefore, they lack color, images and do not follow the visual identity of the brand.

All graphic and system elements are shown schematically.

Whenever possible, the contents shown are real in order to facilitate the calculation of the necessary space when working on the visual design phase.

It is desirable that they include explanations that justify their design decisions and that the platform on which they are shared allows all stakeholders to comment on the decisions made and approve them if necessary.

Wireframes can also include micro-interactions and transitions that need to be explained in the design and that can improve the user experience.
Interactive wireframes are called prototypes. In this torresburriel article, the difference between wireframe and prototype is explained very clearly.

How are wireframes used?

The main purpose of the wireframe is to allow the visualization of the contents that will appear on each screen and reflect the functionalities that will be present.

They establish the hierarchy of information and are used as a communication tool between development, design, and client.

To ensure the success of the overall design process, the strategy and content must be well defined before starting to design the wireframes.

What are the advantages of creating wireframes before designing the visual layer?

Freepik @stories

• Working times and costs are reduced. By lacking aspects such as color, typography, images, the working speed is higher since the corrections are based exclusively on the content and functionality, avoiding discussions about graphic aspects.
• The use of wireframes allows the client to express what they want and define their objectives.
• Thanks to them, fluid communication is established between the design and development team with the client.
• They allow us to visualize interactions and flows.
• They also help to detect possible usability and interaction problems at the very beginning of the project, saving costs in more advanced phases.

In summary…

Using wireframes in the initial design stage of a project allows us to have a perspective based exclusively on the content, without wasting time in discussions about the design, and being able to iterate in the initial phases. This helps to avoid delays due to lack of specificity and the result is as close as possible to what the client expected.

Did you like our post? Find out all our posts about UX and UI!