Mockup: qué es, para qué sirve y cómo hacer uno paso a paso
Cómo ver, enseñar y corregir un diseño antes de producirlo, ya sea una web, un producto o tu próxima newsletter
Un mockup es una representación visual realista de cómo quedará un diseño antes de producirlo: una web, una app, un envase, una camiseta o un email. Muestra colores, tipografías, imágenes y textos, pero todavía no funciona.
Sirve para ver el resultado, enseñarlo y corregirlo cuando cambiar algo aún cuesta poco.
¿Qué significa mockup?
En inglés, mock-up es una maqueta o modelo a escala. En diseño se traduce como maqueta o boceto visual, aunque en español se usa casi siempre la palabra original.
Esta maqueta responde a una pregunta: «¿cómo se verá esto cuando esté terminado?».
¿Para qué sirve un mockup?
Para decidir antes de producir. Es más barato cambiar un color en un diseño que reimprimir mil cajas o reprogramar una web.
Para presentar una idea. El cliente o el equipo ven algo parecido al resultado final, no una descripción.
Para detectar errores. Textos que no caben, contrastes pobres o elementos que se pierden.
Para vender antes de fabricar. Muchas tiendas muestran el producto con una maqueta mientras preparan la producción.
Para coordinar al equipo. Diseño, desarrollo y marketing trabajan sobre la misma referencia.
Mockup, wireframe y prototipo: diferencias
| Wireframe | Mockup | Prototipo | |
|---|---|---|---|
| Qué es | Esquema de la estructura | Diseño visual estático | Versión interactiva |
| Nivel de detalle | Bajo: cajas y líneas | Alto: colores, fuentes, imágenes | Alto y con navegación |
| ¿Se puede usar? | No | No | Sí, de forma simulada |
| Para qué sirve | Ordenar el contenido | Ver cómo quedará | Probar cómo se usa |
| Momento | Al principio | Después del wireframe | Antes de desarrollar |
Lo habitual es pasar por las tres fases: primero la estructura, luego el aspecto y después la interacción.
Tipos de mockup
Web. Las páginas de una web con su diseño final: cabecera, menú, textos, imágenes y botones.
App. Las pantallas de una aplicación para móvil o tableta, a menudo dentro de la imagen de un teléfono.
Producto. El diseño aplicado sobre un objeto: camisetas, tazas, cajas, botellas o bolsas.
Branding. El logotipo y la identidad de una marca sobre tarjetas, papelería, rótulos o uniformes.
Publicidad. Carteles, vallas, anuncios en redes o en prensa tal como se verían en su sitio.
Email. Una newsletter o un email comercial antes de enviarlo, en versión de ordenador y de móvil.
Cómo hacer un mockup en 6 pasos
1. Define el objetivo. Qué quieres mostrar y a quién: un cliente, tu equipo o tus compradores.
2. Parte de un wireframe o un boceto. Ordena primero el contenido y luego decide el aspecto.
3. Aplica la identidad visual. Colores, tipografía, logotipo e imágenes de tu marca.
4. Usa contenido real. Textos e imágenes definitivos, o lo más parecidos posible. El texto de relleno esconde problemas de espacio.
5. Muéstralo en contexto. Una web dentro de una pantalla, un envase en una estantería, un email en un móvil.
6. Pide opinión y corrige. Enséñalo a quien tiene que aprobarlo y a alguien que represente a tu cliente.
Diseña tus emails sin código
Elige una plantilla en Mailrelay, adáptala a tu marca con el editor de arrastrar y soltar y envíate una prueba.
Herramientas para crear mockups
| Herramienta | Para qué destaca | Precio |
|---|---|---|
| Figma | Diseño web y de apps, trabajo en equipo | Plan gratuito y planes de pago |
| Penpot | Alternativa de código abierto a Figma | Gratis |
| Balsamiq | Wireframes y maquetas rápidas de baja fidelidad | De pago, con prueba |
| Canva | Maquetas de producto y redes con plantillas | Plan gratuito y planes de pago |
| Photoshop | Maquetas de producto realistas con capas | De pago |
Para un diseño de producto, muchas plantillas gratuitas permiten colocar tu diseño sobre una foto con un par de clics. Revisa siempre la licencia antes de usarlas en publicidad.
El mockup en el email marketing
Antes de enviar una campaña conviene verla como la verá el suscriptor:
Diseña sobre una plantilla. Las plantillas de email marketing son, en la práctica, maquetas listas para adaptar a tu marca.
Revisa la versión móvil. Gran parte de los emails se abren en el teléfono. Un diseño responsive evita textos diminutos y botones imposibles de pulsar.
Comprueba cómo se ve en cada programa de correo. El email rendering cambia según el cliente de correo.
Envía una prueba. Mándatela a ti y a un compañero antes de enviarla a toda la lista.
Errores habituales
Saltarse el wireframe. Si la estructura no funciona, ningún color la salva.
Usar texto de relleno. Luego el texto real no cabe o descoloca el diseño.
Diseñar solo para ordenador. El móvil es donde se ve gran parte de las webs y los emails.
Confundirlo con el producto terminado. Que se vea bien no significa que funcione. Pruébalo antes de lanzarlo.
Usar plantillas sin revisar la licencia. Algunas solo permiten uso personal.
Cómo te ayuda Mailrelay
El editor de Mailrelay te permite diseñar tus emails arrastrando bloques sobre plantillas, revisar la vista previa y enviarte una prueba antes de la campaña. Así revisas el diseño completo sin escribir código.
La cuenta gratuita incluye hasta 80.000 emails al mes y 20.000 contactos, con soporte humano por chat, ticket y teléfono.
Envía tus newsletters con Mailrelay
Hasta 80.000 emails al mes y 20.000 contactos gratis, con soporte humano en todos los planes.
Preguntas frecuentes
Estas son las dudas más habituales sobre las maquetas visuales.
¿Qué es un mockup en pocas palabras?
Una imagen realista de cómo quedará un diseño antes de producirlo.
¿Qué diferencia hay entre mockup y wireframe?
El wireframe es un esquema de la estructura, sin colores ni imágenes. La maqueta muestra el aspecto final.
¿Qué diferencia hay entre mockup y prototipo?
El mockup es estático. El prototipo permite hacer clic y navegar para probar cómo se usa.
¿Cómo se dice mockup en español?
Maqueta o boceto visual, aunque en diseño se usa casi siempre el término en inglés.
¿Se puede hacer un mockup gratis?
Sí. Herramientas como Figma, Penpot o Canva tienen planes gratuitos, y hay plantillas de producto sin coste.