What are Wireframes and how to use them?

Spontaneity is a great characteristic of people that can make them more natural and enjoy unexpected adventures and trips in their daily lives. However, these quick and unplanned decisions do not work in complex situations like the experience between a person and a logical system. Just as you cannot write a book without first planning a storyline, you cannot create a website or an application without first planning its skeleton that structures the content. This initial sketch is called a wireframe.

Wireframe are a basic tool in user experience (UX). UX is an essential part of the design of any product, including digital ones. Below you can find a detailed guide for getting started with them. What are they? Why are they necessary? and what are their principles among other valuable information.

What is a wireframe?

The objective of a wireframe is to describe the structure and functionality of the user flow. Therefore, any element with which the user interacts (buttons, menus, and dropdowns ...) must be represented. This way, we create a visual description of how the product's structure should be, the information hierarchy, behavior, navigation, and content placement. This description is functional; it does not communicate what the visual appearance or interface design will be like.

Why is wireframing important?

A wireframe is necessary to outline the essential components of an interface. It helps all stakeholders fully understand what the functional outcome of the product should be before moving on to later phases. Without this foundation, it is complicated for the subsequent design and production phases to be done correctly and efficiently without going in circles and making mistakes due to a lack of understanding of the product's functionality. It also provides a method by which the team can make decisions at an early stage of the process easily and economically. Additionally, being a visual tool, wireframes are much more accessible than written ideas that may seem abstract. Showing a wireframe to developers or clients will help them understand the final intention, allowing for feedback to be received and implemented into the design if necessary.

What types of wireframes exist?

Throughout the process, we keep refining wireframes, so we can classify them into different types depending on the stage we are in. As you get a better idea of your product, you will gradually be able to implement more advanced forms of wireframes naturally, building as you move from one stage to the next. Below is a brief explanation of the two types of wireframes:

• Wireframe de baja fidelidad: Una vez hemos empezado el proceso a mano, realizando algunos bocetos rápidos para aclarar nuestras ideas, es el momento de empezar a crear nuestros wireframes de baja fidelidad. Pasamos nuestros apuntes e ideas a una primera versión más ordenada, normalmente hecha con ordenador. Esta nos permitirá tener una idea general de cómo debe ser el producto final y sus páginas principales, la página web comienza a tomar cuerpo pero en esta fase no se ha de concretar los detalles concretos sino imaginar la página en su conjunto.
• High-fidelity wireframe: at this point, your wireframe should show the complete journey that your website may have, covering the full range of cases a user may encounter, from errors, alternative routes for regular users, journeys for first-time users ...

Some tips for creating wireframes

Before starting to create structures, think about the advice we want to give you.

• It shouldn't need to be said, but we say it. Do not skip the wireframing phase, as it allows us to focus on a positive user experience (link to the ux article) and helps save design and production time by preventing some complications before they occur. There may be projects where it is not necessary to develop wireframes that detail every option the user has to the millimeter, such as projects for modifying specific pages or isolated processes. However, it is necessary that in these projects, the structure of these processes we are working on is considered.
• A wireframe has to be schematic and not enter the area of visual design. Even so, it should not be ugly or chaotic; it should be clear and clean and be able to mark hierarchies and positions in an exact and intuitive way. We can have a series of tools prepared to create them, such as a standard grayscale, a set of fonts in different sizes to mark the hierarchy, and/or some boxes made with fine lines, which will help us mark the spaces.
• As the wireframing process progresses, you will gain a better understanding of the product. At this stage, we should not be afraid to think and rethink the different structural paths since this is what this process is for. It is better to repeat some of the wireframes we have already made than to deal with later problems in the visual design and production phases.
• It is always preferable to create wireframes with the finished text content, as this allows us to create the structure taking into account the dimensions it occupies. Simulated text does not reflect the amount of space that the real content occupies.
• Be organized when working with wireframes. In general, the name should describe the main intention of the screen or the specific state the user is in on this page, for example, "Home", "contraseña incorrecta" or "artículo".
• Describe the hierarchy being careful not to design the interface while doing so. Keep in mind what the user has to do on this specific page. And indicate the hierarchy according to their needs, in an understandable way. Maintain consistency by ensuring that individual components look the same on each of their screens or pages. For example, if a button is presented as a circle and a heading as a blank rectangle, make sure these elements are repeated in the same way throughout the wireframe to avoid confusion.