Wireframe

Un wireframe es una representación esquemática de cada una de las pantallas más significativas que van a componer un producto digital, su función es dar la posibilidad de visualizar cómo se van a distribuir los contenidos dentro de la misma. Se utilizan para el diseño de cualquier tipo de interfaz digital (web, móvil, etc.).

Existen diferentes niveles de wireframes:

A) Baja fidelidad: Realizados a mano, bocetos.
B) Media fidelidad: Creados con alguna herramienta digital tipo Axure, Balsamiq, Whimsical, Miro, etc.
C) Alta fidelidad: Creados con herramientas de diseño de interfaces como Figma, Sketch o Adobe XD.

En el caso de esta metodología, en este paso nos enfocaremos en wireframes en baja o en media dependiendo de la situación y los requisitos del cliente, dejando para el siguiente paso los wireframes en alta calidad. Su finalidad no es mostrar el diseño final del producto, por lo tanto, carecen de color, de imágenes y no siguen la identidad visual de la marca para la que se van a desarrollar.En los wireframes también se puede y se pueden establecer las microinteracciones y transiciones que sea necesario y que pueden mejorar la experiencia de usuario.

Para garantizar el éxito del proceso de diseño en general, la estrategia y los contenidos deben estar bien definidos antes de comenzar a diseñar los wireframes.

Utilizar wireframes en la etapa inicial de diseño de un proyecto, nos permite tener una perspectiva basada únicamente en el contenido, sin detenernos en discusiones sobre el diseño, ahorrando tiempo y pudiendo iterar de manera temprana. Esto ayuda a que el proyecto no se retrase por falta de definición y a que el resultado sea lo más cercano posible a lo que el cliente esperaba.