Qué es un mockup: para qué sirve, tipos y ejemplos

Antes de pagar la producción de cualquier diseño aparece la misma pregunta: ¿cómo se va a ver de verdad? El mockup responde eso. El diseñador lo usa para mostrar una app a todo color antes de programarla, la imprenta para enseñar el logo sobre la playera antes de comprar las prendas lisas y la tienda en línea para vender tazas que se imprimen cuando alguien las compra. Aquí tienes qué es un mockup en diseño gráfico, web y marketing, cómo se distingue de un wireframe y de un prototipo, los tipos más comunes y cómo hacer el tuyo.

Respuesta directa. Un mockup es una vista previa realista y estática de un diseño tal como se verá en su uso real, creada antes de que exista el producto final. En diseño web y de apps es la pantalla de alta fidelidad con colores, tipografía e imágenes reales, sin interacción todavía. En diseño de producto e impresión es tu diseño colocado sobre la foto de un objeto (playera, sudadera, taza, caja o celular) para que parezca el producto terminado.

Qué es un mockup

Un mockup es una representación visual realista de un diseño aplicado. La palabra viene del inglés mock-up, que en fabricación y arquitectura designaba una maqueta física a escala o de tamaño real para ver cómo quedaría un producto, una habitación o un vehículo antes de producirlo. El diseño gráfico adoptó el término para el equivalente digital: un fotomontaje que se ve terminado y sirve para revisar y presentar una idea.

En español también se le dice maqueta, boceto de alta fidelidad o fotomontaje, aunque en agencias y escuelas de diseño casi siempre se usa la palabra en inglés. Hoy se usa con dos significados principales, y el contexto indica cuál:

• En diseño web, de apps y programación, el mockup es la versión estática y de alta fidelidad de una pantalla. Está entre el wireframe (estructura) y el prototipo (interacción).
• En diseño gráfico, de producto y merch, el mockup es tu diseño montado sobre la foto o el render de un objeto real, como un estampado en una playera o un logo en una taza.

Los dos cumplen la misma función: que la gente juzgue cómo se ve algo antes de invertir tiempo y dinero en fabricarlo, imprimirlo o programarlo.

Mockup, wireframe y prototipo

En diseño de interfaces, el mockup es una de tres etapas que van de lo esquemático a lo real. Cada una responde una pregunta distinta.

	Wireframe	Mockup	Prototipo
Fidelidad	Baja	Alta	Alta o media
Qué muestra	Distribución y bloques	Colores, tipografía, imágenes y espacios	El diseño final más clics y transiciones
Interacción	Estático	Estático	Se puede navegar
Pregunta que responde	¿Dónde va cada cosa?	¿Cómo se va a ver?	¿Cómo va a funcionar?
Uso típico	Planeación y estructura	Aprobación visual con el cliente	Pruebas con usuarios y entrega a desarrollo

El wireframe usa cajas grises y texto de relleno para que la conversación se quede en la estructura. El mockup agrega el diseño visual real, y es el momento en que el cliente opina sobre colores, tipografía e imágenes. El prototipo enlaza esos mockups para que alguien toque un botón y llegue a la siguiente pantalla. En la práctica, los equipos juntan etapas: un sitio sencillo puede pasar del boceto al mockup, y una app compleja recorre las tres varias veces.

Tipos de mockup

Fuera del diseño de interfaces, «mockup» casi siempre significa mockup de producto. Estos son los tipos más comunes en impresión, merch y marketing:

• Mockups de ropa. Playeras, sudaderas, gorras y bolsas de tela, con el estampado siguiendo los pliegues. Son la base de las tiendas de impresión bajo demanda.
• Mockups de tazas y termos. El diseño se curva alrededor de un cilindro.
• Mockups de empaque. Cajas, bolsas, etiquetas, botellas y latas, para presentaciones a clientes y preventas.
• Mockups de papelería e impresos. Tarjetas de presentación, flyers, carteles, hojas membretadas e invitaciones sobre un escritorio o una pared.
• Mockups de dispositivos. Un sitio web o una app dentro del marco de un celular, una laptop o una tablet, para portafolios y páginas de lanzamiento.
• Mockups de señalética. Fachadas, anuncios espectaculares, rotulación de vehículos y lonas, para ver el logo a escala real.
• Mockups editoriales. Libros, revistas y portadas de álbum mostrados como objetos físicos.

Un buen mockup de producto tiene tres cualidades. El diseño sigue la superficie: se dobla con la tela o se curva con la taza. La luz y las sombras de la foto quedan por encima del estampado, así que se ve impreso y no pegado. Y el tamaño del diseño coincide con lo que la imprenta realmente va a producir, para que el cliente reciba lo que vio.

