¿Qué son los Wireframes UX?

¿Qué es un Wireframe?

Cuando diseñamos la estructura de una web creamos los famosos wireframes, estos son bocetos en los que se representa la estructura básica de un producto digital o una web.

En los wireframes colocamos y distribuimos en el área de una interfaz digital los componentes y elementos que conformarán el producto final.

Un Wireframe UX es una representación visual sencilla de la organización esquemática de los elementos que componen la interfaz de un producto digital.

Los wireframes son un componente muy importante para hacer un buen trabajo de diseño web consistente.

Objetivo y utilidad de crear Wireframes UX

Los wireframes en un proyecto tienen un objetivo específico, ayudarnos a planificar y organizar la estructura de una web. Para ello se plasman y distribuyen los componentes necesarios para componer la base de la web, permitiendo de manera rápida empezar a tener un producto al cual darle forma.

Propósitos del Wireframing:

  • Centrarse en la estructura y funciones que incorpora el proyecto
  • Enfocarse en la usabilidad del producto
  • Capacidad de organización y crecimiento del contenido
  • Iteraciones y modificaciones con menor esfuerzo

Ventajas de la creación de Wireframes:

Gracias a la simplicidad y rapidez de la creación de estos bocetos, nos permite crear múltiples versiones de una misma interfaz de un proyecto, y poder comparar y barajar diversas opciones.

Otra gran ventaja que nos aporta, es a la hora de comunicarte con un cliente, ya que nos permitirán enseñarles y corregir en una etapa temprana las funciones y bloques plasmados en el producto.

¿Qué información incluir en un Wireframe?

Listado de contenido básico: este consiste en un inventario en modo de lista del contenido que deberemos tener en cada página

Componentes: Cabecera, logo, imágenes, bloques de texto, formularios…

Etiquetado: Indicar los vínculos principales, los títulos, micro-copys…

Layout: Distribución y ubicaciones de cada bloque, y agrupación de componentes (barra lateral, menú, footer…)

Interacciones y comportamiento: con notas se indica como reaccionarán los objetos al tocarlos, o añadir información acerca de las funciones de algún componente.

Tipos de Wireframes ¿Cuándo usar cada uno?

Disponemos de diferentes tipos de wireframes, ya que podemos crearlos a base de papel y lápiz y sin apenas detalle, o utilizando software especial y crear wireframes en los cuales se contempla casi todo lo necesario para pasar directamente al prototipado.

Content-Only: Son la representación más básica, en la cual únicamente indicaremos el nombre de página y los elementos que debe contener.

Wireframe Básico: También se les llama como representaciones de baja calidad, los cuales suelen ser una representación sencilla y en blanco y negro de los principales componentes.

Wireframes Anotados: Estos incluyen anotaciones a los wireframes básicos, indicando comportamientos de determinados objetos o indicando las posibles interacciones que deberían hacer los objetos.

Wireframe de Flujo de Usuario: Constan de capturas básicas de las pantallas a través de las que pasará un usuario para llegar a un fin definido.

Wireframe de Alta calidad: Estas representaciones incluyen todos los detalles a incluir en un prototipo final, y adicionalmente pueden permitir la interacción con las pantallas y objetos para facilitar el futuro trabajo a diseñadores y desarrolladores.

wireframes con flujos de usuario

¿Cómo se hacen los Wireframes UX?

Habitualmente se inicia la creación a base de papel y lápiz, ya que permite dibujar y plasmar rápidamente los primeros bocetos acerca de las primeras ideas y flujos. Pero hay softwares muy útiles para crear estructuras y diseñar wireframes como: Figma, Miro, Lucidchart o Axure.

Diferencia entre Wireframe y Prototipo

Podría decirse que los wireframes se centran en definir el esqueleto del diseño de la web. Caracterizados por una representación sencilla, en escala de grises y sin énfasis en el diseño, centrado únicamente en los componentes y su distribución.

Mientras que cuando hablamos de un prototipo, hacemos referencia a una representación del producto en la que ya si hay un trabajo de diseño y se permite interactuar directamente con el, asemejándose bastante más al resultado final. Permitiendo interactuar con este y centrarse en como se comporta el producto.

Más referencias

https://balsamiq.com/learn/articles/five-steps-to-great-wireframes

https://mockflow.com/blog/M2SfIXX5Kh-How-to-Create-a-Wireframe-A-detailed-Step-by-Step-Guide


Oscar Lopez Diseñador web UX y UI

Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Una vez que has identificado un problema a resolver y lo has analizado lo suficiente como para comprender su contexto…
  • Las pruebas de usabilidad juegan un papel fundamental en el diseño y desarrollo de productos físicos y digitales, a través…
  • Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…