¿Qué son los wireframes? | Explicación para no diseñadores

Si trabajas en el mundo del diseño UX/UI o perteneces a entornos de desarrollo, tendrás muy claro qué son los wireframes, pero probablemente cada vez que comienzas un proyecto con un nuevo cliente tengas que invertir tiempo en explicarle qué son los wireframes, para qué sirven y que ventajas aportan antes de comenzar a dar vida a un diseño.

Freepik @stories

¿Qué es un 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.) cuando se trata de un wireframe para AR/VR se denomina sceneframe.

Ejemplos wireframes

Existen tres niveles de wireframes:

Realizados a mano, bocetos

Low fidelity

Creados con alguna herramienta digital tipo Axure, Balsamiq, Whimsical, Miro, etc.

High fidelity

Creados con herramientas de diseño de interfaces como Figma, Sketch o Adobe XD.

Boceto de wireframe. Unsplash @sigmund

Wireframe Low fidelity diseñado con Whimsical

Wireframe high fidelity diseñado con Figma

El diseño de wireframes es la manera más efectiva de conectar la arquitectura de la información (AI) con el diseño del producto. Con ellos podemos traducir la estructura de un mapa de contenidos y transformarla en la emoción que sentirá el usuario al utilizar la plataforma que se está diseñando.

Los wireframes en el proceso de diseño de un producto digital

Visualmente son muy simples, exclusivamente líneas y cajas. 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.

Todos los elementos gráficos y de sistema se muestran esquemáticamente.

Siempre que sea posible, los contenidos que se muestran son reales para poder facilitar el cálculo del espacio necesario de cada uno de los elementos cuando se pase a la fase de diseño del look and feel.

Lo ideal es que vayan acompañados de explicaciones que justifiquen las decisiones tomadas para el diseño de los mismos y permitir, en la plataforma en la que se compartan, un espacio todas las partes implicadas puedan comentar estas decisiones y aprobarlas si fuera el caso.

En los wireframes también se puede y se deben establecer las microinteracciones y transiciones que sea necesario incorporar al diseño y que pueden mejorar la experiencia de usuario, los wireframes con interacción se denominan prototipo. En este artículo de torresburriel está explicad de una manera muy clara la diferencia entre wireframe y prototipo.

¿Para qué sirve un wireframe?

La principal finalidad del wireframe es permitir la visualización de los contenidos que aparecerán en cada pantalla y reflejar las funcionalidades que estarán presentes.

Establecen la jerarquía de la información y sirven como herramienta de comunicación entre desarrollo, diseño y cliente.

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.

¿Qué ventajas aporta realizar wireframes antes de aterrizar en el diseño de la capa visual?

Freepik @stories

• Se reducen los tiempos de trabajo y los costes. Al carecer de color, tipografía, imágenes, es decir, una identidad gráfica concreta, se avanza a mayor velocidad ya que las correcciones se basan exclusivamente en los contenidos y la funcionalidad, evitándose las discusiones sobre aspectos gráficos.
• Permiten al cliente expresar lo que quiere y definir sus objetivos.
• A través de ellos se establece una comunicación fluida entre el equipo de diseño y desarrollo con el cliente.
• Permiten visualizar interacciones y flujos.
• Se pueden detectar en los inicios del proyecto posibles problemas de usabilidad e interacción que a medida que el proyecto avanza son más difíciles y costosos de solucionar.

En resumen…

Utilizar wireframings 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.