Qué es Wireframe

Un wireframe es el plano de una página: un esquema simple, casi siempre en blanco y negro o grises, que muestra qué elementos van y dónde. Cajas para las imágenes, líneas para los textos, rectángulos para los botones. No tiene colores de marca ni fotos finales porque lo que se está decidiendo es la estructura, no la estética.

Por qué se hace primero. Si empiezas por el diseño visual, es fácil que la conversación se vaya a si el azul te gusta o no, y se pierda lo importante: si el visitante entiende qué ofreces, encuentra lo que busca y sabe cuál es el siguiente paso. En un wireframe esas preguntas se resuelven sin distracciones, y cambiar un bloque de lugar toma minutos.

Qué debe definir. El orden de las secciones, qué lleva cada una, dónde está la llamada a la acción principal, cómo es el menú, qué pasa en el celular y qué contenido hace falta (textos, fotos, testimonios). Esto último evita sorpresas: muchos proyectos se atrasan porque el diseño está listo y el contenido no.

Baja y alta fidelidad. Un wireframe de baja fidelidad puede ser un boceto en papel. Uno de alta fidelidad ya tiene medidas, jerarquía tipográfica y textos reales, pero sigue sin identidad visual. Después viene el mockup, que aplica los colores, las fuentes y las imágenes, y el prototipo, que lo hace navegable.

Cómo revisarlo. Mira cada página con el objetivo de negocio en la mano: ¿quién llega aquí, qué quiere y qué queremos que haga? Si tienes datos de GA4 o mapas de calor, úsalos para decidir qué va arriba. Aprobar la estructura antes de diseñar evita rehacer trabajo.