Qué es un mockup

Un mockup es una simulación visual de alta fidelidad de como se verá un producto terminado: una página web, una app, un empaque o una pieza impresa. Se ve casi idéntico al resultado final, con colores, tipografía y contenido reales o muy cercanos a los reales, pero todavía no es funcional ni está producido físicamente.

Su propósito es dejar ver el resultado antes de invertir en programarlo, imprimirlo o fabricarlo, para poder corregir mientras corregir todavía es barato.

Mockup, wireframe y prototipo: no son lo mismo

Estos tres términos se confunden seguido porque aparecen en la misma etapa de un proyecto, pero cada uno responde una pregunta distinta:

  • Wireframe: un esquema básico, casi siempre en escala de grises, que define donde va cada elemento sin preocuparse por el diseño visual. Responde "que va donde".
  • Mockup: el diseño visual completo y realista, con colores, tipografía e imagenes definitivas o casi definitivas. Responde "como se va a ver".
  • Prototipo: una versión interactiva del mockup, donde se puede hacer clic y navegar como si ya funcionara. Responde "cómo se va a sentir usarlo".

El orden lógico de un proyecto bien planeado suele ser justamente ese: primero wireframe, después mockup, y solo si el proyecto lo amerita, un prototipo interactivo antes de programar.

Dónde se usa más seguido

El uso más común es en diseño de páginas web y aplicaciones, donde un mockup deja ver exactamente cómo se verán las pantallas antes de que un desarrollador escriba una sola línea de código. También es estandar en diseño de empaque, donde un mockup muestra el diseño aplicado sobre una simulación tridimensional del producto real, y en diseño editorial, para revisar cómo se verá una revista o un catálogo impreso antes de mandarlo a imprenta.

Por qué revisarlo antes de producir

El costo de un cambio crece en cada etapa del proyecto. Cambiar un color en un mockup toma minutos. Cambiar ese mismo color después de qué la página web ya está programada implica tocar código. Cambiarlo después de que la pieza ya se imprimio en tres mil copias implica reimprimir todo.

Por eso saltarse el mockup para "avanzar más rápido" casi siempre termina costando más tiempo, no menos: los ajustes que debieron resolverse en una imagen estática terminan resolviendose sobre un producto ya construido.

Qué revisar en un mockup antes de aprobarlo

Aprobar un mockup solo porque "se ve bien" deja pasar los errores más caros. Vale la pena revisar de forma específica:

  • Que el contenido mostrado sea real o realista, no texto de relleno tipo "lorem ipsum" que oculta si el diseño en verdad funciona con el contenido real.
  • Que se haya revisado en al menos dos tamaños de pantalla si es para web, porque un mockup que solo se ve en escritorio puede fallar por completo en móvil.
  • Que los textos largos (nombres de producto, descripciones) quepan sin romper el diseño, no solo el texto corto de ejemplo.
  • Que los colores y contrastes se vean bien tanto en pantalla como impresos, si el diseño va a usarse en ambos medios.