¿Qué es un mockup?
Un mockup es una representación visual de alta fidelidad de cómo se va a ver un sitio o una aplicación, antes de escribir una sola línea de código. Muestra colores reales, tipografía definitiva, imágenes y textos aproximados a los finales — es lo más parecido a una fotografía del producto terminado que se puede tener sin haberlo construido todavía.
Su función es simple pero decisiva: permite que el cliente vea y apruebe (o pida cambios) sobre el diseño visual completo, antes de que el equipo de desarrollo invierta horas de programación sobre una versión que después habría que rehacer.
Mockup, wireframe y prototipo: no son lo mismo
Los tres términos se usan a veces como sinónimos, pero representan etapas distintas del mismo proceso.
Wireframe
El primer boceto, en escala de grises, sin colores ni imágenes definitivas. Define solo la ubicación de los elementos: dónde va el menú, dónde el botón principal, dónde el texto.
Mockup
La versión visual completa sobre ese wireframe: colores reales, tipografía, imágenes. Se ve como el producto final, pero todavía es una imagen estática, no algo con lo que se pueda interactuar.
Prototipo
Una versión clicable del mockup, que simula la navegación entre pantallas sin que el sitio esté programado de verdad. Sirve para probar el flujo de uso antes de construir el sitio real.
Por qué revisar el mockup antes de programar ahorra dinero
Cambiar un color, mover un botón o reestructurar una sección es rápido sobre un mockup —es una imagen— y mucho más lento sobre un sitio ya programado, donde ese mismo cambio implica tocar código, revisar que no rompa nada más, y probar de nuevo. Por eso el orden correcto de un proyecto serio es: wireframe, mockup, aprobación del cliente, y solo después desarrollo.
Un proyecto que empieza a programarse sin haber aprobado antes el diseño visual completo suele terminar en más rondas de cambios costosas, porque los ajustes de forma se descubren tarde, cuando ya cuestan tiempo de desarrollo en vez de solo tiempo de diseño.
En resumen
Lo esencial sobre qué es un mockup:
Es la representación visual de alta fidelidad de cómo se verá el producto terminado, antes de programarlo.
Es distinto del wireframe (boceto sin color, solo ubicación de elementos) y del prototipo (versión clicable que simula navegación).
Revisarlo y aprobarlo antes de programar evita que los ajustes de diseño se conviertan en cambios costosos de código más adelante en el proyecto.
