≡En resumen
- Un wireframe define qué hay en cada pantalla y dónde, no cómo se ve: por eso se hace en grises.
- Cambiar un wireframe cuesta minutos; cambiar una web ya diseñada y programada cuesta días.
- Baja fidelidad para explorar ideas; alta fidelidad para validar con usuarios y pasar a diseño.
- Wireframe, mockup y prototipo son fases distintas: estructura, aspecto visual e interacción.
- Usa textos reales o aproximados en lugar de lorem ipsum: el contenido cambia el diseño.
01 ¿Qué es un wireframe?
El término viene de los gráficos por ordenador: un modelo 3D en wire-frame representaba un objeto solo con sus aristas, como si estuviera hecho de alambre. En diseño de interfaces se adoptó para lo mismo: ver el esqueleto de la pantalla antes de «vestirlo». Es el paso en el que la arquitectura de la información se convierte en páginas concretas.
El Nielsen Norman Group lo describe como el entregable que muestra ideas de maquetación a nivel de página. Cuando además hay que representar cómo se pasa de una pantalla a otra, se usan los wireflows: wireframes unidos por flechas que indican qué elemento lleva a cada paso.
02 ¿Para qué sirve un wireframe?
Poner de acuerdo al equipo
Cliente, diseñador, redactor y programador ven lo mismo y discuten sobre la estructura, no sobre colores.
Priorizar el contenido
Obliga a decidir qué es lo más importante de cada página y qué sobra.
Detectar problemas pronto
Un recorrido confuso se ve en el wireframe, cuando corregirlo apenas cuesta.
Estimar el desarrollo
Cada bloque y formulario visible permite calcular mejor el trabajo de programación.
Preparar el SEO
Define encabezados, bloques de texto y enlaces internos antes de escribir y maquetar.
Probar con usuarios
Un wireframe clicable basta para ver si la gente encuentra lo que busca.
03 Wireframes de baja, media y alta fidelidad
| Nivel | Aspecto | Herramienta típica | Cuándo usarlo |
|---|---|---|---|
| Baja fidelidad | Bocetos a mano o cajas con una X para las imágenes | Papel, pizarra, Balsamiq | Explorar varias ideas en poco tiempo, al inicio del proyecto |
| Media fidelidad | Digital, en grises, con tamaños y espaciado aproximados | Figma, Penpot, Axure RP | Acordar la estructura de cada plantilla con el cliente |
| Alta fidelidad | Contenido real, tipografías y rejilla definitivas, aún sin estilo de marca | Figma, Axure RP | Validar con usuarios y entregar a diseño visual y desarrollo |
La fidelidad baja no es un defecto: al ver algo inacabado, los usuarios y el cliente se atreven a criticar la idea, no el acabado. Por eso conviene empezar con bocetos y subir de nivel solo cuando la estructura esté clara. También se diferencian por dispositivo: diseña primero la versión móvil, donde el espacio obliga a priorizar.
04 Wireframe vs mockup vs prototipo: diferencias
| Wireframe | Mockup | Prototipo | |
|---|---|---|---|
| Qué define | Estructura y jerarquía | Aspecto visual final | Interacción y comportamiento |
| Aspecto | Grises, cajas y textos | Colores, imágenes y tipografías de marca | Puede ser de baja o de alta fidelidad |
| Interactivo | Normalmente no (salvo wireflows clicables) | No, es estático | Sí, se puede navegar |
| Pregunta que responde | ¿Qué hay en cada pantalla y dónde? | ¿Cómo se verá? | ¿Funciona para el usuario? |
| Momento | Tras la investigación y la arquitectura | Tras aprobar el wireframe | Para probar antes de programar |
En la práctica, las fronteras se difuminan: un wireframe de alta fidelidad enlazado en Figma ya es un prototipo sencillo, y un mockup con enlaces se convierte en un prototipo visual. Lo importante es el orden: primero estructura, después estética, y probar con usuarios en cuanto haya algo navegable.
05 Cómo hacer un wireframe paso a paso
-
1
Define objetivo y usuarios
Qué debe conseguir la página (una cita, una compra, un contacto) y quién la va a usar. Si puedes, parte de entrevistas o datos reales.
-
2
Haz inventario de contenido
Lista todo lo que debe aparecer: textos, precios, fotos, formularios, pruebas sociales, textos legales.
-
3
Dibuja el flujo
Traza el recorrido de pantalla a pantalla hasta completar la tarea principal.
-
4
Boceta en papel
Haz tres o cuatro versiones rápidas de la pantalla clave y quédate con la mejor.
-
5
Pásalo a digital
Usa una rejilla, empieza por móvil y reutiliza componentes (cabecera, tarjetas, botones).
-
6
Anota el comportamiento
Explica en notas qué hace cada botón, qué es dinámico y qué pasa si hay error.
-
7
Prueba e itera
Enséñalo a usuarios y al cliente, corrige y solo entonces pasa a diseño visual.
Los dos primeros pasos marcan la diferencia. Si te falta información sobre los usuarios, revisa los métodos de nuestra guía de UX research; y para el recorrido entre pantallas, apóyate en un user flow antes de dibujar.
06 Herramientas para hacer wireframes
| Herramienta | Tipo | Ideal para |
|---|---|---|
| Papel y rotulador | Analógica | Las primeras ideas, en reuniones y talleres |
| Balsamiq | Wireframes de baja fidelidad con aspecto de boceto | Equipos que quieren evitar discusiones estéticas tempranas |
| Figma | Diseño colaborativo en el navegador | Pasar de wireframe a mockup y prototipo en la misma herramienta |
| Miro | Pizarra colaborativa | Talleres remotos, flujos y wireframes rápidos con el cliente |
| Axure RP | Prototipado avanzado | Wireframes con lógica, condiciones y formularios complejos |
| Penpot | Diseño colaborativo de código abierto | Equipos que prefieren una alternativa libre y autoalojable |
Varias de estas herramientas ya incluyen funciones de IA que generan pantallas a partir de una descripción. Son útiles para arrancar, pero el criterio sobre qué necesita el usuario y qué debe priorizar la página sigue siendo el trabajo del diseñador.
07 Buenas prácticas y errores frecuentes
- ✓Mantén los grises: si añades colores de marca, la conversación se desvía a la estética.
- ✓Usa componentes y una rejilla para que el wireframe se traslade bien al diseño y al código.
- ✓Diseña los estados: vacío, cargando, error y éxito de cada formulario.
- ✓Incluye la versión móvil de cada plantilla, no solo la de escritorio.
- ✓Numera y anota cada pantalla para que desarrollo sepa qué es dinámico.
- ✓No lo presentes como diseño terminado: explica al cliente qué está aprobando.
La academia quería «una web más moderna». Antes de tocar colores, los wireframes revelaron que el precio de los cursos estaba a tres clics y que el formulario pedía nueve datos. Al simplificarlo en el wireframe y probarlo con cinco alumnos, la estructura quedó aprobada en una semana y el diseño visual se hizo sin retrocesos. Así planteamos cada proyecto de diseño UX/UI y de diseño web a medida.
Preguntas frecuentes sobre Wireframe
Es un esquema en blanco y negro de una pantalla de web o app que muestra qué elementos contiene y dónde van, sin diseño visual.
Sirve para definir y acordar la estructura y el contenido de cada página, detectar problemas de usabilidad y validar la idea antes de diseñar y programar.
El wireframe define la estructura en grises; el mockup muestra el aspecto visual final con colores, imágenes y tipografías, normalmente estático.
El wireframe es un esquema de la estructura; el prototipo es navegable y sirve para probar la interacción. Un wireframe enlazado puede actuar como prototipo de baja fidelidad.
Los más habituales son Figma, Balsamiq, Miro, Axure RP y Penpot, aunque el papel sigue siendo la forma más rápida de empezar.
Se usa el anglicismo, pero también «esquema de página», «maqueta de estructura» o «esqueleto de la página».
Normalmente no. Se hace en escala de grises y con cajas en lugar de fotos para que la discusión se centre en la estructura; el color y las imágenes llegan en el mockup.
Es un boceto rápido, a mano o con cajas simples, para explorar ideas de estructura sin detalles; se corrige en minutos y se usa al inicio del proyecto.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