{"id":59958,"date":"2022-10-26T14:58:57","date_gmt":"2022-10-26T14:58:57","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/mockup\/"},"modified":"2026-10-07T10:22:00","modified_gmt":"2026-10-07T10:22:00","slug":"mockup","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/es\/glosario\/mockup\/","title":{"rendered":"Mockup"},"content":{"rendered":"\n

Un mockup es una representaci\u00f3n visual realista de c\u00f3mo quedar\u00e1 un dise\u00f1o antes de producirlo: una web, una app, un envase, una camiseta o un email.<\/strong> Muestra colores, tipograf\u00edas, im\u00e1genes y textos, pero todav\u00eda no funciona.<\/p>\n\n\n\n

Sirve para ver el resultado, ense\u00f1arlo y corregirlo cuando cambiar algo a\u00fan cuesta poco.<\/p>\n\n\n\n

\u00bfQu\u00e9 significa mockup?<\/h2>\n\n\n\n

En ingl\u00e9s, mock-up<\/em> es una maqueta o modelo a escala. En dise\u00f1o se traduce como maqueta<\/strong> o boceto visual<\/strong>, aunque en espa\u00f1ol se usa casi siempre la palabra original.<\/p>\n\n\n\n

Esta maqueta responde a una pregunta: \u00ab\u00bfc\u00f3mo se ver\u00e1 esto cuando est\u00e9 terminado?\u00bb.<\/p>\n\n\n\n

\u00bfPara qu\u00e9 sirve un mockup?<\/h2>\n\n\n\n

Para decidir antes de producir.<\/strong> Es m\u00e1s barato cambiar un color en un dise\u00f1o que reimprimir mil cajas o reprogramar una web.<\/p>\n\n\n\n

Para presentar una idea.<\/strong> El cliente o el equipo ven algo parecido al resultado final, no una descripci\u00f3n.<\/p>\n\n\n\n

Para detectar errores.<\/strong> Textos que no caben, contrastes pobres o elementos que se pierden.<\/p>\n\n\n\n

Para vender antes de fabricar.<\/strong> Muchas tiendas muestran el producto con una maqueta mientras preparan la producci\u00f3n.<\/p>\n\n\n\n

Para coordinar al equipo.<\/strong> Dise\u00f1o, desarrollo y marketing trabajan sobre la misma referencia.<\/p>\n\n\n\n

Mockup, wireframe y prototipo: diferencias<\/h2>\n\n\n\n
<\/th>Wireframe<\/th>Mockup<\/th>Prototipo<\/th><\/tr><\/thead>
Qu\u00e9 es<\/td>Esquema de la estructura<\/td>Dise\u00f1o visual est\u00e1tico<\/td>Versi\u00f3n interactiva<\/td><\/tr>
Nivel de detalle<\/td>Bajo: cajas y l\u00edneas<\/td>Alto: colores, fuentes, im\u00e1genes<\/td>Alto y con navegaci\u00f3n<\/td><\/tr>
\u00bfSe puede usar?<\/td>No<\/td>No<\/td>S\u00ed, de forma simulada<\/td><\/tr>
Para qu\u00e9 sirve<\/td>Ordenar el contenido<\/td>Ver c\u00f3mo quedar\u00e1<\/td>Probar c\u00f3mo se usa<\/td><\/tr>
Momento<\/td>Al principio<\/td>Despu\u00e9s del wireframe<\/td>Antes de desarrollar<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Lo habitual es pasar por las tres fases: primero la estructura, luego el aspecto y despu\u00e9s la interacci\u00f3n.<\/p>\n\n\n\n

\"Infograf\u00eda<\/figure>\n\n\n\n

Tipos de mockup<\/h2>\n\n\n\n

Web.<\/strong> Las p\u00e1ginas de una web con su dise\u00f1o final: cabecera, men\u00fa, textos, im\u00e1genes y botones.<\/p>\n\n\n\n

App.<\/strong> Las pantallas de una aplicaci\u00f3n para m\u00f3vil o tableta, a menudo dentro de la imagen de un tel\u00e9fono.<\/p>\n\n\n\n

Producto.<\/strong> El dise\u00f1o aplicado sobre un objeto: camisetas, tazas, cajas, botellas o bolsas.<\/p>\n\n\n\n

Branding.<\/strong> El logotipo<\/a> y la identidad de una marca sobre tarjetas, papeler\u00eda, r\u00f3tulos o uniformes.<\/p>\n\n\n\n

Publicidad.<\/strong> Carteles, vallas, anuncios en redes o en prensa tal como se ver\u00edan en su sitio.<\/p>\n\n\n\n

Email.<\/strong> Una newsletter o un email comercial antes de enviarlo, en versi\u00f3n de ordenador y de m\u00f3vil.<\/p>\n\n\n\n

C\u00f3mo hacer un mockup en 6 pasos<\/h2>\n\n\n\n

1. Define el objetivo.<\/strong> Qu\u00e9 quieres mostrar y a qui\u00e9n: un cliente, tu equipo o tus compradores.<\/p>\n\n\n\n

2. Parte de un wireframe o un boceto.<\/strong> Ordena primero el contenido y luego decide el aspecto.<\/p>\n\n\n\n

3. Aplica la identidad visual.<\/strong> Colores, tipograf\u00eda<\/a>, logotipo e im\u00e1genes de tu marca.<\/p>\n\n\n\n

4. Usa contenido real.<\/strong> Textos e im\u00e1genes definitivos, o lo m\u00e1s parecidos posible. El texto de relleno esconde problemas de espacio.<\/p>\n\n\n\n

5. Mu\u00e9stralo en contexto.<\/strong> Una web dentro de una pantalla, un envase en una estanter\u00eda, un email en un m\u00f3vil.<\/p>\n\n\n\n

6. Pide opini\u00f3n y corrige.<\/strong> Ens\u00e9\u00f1alo a quien tiene que aprobarlo y a alguien que represente a tu cliente.<\/p>\n\n\n\n

\n

Dise\u00f1a tus emails sin c\u00f3digo<\/strong><\/p>\n\n\n\n

Elige una plantilla en Mailrelay, ad\u00e1ptala a tu marca con el editor de arrastrar y soltar y env\u00edate una prueba.<\/p>\n\n\n\n

\n
Crear cuenta gratis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Herramientas para crear mockups<\/h2>\n\n\n\n
Herramienta<\/th>Para qu\u00e9 destaca<\/th>Precio<\/th><\/tr><\/thead>
Figma<\/td>Dise\u00f1o web y de apps, trabajo en equipo<\/td>Plan gratuito y planes de pago<\/td><\/tr>
Penpot<\/td>Alternativa de c\u00f3digo abierto a Figma<\/td>Gratis<\/td><\/tr>
Balsamiq<\/td>Wireframes y maquetas r\u00e1pidas de baja fidelidad<\/td>De pago, con prueba<\/td><\/tr>
Canva<\/td>Maquetas de producto y redes con plantillas<\/td>Plan gratuito y planes de pago<\/td><\/tr>
Photoshop<\/td>Maquetas de producto realistas con capas<\/td>De pago<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Para un dise\u00f1o de producto, muchas plantillas gratuitas permiten colocar tu dise\u00f1o sobre una foto con un par de clics. Revisa siempre la licencia antes de usarlas en publicidad.<\/p>\n\n\n\n

El mockup en el email marketing<\/h2>\n\n\n\n

Antes de enviar una campa\u00f1a conviene verla como la ver\u00e1 el suscriptor:<\/p>\n\n\n\n

Dise\u00f1a sobre una plantilla.<\/strong> Las plantillas de email marketing<\/a> son, en la pr\u00e1ctica, maquetas listas para adaptar a tu marca.<\/p>\n\n\n\n

Revisa la versi\u00f3n m\u00f3vil.<\/strong> Gran parte de los emails se abren en el tel\u00e9fono. Un dise\u00f1o responsive<\/a> evita textos diminutos y botones imposibles de pulsar.<\/p>\n\n\n\n

Comprueba c\u00f3mo se ve en cada programa de correo.<\/strong> El email rendering<\/a> cambia seg\u00fan el cliente de correo.<\/p>\n\n\n\n

Env\u00eda una prueba.<\/strong> M\u00e1ndatela a ti y a un compa\u00f1ero antes de enviarla a toda la lista.<\/p>\n\n\n\n

\"Infograf\u00eda<\/figure>\n\n\n\n

Errores habituales<\/h2>\n\n\n\n

Saltarse el wireframe.<\/strong> Si la estructura no funciona, ning\u00fan color la salva.<\/p>\n\n\n\n

Usar texto de relleno.<\/strong> Luego el texto real no cabe o descoloca el dise\u00f1o.<\/p>\n\n\n\n

Dise\u00f1ar solo para ordenador.<\/strong> El m\u00f3vil es donde se ve gran parte de las webs y los emails.<\/p>\n\n\n\n

Confundirlo con el producto terminado.<\/strong> Que se vea bien no significa que funcione. Pru\u00e9balo antes de lanzarlo.<\/p>\n\n\n\n

Usar plantillas sin revisar la licencia.<\/strong> Algunas solo permiten uso personal.<\/p>\n\n\n\n

C\u00f3mo te ayuda Mailrelay<\/h2>\n\n\n\n

El editor de Mailrelay te permite dise\u00f1ar tus emails arrastrando bloques sobre plantillas, revisar la vista previa y enviarte una prueba antes de la campa\u00f1a. As\u00ed revisas el dise\u00f1o completo sin escribir c\u00f3digo.<\/p>\n\n\n\n

La cuenta gratuita incluye hasta 80.000 emails al mes y 20.000 contactos, con soporte humano por chat, ticket y tel\u00e9fono.<\/p>\n\n\n\n

\n

Env\u00eda tus newsletters con Mailrelay<\/strong><\/p>\n\n\n\n

Hasta 80.000 emails al mes y 20.000 contactos gratis, con soporte humano en todos los planes.<\/p>\n\n\n\n

\n
Probar Mailrelay gratis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Preguntas frecuentes<\/h2>\n\n\n\n

Estas son las dudas m\u00e1s habituales sobre las maquetas visuales.<\/p>\n\n\n\n

\u00bfQu\u00e9 es un mockup en pocas palabras?<\/h3>\n\n\n\n

Una imagen realista de c\u00f3mo quedar\u00e1 un dise\u00f1o antes de producirlo.<\/p>\n\n\n\n

\u00bfQu\u00e9 diferencia hay entre mockup y wireframe?<\/h3>\n\n\n\n

El wireframe es un esquema de la estructura, sin colores ni im\u00e1genes. La maqueta muestra el aspecto final.<\/p>\n\n\n\n

\u00bfQu\u00e9 diferencia hay entre mockup y prototipo?<\/h3>\n\n\n\n

El mockup es est\u00e1tico. El prototipo permite hacer clic y navegar para probar c\u00f3mo se usa.<\/p>\n\n\n\n

\u00bfC\u00f3mo se dice mockup en espa\u00f1ol?<\/h3>\n\n\n\n

Maqueta o boceto visual, aunque en dise\u00f1o se usa casi siempre el t\u00e9rmino en ingl\u00e9s.<\/p>\n\n\n\n

\u00bfSe puede hacer un mockup gratis?<\/h3>\n\n\n\n

S\u00ed. Herramientas como Figma, Penpot o Canva tienen planes gratuitos, y hay plantillas de producto sin coste.<\/p>\n\n\n\n

Entradas relacionadas<\/h2>\n\n\n\n