Para qué sirve un mockup

Un mockup sirve para ver, aprobar y vender un diseño antes de producirlo. En la práctica se usa en cinco situaciones:

1. Fotos de producto para tu tienda. Las tiendas de impresión bajo demanda publican productos que se fabrican después del pedido, así que el mockup es la foto del producto en tu tienda en línea, tu catálogo de Instagram o tu marketplace.
2. Aprobaciones con el cliente. Un logo sobre la fachada o el uniforme se aprueba más rápido que un archivo plano, porque el cliente lo ve en su contexto.
3. Decidir colores. El mismo diseño en playeras blanca, gris y negra lado a lado muestra qué color le queda antes de comprar inventario.
4. Preventas y presentaciones. Un mockup de empaque o de merch mide el interés en redes o en una campaña de preventa antes de producir el lote.
5. Coherencia visual de marca. La página de lanzamiento, el catálogo y las publicaciones usan el mismo set de mockups. Si estás construyendo tu identidad de marca, los mockups de papelería y señalética muestran el sistema aplicado.

El mockup en diseño gráfico

En diseño gráfico, el mockup es la forma estándar de presentar una propuesta. Un logo se entrega mejor montado en tarjeta, fachada y bolsa que en un PDF con fondo blanco; un cartel, colgado en una pared; un empaque, sobre un anaquel. Por eso los portafolios de diseño están llenos de mockups: el cliente evalúa el diseño en el lugar donde va a vivir.

Cómo hacer un mockup

Hay tres rutas, según cuánto necesites personalizar:

• Plantillas descargables. Archivos PSD con capas inteligentes o PNG con zonas de reemplazo. Cambias el diseño, guardas y listo. Los más populares aparecen en muchas tiendas, así que tu foto se parecerá a la de otros.
• Generadores de mockups en línea. Subes tu diseño, eliges el producto y descargas. Son la ruta más rápida para tiendas de ropa y tazas.
• Mockups a la medida. Un fotógrafo o estudio fotografía una muestra real o modela un render 3D de tu empaque. Es la ruta más cara y conviene para la imagen principal de un lanzamiento.

Sea cual sea la ruta, revisa tres cosas antes de publicar: que el estampado tenga el tamaño real que va a imprimir el proveedor, que los colores se parezcan a la prenda real y que tengas al menos una foto de una muestra impresa junto a los mockups. Esa foto real responde la duda de «¿así llega?» mejor que cualquier escena adicional. Si además vas a tomar fotos de tus productos, la guía de fotografía de producto complementa los mockups.

En diseño web, el costo del mockup es tiempo de diseño: las horas que tarda un diseñador en convertir un wireframe en pantallas de alta fidelidad en herramientas como Figma, Sketch o Adobe XD.

Cómo hacer un mockup de producto con Playyy

Playyy es un agente de diseño con IA que incluye una función de mockups para colocar tu diseño sobre fotos de playeras, sudaderas, tazas y otros productos. En el editor abre el panel Elements → Mockups, inserta la foto de una prenda y suelta tu diseño encima: doble clic para colocarlo, arrastra para moverlo, jala una esquina para escalarlo y usa el control superior para rotarlo. El menú de tamaño de impresión ofrece el tamaño recomendado o llenar el área de impresión, y la página de mockup de playera recorre el mismo flujo desde una imagen que subes.

Cuando cambias el color de la prenda, los pliegues, el resorte y las sombras se mantienen realistas y el estampado queda exactamente como lo diseñaste; así el generador de mockups de sudaderas saca versiones en avena, gris carbón y azul marino desde una sola colocación. También puedes pedirle al agente en el chat que ponga tu diseño en una taza o en una bolsa, o subir tu propia foto de producto: el agente detecta las superficies imprimibles (caras planas, cilindros verticales como las tazas y frentes de prendas vistos de frente) y coloca el diseño encima, que sigue siendo editable.

Para una línea completa, pon varias prendas en una página y expórtalas juntas. El generador de mockups de ropa cubre ese caso, con descargas en PNG o JPG empaquetadas en un ZIP para tu tienda y en PDF para pruebas. Playyy se empieza gratis, con créditos diarios que se renuevan cada día.

Conclusión

Un mockup es la vista previa realista y estática que está entre la idea y el producto terminado. En diseño web es la pantalla de alta fidelidad entre el wireframe y el prototipo; en diseño gráfico y de producto es tu diseño sobre la foto de una playera, una taza o una caja. Úsalo para vender antes de imprimir, para que el cliente apruebe más rápido y para que todas tus fotos de producto y de lanzamiento se vean coherentes.