¿Qué es un wireframe?

Los wireframes son guías visuales básicas que se usan al inicio del diseño de sitios web y apps. La mayoría, sobre todo los primeros de baja fidelidad, omite colores, imágenes y tipografía decorativa. Los de alta fidelidad representan el espaciado con mayor precisión y pueden incluir textos reales, pero el estilo visual sigue siendo sobrio: el acabado final le corresponde a la maqueta (mockup). En ambos casos, lo importante es la estructura: qué va en cada página y en qué lugar.

Hacer un wireframe permite definir la distribución y la navegación de un sitio antes de que alguien invierta tiempo en el acabado visual. También obliga a tomar decisiones sobre el espacio: cuánto contenido cabe en una página, qué elementos tienen prioridad y cuánto espacio en blanco conserva el diseño. La misma técnica funciona para pantallas de apps móviles, no solo para páginas web.

Cómo se ve un wireframe

Un wireframe típico de una página de inicio es un boceto en escala de grises hecho de cajas y líneas. Una barra superior contiene un recuadro pequeño con la etiqueta "logo" y unas líneas cortas que representan los enlaces de navegación. Debajo, un rectángulo grande cruzado con una X marca la imagen principal, con líneas horizontales en lugar del titular y del texto de introducción. Tres cajas iguales representan los bloques de contenido destacado, y una franja sencilla representa el pie de página. Cualquiera lo entiende de un vistazo, y nadie discute los colores, porque no hay.

La fidelidad es un espectro:

• Los wireframes de baja fidelidad son bocetos rápidos: cajas, líneas y etiquetas provisionales. Úsalos al principio, mientras las ideas todavía cambian.
• Los wireframes de alta fidelidad se acercan al espaciado real y suelen incluir texto real, pero se mantienen visualmente sobrios en lugar de mostrar el diseño terminado. Úsalos cuando la estructura ya esté acordada.

Empieza con baja fidelidad y agrega detalle solo cuando la estructura deje de cambiar.

Wireframe, maqueta y prototipo: ¿en qué se diferencian?

Los tres suelen ir en secuencia: primero la estructura, luego lo visual y al final el comportamiento.

• Un wireframe es un plano estructural, casi siempre de baja fidelidad. Define la distribución, la jerarquía del contenido y el flujo del usuario, normalmente sin colores ni imágenes reales.
• Una maqueta es un diseño visual estático que muestra el acabado final: color, tipografía e imágenes aplicados a la estructura acordada.
• Un prototipo es una simulación interactiva, en la que puedes hacer clic, que sirve para probar cómo se comporta un diseño antes de que empiece el desarrollo. Puede ser de baja o alta fidelidad, desde wireframes clicables hasta pantallas casi finales.

La pista confiable es la interacción: si puedes hacer clic para pasar de una pantalla a otra, estás viendo un prototipo, sin importar su nivel de acabado.

Cómo hacer un wireframe

Primero haz una lista de tus páginas y del camino que seguirán los usuarios entre ellas. Después boceta la estructura de cada página: cajas para las imágenes, líneas horizontales para el texto y etiquetas para la navegación y los llamados a la acción. Mantén todo en escala de grises para que los comentarios se concentren en la distribución. Cuando quien tome la decisión dé el visto bueno, pasa a la maqueta.

Usar lápiz y papel es una opción legítima para hacer wireframes, y muchas veces la más rápida. Las herramientas especializadas como Figma y Balsamiq valen la pena cuando un equipo necesita compartir, comentar y revisar el mismo wireframe. Si quieres el paso a paso, lee nuestra guía Cómo crear y usar wireframes para sitios web.

Por qué importan los wireframes

Un problema de distribución o de navegación detectado en un wireframe se corrige en minutos. El mismo problema detectado después del diseño visual implica rediseñar, y después del desarrollo, reconstruir. Los wireframes son un seguro económico contra correcciones costosas.

Hay un riesgo que conviene prever: que alguien del proyecto confunda un wireframe en escala de grises con un diseño final feo. Cuando compartas uno, explica qué es y qué tipo de comentarios necesitas. El wireframe muestra qué va en cada lugar; los colores y las fuentes llegan después. Haz wireframes solo de los tipos de página más importantes, obtén la aprobación y pasa a la maqueta.