Un wireframe es el esquema estructural de una página o pantalla: una representación simplificada —cajas, líneas, textos indicativos, sin diseño visual— que define qué elementos hay, dónde van y qué jerarquía tienen, antes de diseñar nada. Es el plano del arquitecto aplicado al diseño web y de producto: se discute la distribución antes de elegir los acabados.
Su razón de ser es separar conversaciones. Cuando estructura y estética se presentan juntas, el feedback se va a los colores y la foto, y los problemas de fondo —falta contenido clave, la jerarquía no refleja las prioridades, el flujo confunde— pasan inadvertidos hasta que corregirlos es caro. El wireframe, deliberadamente feo, obliga a discutir lo que importa primero: contenido, estructura, recorrido.
Se trabaja en niveles de fidelidad: del boceto a mano y el wireframe de baja fidelidad (cajas grises) al de alta fidelidad (medidas y contenido reales, aún sin capa visual), que conecta con el prototipo navegable para testar flujos con usuarios. Después llega la UI: el diseño visual sobre la estructura ya validada.
En el proceso de un proyecto web profesional, los wireframes de las páginas clave —home, servicios, landing pages— se definen a partir de la estrategia: qué debe conseguir cada página, qué preguntas responde el visitante en cada scroll, dónde van los CTAs. Es la fase donde la UX y el copywriting se sientan en la misma mesa: la estructura y el mensaje se diseñan juntos.