Wireframe

El concepto Wireframe se entiende como el esqueleto o diagrama visual que se diseña para un proyecto o pieza tecnológica. Dentro del diseño web, un wireframe es la representación visual, a través de escala de grises, de la estructura y funcionalidad de una página web o pantalla de una app de tablet o smartphone. Se trata de un plano de alto nivel que representa la estructura de un sitio web, aplicación o proyecto, sin ilustrar una gran cantidad de detalles ni diseño concreto.

Al comenzar las primeras etapas del desarrollo de un web o aplicación, se establece una estructura básica de una página antes de introducir el contenido y diseño visual. Esta primera fase del proceso de diseño lleva el nombre de wireframing.

El wireframe se puede crear directamente en papel para visualizarlo de manera física y añadir o hacer pruebas, o directamente a través del código HTML/CSS o también con aplicaciones de software disponibles para esta función. El Wireframe muestra cómo se relacionan los elementos diseñados entre sí y cómo están estructurados.

Los wireframes sirven para comunicar la configuración de una página o aplicación de manera sintetizada, y crear diseños originales siguiendo una coherencia que atraiga la atención del usuario. El wireframe tiene la función de esbozar el diseño, la maquetación y otras características del diseño visual como: la arquitectura de la información, el flujo de usuarios, la funcionalidad y estructura de la página.

¿Cómo se utiliza el concepto de wireframe en el diseño visual?

Para los diseñadores de experiencia de usuario (UX) es una herramienta bastante útil para trazar el diseño y la colocación de su trabajo sin centrarse en muchos detalles. Es un elemento para representar los esquemas de páginas que les ayudan a tener en cuenta el cuerpo del contenido desde la perspectiva vista del usuario.

Sirve para esbozar tecnología y software pero además, para gestionar proyectos y desarrollos de productos. Su amplia gama de funcionalidades le caracteriza como una herramienta bastante usada en el mundo del marketing digital. Te mostramos cómo se elabora un wireframe en varios escenarios:

Wireframe de una aplicación

Representa el esquema de todos los elementos que va a llevar la interfaz de una aplicación móvil. Al comenzar el desarrollo de creación de una aplicación, utilizan el wireframe para determinar qué funcionalidad, flujo y diseño del software va a llevarse a cabo en la aplicación. Gracias al wireframe, se consigue características interactivas que visualizan cómo los usuarios se comportan en la propia aplicación.

Wireframe de una aplicación

Sirve para organizar los elementos visuales que se puede encontrar en una página de web. Su finalidad es realizar un protipo para tener un diseño web final. Gracias al wireframe, los diseñadores sabrán cómo será la interfaz de usuario y cómo interactuarán en ella. Esto permite detectar cuáles son los errores técnicos que afectan a la experiencia del usuario.

¿Cuál es la diferencia entre un mockup y un wireframe?

Tras conocer qué es un wireframe y cuáles son sus funcionalidades, surge la duda si estamos hablando de conceptos similares y distintos al compararlo con el mockup. Este es un wireframe de alta fidelidad que representa muchos más detalles visuales que un wireframe de baja fidelidad.

El mockup es un diagrama o estructura más detallado e interactivo que visualiza el aspecto del producto o servicio finalizado. En cambio, el wireframe solo es un simple plano en el cual se esboza el esqueleto que va a ser el producto (página web o aplicación).

Volver al glosario