¿Qué es un Mockup?
Aprende qué es un mockup: herramienta visual para previsualizar cómo quedará un diseño en su contexto de aplicación final. Montaje visual preliminar antes de producción.
Los mockups son herramientas visuales útiles que nos permiten previsualizar cómo quedará un diseño específico (un logo, una interfaz, un anuncio, un envase) en su contexto de aplicación final. Todo antes de invertir tiempo y recursos significativos en su producción o desarrollo definitivo.
Un mockup es un montaje visual para ver una vista preliminar de cómo quedaría un diseño.
Ya sea para presentar una propuesta de nuevo packaging a un cliente proyectado en una caja de cartón. Mostrar cómo se verá la nueva interfaz de una app en la pantalla de un móvil. O visualizar un logotipo en distinto material corporativo.
Representación de los pasos, de logo a preview de la caja a la caja real
Su objetivo es doble: por un lado, crear una previsualización fotorrealista que ayude a evaluar la idoneidad del diseño en su contexto de uso. Además de facilitar enormemente la comunicación y comprensión del concepto entre diseñadores, equipos de marketing, desarrolladores y clientes.
Uso Interno y para Aprobaciones
Antes de comprometerse con la producción masiva de un nuevo packaging, imprimir miles de folletos, desarrollar una compleja interfaz de usuario o fabricar merchandising, un mockup permite a todas las partes implicadas visualizar el resultado final de forma concreta y realista.
Uso como Recurso de Marketing y Presentación
Más allá de su función de control, los mockups son también potentes activos digitales por derecho propio, listos para ser utilizados en la comunicación externa y la promoción.
6 ejemplos de plantillas de mockups - Envato
¿Cómo Funcionan los Mockups? Las Capas y la Perspectiva
La mayoría de los mockups que se pueden editar (comúnmente en formato .PSD para Adobe Photoshop) utilizan un sistema estructurado de capas (layers).
Existe una capa base que contiene la fotografía o render del objeto principal (el móvil, la camiseta, la valla publicitaria, el libro).
Existen una o varias capas especiales denominadas "Objetos Inteligentes" (Smart Objects). Estas capas actúan como contenedores donde se coloca o pega el diseño personalizado que queremos aplicar (nuestro logo, la captura de pantalla de la app, el diseño del anuncio, la portada del libro).
Hay capas adicionales que aplican efectos realistas sobre el objeto inteligente: texturas, reflejos, sombras, curvas, etc.
La "magia" reside en que, al editar el contenido del Objeto Inteligente (haciendo doble clic sobre él), el diseño que introduzcamos se aplicará automáticamente a la capa base, heredando las transformaciones de perspectiva, los efectos de iluminación, sombras y texturas definidos en el mockup.
Para que un mockup resulte creíble y fotorrealista, es crucial que el diseño aplicado respete perspectiva, la iluminación, las sombras y las curvaturas del objeto base fotografiado.