Las tres palabras se usan como sinónimos y no lo son. Confundirlas es la causa más común de que un proyecto web se alargue: el cliente aprueba algo creyendo que aprobó otra cosa.
Wireframe: la estructura, sin estética
Un wireframe es el plano: cajas grises, texto de relleno, cero colores y cero tipografías. Solo responde qué va en la página y en qué orden.
Se hace en papel, en Figma o en una pizarra, y se hace rápido a propósito: si se ve bonito, la conversación se desvía a los colores cuando todavía hay que decidir si el bloque de precios va antes o después de los testimonios.
Qué se aprueba aquí: el orden de la información y qué secciones existen.
Mockup: cómo se va a ver
El mockup web es el wireframe ya vestido: colores reales, tipografía, fotos, espaciados. Se parece tanto al sitio final que mucha gente cree que ya está hecho.
No se puede hacer clic en nada: es una imagen. Por eso es rápido de cambiar — mover un bloque toma minutos, y moverlo cuando ya está programado toma horas.
Qué se aprueba aquí: la identidad visual y el aspecto final.
Prototipo: cómo se va a sentir
El prototipo web son los mockups conectados: haces clic en «Servicios» y te lleva a la pantalla de servicios. Sigue sin ser un sitio real —no hay código ni base de datos—, pero ya puedes recorrerlo.
Sirve para detectar lo que ningún documento detecta: que faltó un camino de vuelta, que el formulario está a tres clics de donde debería, que el menú no tiene sentido cuando lo usas.
Qué se aprueba aquí: el recorrido completo, antes de programar.
El orden y para qué sirve respetarlo
- Wireframe → decides qué se dice y en qué orden.
- Mockup → decides cómo se ve.
- Prototipo → compruebas cómo se recorre.
- Código → se construye.
Cada paso cuesta más que el anterior. Cambiar el orden de dos secciones en un wireframe son cinco minutos; en el mockup, media hora; ya programado, medio día. Por eso las etapas existen: no son burocracia, son la forma más barata de equivocarse.
Qué pasa si te saltas alguna
Sin wireframe: se discute el color del botón en la primera reunión y nadie decidió todavía si la página necesita ese botón.
Sin mockup: el cliente ve el diseño por primera vez ya programado, y cualquier cambio de fondo duele en horas y en dinero.
Sin prototipo: los errores de recorrido aparecen cuando el sitio ya está publicado y son los que cuestan clientes.
Cuándo se puede acortar
En un sitio de una a cinco páginas con una estructura conocida —negocio de servicios, una página por servicio—, el wireframe puede resolverse en una llamada y el prototipo se puede saltar. En un proyecto con catálogo, filtros, panel o varios idiomas, saltarse el prototipo es cómo se alargan los proyectos un mes.
Lo que pido antes de empezar
No hace falta que traigas nada de esto hecho. Lo que sí ahorra semanas: una lista de tus servicios en el orden en que quieres venderlos, las diez preguntas que más te hacen por teléfono, tus fotos reales y —si lo tienes— el enlace a dos o tres sitios que te gustan, diciendo qué te gusta de cada uno.
Así corre el proceso completo de un proyecto, de la primera llamada a la publicación, con fechas por etapa y precios publicados.