Cuando alguien habla del «diseño» de un sitio web o una app, puede referirse a tres cosas muy distintas: un esquema en blanco y negro, una imagen terminada o algo en lo que ya se puede hacer clic. Wireframe, mockup y prototipo responden cada uno una pregunta diferente y entran en un momento distinto del proyecto. Si se confunden, se pierde tiempo y plata.
El wireframe muestra qué va dónde, el mockup muestra cómo se ve y el prototipo muestra cómo funciona.
Pensá en construir una casa. El wireframe es el plano, que dice dónde va cada ambiente. El mockup es el render en 3D, con materiales, colores y muebles. El prototipo es la casa modelo que podés recorrer: abrir las puertas, caminar el pasillo y ver si algo molesta antes de levantar una sola pared.
Qué es un wireframe
Es un esquema de baja fidelidad: bloques grises, líneas y texto de relleno que muestran la estructura de una pantalla. Indica dónde van el logo, el menú, el título principal, las secciones y los botones. No tiene colores, tipografías ni fotos.
Sirve para ponerse de acuerdo en la jerarquía y el orden del contenido antes de invertir en diseño visual. Es rápido y barato de cambiar: mover un bloque lleva minutos. Responde a la pregunta ¿está todo lo que tiene que estar y en el lugar correcto?
Se ve simple a propósito. Si un wireframe se ve lindo, la conversación se desvía al color del botón en lugar de la estructura, que es lo que importa en esta etapa.
Qué es un mockup
Es una representación estática de alta fidelidad: colores, tipografías, imágenes, espaciados y estilo de marca. Es lo más parecido a una captura del producto terminado, con la diferencia de que nada funciona: es una imagen.
Sirve para aprobar la dirección visual y como referencia al momento de desarrollar. Con él se contesta ¿se ve como queremos que se vea?
El wireframe y el mockup son estáticos los dos, y lo que los separa es la fidelidad.
Qué es un prototipo
Es un modelo interactivo que simula la navegación: botones que llevan a otras pantallas, menús que se abren, formularios que avanzan paso a paso. No es código real; se arma en herramientas de diseño. Puede ser de baja fidelidad (wireframes enlazados entre sí) o de alta fidelidad (mockups con interacciones).
Sirve para probar el recorrido con personas reales antes de programar. Acá la pregunta es ¿se entiende cómo usarlo? Además es descartable: se hace para aprender.
Wireframe vs mockup vs prototipo: comparación
| Wireframe | Mockup | Prototipo | |
|---|---|---|---|
| Fidelidad | Baja | Alta | Baja o alta |
| ¿Es interactivo? | No | No | Sí |
| Color y estilo | No, grises | Sí | Depende del nivel |
| Pregunta que responde | ¿Qué va dónde? | ¿Cómo se ve? | ¿Cómo funciona? |
| Cuándo se hace | Al inicio | Con la estructura aprobada | Antes de programar |
| Costo de cambiarlo | Muy bajo | Bajo a medio | Medio |
Cuándo usar cada uno
El wireframe, al empezar
- Al arrancar un proyecto, para definir qué contenido tiene cada pantalla y en qué orden.
- En un rediseño, para repensar la estructura antes de tocar el aspecto.
- Para mapear la navegación y validar con el cliente que no falta nada.
El mockup, con la estructura aprobada
- Para definir colores, tipografías y estilo antes de desarrollar.
- Para mostrar la dirección visual y conseguir la aprobación.
- Como referencia exacta para quien programa.
Ojo: si después de aprobar el mockup piden cambios de estructura, hay que rehacer también lo visual. Es el cambio más caro del proceso.
El prototipo, antes de invertir en desarrollo
- Para probar flujos de varios pasos: reservas, pagos, registros.
- Para validar interacciones complejas con usuarios reales.
- Para mostrar cómo va a funcionar el producto a un cliente o inversor.
Cómo se combinan los tres
El orden natural es wireframe, mockup y prototipo: primero la estructura, después el aspecto y por último el comportamiento. El error más común es saltear el wireframe e ir directo al diseño de alta fidelidad: se mezclan los problemas de estructura con los visuales y se termina rehaciendo todo.
Eso sí, no todos los proyectos necesitan los tres. Una landing page simple puede resolverse con wireframe y mockup, sin prototipo. En cambio, una aplicación, un panel con lógica condicional o una tienda con un proceso de compra a medida ganan mucho con las tres etapas.
Por qué importa saber estos términos al trabajar con IA
Hoy mucha gente le pide a una inteligencia artificial una pantalla, una maqueta o un diseño para su web. En ese pedido, cada término funciona como una instrucción.
Los modelos de lenguaje como Claude o ChatGPT son modelos generativos y estadísticos. Aprendieron patrones a partir de enormes cantidades de texto y, ante un pedido, generan la respuesta más probable según esos patrones y según lo que les escribiste. Construyen la respuesta palabra por palabra a partir de tu pedido, sin sacarla de una base de respuestas ya hechas. Por eso, lo que escribís condiciona de forma directa lo que sale.
Si ponés «hacé un diseño de mi web», el pedido es ambiguo y la IA tiene que adivinar qué quisiste decir. Lo habitual es que devuelva algo genérico, una especie de promedio de lo que suele aparecer con un pedido así. Una palabra precisa funciona como una señal fuerte que acota ese margen de interpretación.
| Lo que le pedís | Lo que le estás diciendo |
|---|---|
| «Hacé un wireframe de la home» | Quiero estructura: bloques, jerarquía y orden, sin colores ni estilo. |
| «Hacé un mockup de la home con estos colores y tipografías» | Quiero el aspecto final, en una imagen estática. |
| «Hacé un prototipo clickeable del proceso de compra» | Quiero un recorrido entre pantallas que pueda probar. |
Con el término correcto la IA entiende mejor qué etapa estás pidiendo, devuelve algo más cercano a lo que tenías en la cabeza y necesitás menos vueltas para llegar. Menos correcciones significa menos tiempo y menos consumo de la herramienta.
Hablar con precisión mejora las chances de que la IA entienda qué querés, aunque no garantiza que la respuesta sea correcta, así que conviene revisar siempre el resultado.
Herramientas para cada etapa
- Papel y lápiz: el mejor primer wireframe, sin fricción.
- Figma: permite hacer los tres en un mismo archivo y tiene plan gratuito.
- Penpot: alternativa de código abierto, parecida a Figma.
- Balsamiq: wireframes de aspecto rústico a propósito, para que nadie discuta colores.
- Framer: prototipos con interacciones avanzadas, que también sirve para publicar sitios.
Errores comunes
- Empezar por la alta fidelidad. Si la estructura está mal, se rehace todo, incluido lo visual.
- Llamar prototipo a un mockup. Genera falsas expectativas: el cliente cree que algo funciona cuando es una imagen.
- Pulir de más el wireframe. Ese esfuerzo corresponde al mockup.
- No probar el prototipo. Si nadie lo usa, se sigue construyendo sobre suposiciones.
- Tratar el prototipo como producto final. Es una herramienta para aprender y se descarta.
Preguntas frecuentes
¿Cuál es la diferencia entre un wireframe y un mockup?
El wireframe muestra la estructura en baja fidelidad y sin estilo; el mockup muestra el aspecto final con colores, tipografías e imágenes. Ninguno de los dos es interactivo.
¿Un mockup es lo mismo que un prototipo?
No. El mockup es una imagen estática; el prototipo se puede recorrer y probar.
¿En qué orden se hacen?
Primero el wireframe, después el mockup y por último el prototipo.
¿Se puede hacer un prototipo sin wireframe?
Se puede, pero suele salir más lento: sin una estructura acordada, el prototipo se rehace cada vez que cambia el orden del contenido.
¿Qué es un prototipo de baja fidelidad?
Es un modelo interactivo temprano, generalmente hecho con wireframes enlazados entre sí, para probar el recorrido antes de diseñar el aspecto final.
¿Un prototipo es lo mismo que un MVP?
No. El prototipo vive en una herramienta de diseño y simula el producto; el MVP es un producto real, con código, que se publica y se usa.
¿Por qué importa usar el término correcto al pedirle algo a una IA?
Porque una IA generativa arma su respuesta a partir de lo que le escribís. Un término preciso reduce la ambigüedad y acerca el resultado a lo que buscás, aunque igual conviene revisarlo.
Antes de aprobar algo
Si estás por encargar un sitio, una tienda o una app, preguntá siempre qué te están mostrando. Saber si es un plano, un render o una casa modelo evita que apruebes algo creyendo que es otra cosa. Con la IA pasa lo mismo: usar el término correcto es parte de pedir bien. Y si estás pensando en un sitio web o una tienda online, es una buena conversación para empezar.
