Diseño
¿Qué es un wireframe?
Un wireframe es un esquema visual de baja fidelidad que representa la estructura de una página o pantalla antes de aplicar diseño gráfico. Define dónde se colocan los bloques de contenido, la navegación y las llamadas a la acción, normalmente en escala de grises, para acordar la disposición antes de programar.
Por Emili Hernàndez · CEO y Cofounder
Diseñador y desarrollador web. Responsable técnico de Estudi Zeta.
Ver perfil de Emili Hernàndez
Para qué sirve un wireframe
El wireframe permite decidir la estructura antes de empezar el diseño y desarrollo. Al trabajar en gris y sin detalle gráfico, la conversación se centra en qué información va en cada lugar y cómo se navega, que es lo caro de cambiar más adelante.
| Fidelidad | Nivel de detalle | Cuándo se usa |
|---|---|---|
| Baja | Cajas y texto de relleno | Explorar ideas y estructura al inicio |
| Media | Contenido real, sin estilo gráfico | Validar la disposición con el cliente |
| Alta | Cercano al diseño final | Preparar el paso a diseño y desarrollo |
Wireframe, mockup y prototipo
El wireframe define la estructura. El mockup añade el diseño visual (color, tipografía, imágenes). El prototipo hace navegable ese diseño para probar la interacción. Son tres pasos de un mismo proceso, cada uno con más detalle que el anterior.
Cómo se hace un wireframe
Se parte de los objetivos de la página y del contenido que debe aparecer, se ordenan los bloques por prioridad y se define la navegación. Herramientas habituales son Figma o Balsamiq.
Preguntas frecuentes sobre wireframes
¿Para qué sirve un wireframe?
Para acordar la estructura de una pantalla antes de diseñarla y programarla, cuando los cambios aún son baratos.
¿Cuáles son los tipos de wireframe?
De baja, media y alta fidelidad, según el detalle.
¿Qué diferencia hay entre wireframe, mockup y prototipo?
El wireframe define la estructura, el mockup añade el diseño visual y el prototipo lo hace navegable.
¿Cómo se hace un wireframe?
Partiendo del objetivo y el contenido, ordenando los bloques por prioridad y definiendo la navegación.