Definición:
Mockup es una representación visual detallada de cómo se espera que se vea un producto, una interfaz, una pieza gráfica o un soporte antes de producirlo o desarrollarlo. Suele incorporar colores, tipografías, imágenes, composición y dimensiones aproximadas para comunicar la apariencia prevista.
Un mockup puede mostrar una pantalla aislada, varias vistas de una aplicación, un envase, una publicación, un logotipo aplicado a distintos soportes o un producto situado en un contexto realista. No tiene que ser un fotomontaje ni estar creado en formato PSD. Tampoco demuestra por sí solo cómo funcionará el producto ni equivale al resultado final.
Índice de contenidos
Qué representa un mockup
El nivel de detalle depende de la decisión que deba facilitar. Algunos mockups presentan una composición limpia sobre un fondo neutro; otros simulan el contexto de uso mediante fotografías, renders o escenas tridimensionales. Los elementos más habituales son:
- Composición: distribución, proporciones, espacios y jerarquía visual de los componentes.
- Identidad visual: colores, tipografías, iconos, logotipos y otros recursos de branding.
- Contenido de muestra: textos, imágenes y datos suficientemente representativos para valorar el diseño.
- Estados y variantes: versiones para diferentes pantallas, formatos, tamaños o situaciones de uso.
- Contexto de aplicación: soporte físico o digital en el que se verá el diseño, como un móvil, un envase, un cartel o una prenda.
La fidelidad visual puede ser media o alta, pero un acabado realista no convierte el mockup en un producto funcional ni garantiza que todos sus detalles sean definitivos.
Tipos de mockups
Los mockups pueden clasificarse según el objeto que representan:
- De interfaces: muestran páginas web, aplicaciones, paneles o flujos de pantallas con su apariencia prevista.
- De identidad y piezas gráficas: aplican logotipos, colores y composiciones a tarjetas, papelería, señalización o publicaciones.
- De packaging y contenidos editoriales: representan envases, etiquetas, cubiertas, páginas o materiales impresos.
- De productos físicos: presentan la forma, el acabado o la apariencia exterior de un objeto mediante ilustraciones, fotografías o modelos 3D.
- De campañas y formatos: adaptan una creatividad a anuncios, redes sociales, pantallas y otros puntos de contacto para comprobar su coherencia.
En proyectos digitales, un mismo diseño puede necesitar distintas vistas para reflejar el diseño responsive, pero esas vistas siguen siendo representaciones y no pruebas del comportamiento real.
Diferencias entre wireframe, mockup y prototipo
Estos recursos pueden utilizarse en un mismo proceso, pero responden a preguntas diferentes:
- Wireframe: representa principalmente la estructura, la jerarquía y la ubicación aproximada de los elementos. La ficha de wireframe desarrolla este concepto.
- Mockup: concreta la apariencia visual, el contenido de muestra y los estados que deben revisarse.
- Prototipo: simula total o parcialmente la interacción, los recorridos o el comportamiento para poder probarlos. Puede tener baja o alta fidelidad.
- Producto final: incorpora la implementación, los contenidos definitivos, las restricciones técnicas y las comprobaciones necesarias para su uso real.
Un mockup puede integrarse en un prototipo o servir como base para crearlo, pero una imagen estática no debe presentarse como evidencia de funcionalidad.
Cómo se crea y se revisa un mockup
El proceso varía según el soporte y la fase del proyecto. Una secuencia habitual incluye estos pasos:
- Definir el objetivo: concretar qué decisión debe facilitar, a quién se mostrará y qué vistas son necesarias.
- Reunir los materiales: partir del briefing, el contenido, la identidad visual y, cuando exista, el wireframe aprobado.
- Elegir la fidelidad: determinar qué detalles deben ser realistas y cuáles pueden mantenerse provisionales.
- Construir la composición: aplicar componentes, estilos, imágenes y contenidos manteniendo consistencia entre las vistas.
- Situar el diseño en contexto: usar un dispositivo, un soporte físico o una escena solo cuando ayude a evaluar la aplicación real.
- Revisar e iterar: recoger observaciones, comprobar variantes y documentar los cambios antes de entregar o implementar.
Puede crearse con herramientas de diseño de interfaces, edición de imágenes, ilustración, presentaciones o modelado 3D. El formato de trabajo debe permitir modificar los elementos necesarios; no existe un único programa ni un tipo de archivo obligatorio.
Para qué sirve y cuáles son sus límites
El mockup ayuda a compartir una propuesta visual, comparar alternativas, detectar incoherencias, preparar una presentación y acordar criterios antes de invertir en producción o desarrollo. También puede facilitar la comunicación entre diseño, contenido, marketing y equipos técnicos dentro de un proceso de Design Thinking.
Sin embargo, debe interpretarse con estas limitaciones:
- No valida la usabilidad: una composición atractiva no demuestra que las personas comprendan o completen las tareas previstas; esto requiere investigación y pruebas de UX.
- No prueba la interacción: transiciones, respuestas del sistema, errores y recorridos necesitan un prototipo o una implementación funcional.
- No garantiza viabilidad: materiales, costes, rendimiento y restricciones técnicas pueden obligar a modificar el diseño.
- No sustituye las especificaciones: medidas, componentes, contenidos y estados deben documentarse para evitar interpretaciones durante la producción.
- No asegura resultados comerciales: una presentación realista puede favorecer la comprensión, pero no garantiza aprobación, conversión ni rendimiento.