Estrategia Digital

¿Qué son los Wireframe y cómo utilizarlos?

En cualquier nuevo diseño digital es esencial la creación de wireframes. Intentaremos explicar qué es y cómo aprovechar la construcción estructural de una interfaz para mejorar la experiencia de usuario

¿Qué son los Wireframe y cómo utilizarlos?
Arnau Costa
Arnau Costa

Febrero 24, 2021

La espontaneidad es una gran característica de las personas que los puede hacer ser más naturales y disfrutar de aventuras y viajes inesperados en su día a día. Sin embargo estas decisiones rápidas y no planificadas no funcionan en situaciones complejas como la experiencia entre una persona y un sistema lógico. Del mismo modo que no se puede escribir un libro sin primero planificar un hilo conductor tampoco se puede crear un sitio web ni una aplicación sin primero planificar su esqueleto que estructure el contenido. Este primer esbozo se llama wireframe.

Los Wireframe son una herramienta básica en la experiencia de usuario (UX). El UX es una parte esencial en el diseño de cualquier producto, también en los digitales. A continuación puede encontrar de forma detallada una guía para la iniciación en estos. ¿Qué son? ¿Por qué son necesarios? y cuáles son sus principios entre otra información de valor.

¿Qué es un wireframe?

El objetivo de un wireframe es describir la estructura y la funcionalidad del flujo de usuario. Por lo tanto cualquier elemento con el que el usuario interactúa (botones, menús y desplegables ...) debe aparecer representado. Así creamos una descripción visual de cómo debe ser la estructura del producto, la jerarquía de la información, el comportamiento, la navegación y la ubicación del contenido. Esta descripción es funcional, no nos comunica cómo será el aspecto visual ni el diseño de la interfaz.

¿Por qué es importante el wireframing?

Un wireframe es necesario para plantear los componentes esenciales de una interfaz. Ayuda a todos los implicados a comprender completamente cuál debe ser el resultado funcional del producto antes de comenzar fases posteriores. Sin esta base, es complicado que las fases posteriores de diseño y producción se hagan de manera correcta y ágil sin dar vueltas y cometer equivocaciones derivadas del desconocimiento de la funcionalidad del producto. También proporciona un método con el que el equipo tomará decisiones en un estadio inicial del proceso de manera fácil y económica. Además, al ser una herramienta visual, los wireframes son mucho más accesibles que las ideas escritas que pueden parecer abstractos. Mostrar un wireframe a los desarrolladores o los clientes les ayudará a entender la intención final, lo que permitirá recibir feedback e implementarlo al diseño en caso de ser necesario.

¿Qué tipos de wireframes existen?

Durante todo el proceso vamos perfeccionando wireframes por lo que los podemos clasificar en diferentes tipos según el estadio en el que nos encontramos. A medida que tenga una mejor idea de su producto, gradualmente podrá implementar formas más avanzadas de wireframes de manera natural, construyendo a medida que pase de una etapa a la otra. A continuación una breve explicación de los dos tipos de 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.

- Wireframe de alta fidelidad: en este momento, tu wireframe debería mostrar el recorrido completo que puede tener su sitio web, cubriendo toda la gama de casos en que se puede encontrar un usuario, desde errores, rutas alternativas para usuarios habituales, recorridos por usuarios que entran por primera vez ...

Algunos consejos a la hora de crear wireframes

Antes de empezar a crear estructuras piense en los consejos que os queremos dar.

  • No habría que decirlo, pero lo decimos. No se salte la fase de wireframing, ya que nos permite centrarnos en una experiencia de usuario positiva (enlace al artículo ux) y ayudan a ahorrar tiempo de diseño y producción ya que previene algunas de las complicaciones antes de que se den. Es posible que haya proyectos en los que no sea necesario desarrollar wireframes que detallen al milímetro cada opción que tiene el usuario como por ejemplo proyectos de modificación de páginas concretas o de procesos aislados. Sin embargo, es necesario que en estos proyectos se piense la estructura de estos procesos que estamos trabajando.
  • Un wireframe tiene que ser esquemático y no entrar en el área del diseño visual. Aún así no debe ser feo o caótico, debe ser claro y limpio y poder marcar las jerarquías y las posiciones de forma exacta e intuitiva. Podemos tener una serie de herramientas preparadas para realizarlos como una escala de gris estándar, un conjunto de fuentes en diferentes tamaños para marcar la jerarquía y / o algunas cajas hechas con línea fina, que nos ayudarán a marcar los espacios.
  • A medida que el proceso de wireframing va avanzando irán adquiriendo una mejor comprensión del producto. En esta etapa no debemos tener miedo de pensar y repensar nuevamente las diferentes vías estructurales ya que para esto se hace este proceso. Es mejor repetir algunos de los wireframes que ya tenemos hechos que lidiar con problemas posteriores en las fases de diseño visual y producción.
  • Siempre es preferible hacer los wireframes con el contenido de texto acabado, así nos permite crear la estructura teniendo en cuenta las dimensiones que éste ocupa. El texto simulado no refleja la cantidad de espacio que ocupa el contenido real.
  • Sea ordenado a la hora de trabajar con los wireframes. En general, el nombre debe describir la intención principal de la pantalla o el estado concreto en que se encuentra el usuario en esta página, por ejemplo, "Home", "contraseña incorrecta" o "artículo".
  • Describe la jerarquía teniendo cuidado de no diseñar la interfaz mientras lo hace. Tenga en cuenta que tiene que hacer el usuario en esta página en concreto. Y indique la jerarquía según sus necesidades, de una manera comprensible. Mantenga la coherencia asegurándose de que los componentes individuales tienen el mismo aspecto en cada una de sus pantallas o páginas. Por ejemplo, si un botón se presenta como un círculo y un encabezamiento como un rectángulo en blanco, asegúrese de que estos elementos se repitan de la misma manera a todo el wireframe, para evitar confusiones.

Comparte este artículo

Artículos Relacionados