El email de marketing promedio recibe clics del 6.81% de las personas que lo abren (MailerLite). O sea, de cada 100 lectores con suficiente interés para abrirlo, 93 hacen scroll, le echan un vistazo y lo cierran.
La mayoría de esos emails se parecen: un hero de stock, un botón centrado de “Comprar ahora”, un footer copiado de la campaña anterior. Nada está roto, pero tampoco hay nada que valga un tap.
Esta guía de buenas prácticas de diseño de email te muestra cómo hacer que tu email realmente destaque. Vamos bloque por bloque, del hero al footer, con ejemplos pensados para las fechas que más mueven el inbox en LATAM, como el Buen Fin y el CyberMonday.
Por qué la mayoría de los emails se ven iguales
Revisa cualquier galería de inspiración de diseño de email y verás que los mejores ejemplos comparten 1 cosa: cada bloque se diseñó para ese email en particular. La mayor parte del tráfico del inbox funciona al revés, por 3 razones.
- El HTML de email es difícil de construir. El email todavía funciona con layouts basados en tablas y estilos inline, y un diseño que se ve bien en Gmail puede desarmarse en Outlook. Así que cualquier cosa más allá de la plantilla por defecto implica un developer y una ronda de pruebas. La mayoría de los equipos toma el layout de siempre, cambia el logo y lo manda.
- Visuales de stock. La imagen del hero se elige para que sirva en cualquier campaña, y por eso no sirve en ninguna. Es lo primero que ve el lector, y no le dice nada sobre la oferta.
- Sin sistema de diseño. No hay un lugar único para los colores de marca, las fuentes y el footer, así que cada campaña se estiliza a mano. A los pocos meses, no hay 2 emails que se vean del todo iguales.
El costo de estos errores aparece después de la apertura. El asunto hizo su trabajo y el lector abrió el email. Después lo cerró sin hacer clic, porque se veía como cualquier otro email del inbox y nada le llamó la atención. En temporada de Buen Fin o CyberMonday, cuando tu email compite con decenas de promos el mismo día, ese efecto se multiplica.
¿Cómo haces que tu email realmente destaque?
La respuesta corta: mejor diseño. La larga: ajustar cada bloque del email para que se vea relevante y personal para el lector, y le dé una razón real para hacer clic y hacer lo que necesitas, ya sea comprar, reservar o volver a la app.
Y no, eso no significa que un developer o diseñador tenga que reescribir el HTML de cada email.
Ahora sí, vamos bloque por bloque: cómo mejorar cada parte del email para conseguir más clics.
Buenas prácticas de diseño de email, bloque por bloque
Este es el email que vamos a desarmar: una venta flash de una app de equipo para correr, 48 horas, 25% de descuento en tenis de trail, armada en el editor drag-and-drop de Pushwoosh. Es el tipo de oferta corta que funciona igual de bien en el Buen Fin en México que en el CyberMonday en Chile, Argentina o Colombia.
El email se divide en 5 bloques. Esto es lo que hace que cada uno destaque y lo que cambia para el lector.
| Bloque | Cómo destacar | Efecto |
|---|---|---|
| Header | Un header compacto sobre 1 sistema de marca: Brand book con Derive brand, guardado como bloque sincronizado | Reconocimiento inmediato, el mismo look en cada email |
| Hero | Un visual construido alrededor de la oferta con Generate with AI, con el titular como texto vivo | El lector entiende la oferta a primera vista |
| Copy y CTA | Un titular escrito para 1 lector con merge tags y Liquid, y 1 botón de texto vivo con estilo | Relevancia y 1 siguiente paso claro |
| Contenido | Grillas de productos desde el catálogo en vivo, secciones por audiencia con condiciones de visualización, una cuenta regresiva con el Timer block | Más clics en productos, la oferta correcta para cada lector, urgencia para actuar ya |
| Footer | 1 footer guardado como bloque sincronizado, revisado por Smart check | Los datos legales quedan correctos en cada email |
Abajo abrimos cada bloque a través de sus prácticas, de arriba hacia abajo del email: por qué funciona cada práctica y cómo implementarla en Pushwoosh.
La parte superior del email: header y hero
#1. Arma el header sobre tu sistema de marca
Por qué funciona: el header abre cada email. Cuando el logo, los colores y las fuentes se ven iguales cada vez, los lectores reconocen al remitente de un vistazo, y cada bloque de abajo hereda el mismo look.
En lugar de: colores copiados del último email y un layout de header nuevo en cada campaña → prueba: 1 sistema de marca y un header compacto (logo más 2 o 3 links), idéntico en cada email.
En Pushwoosh: configura el Brand book: logo, colores, fuentes, valores por defecto de los bloques y voz de marca. No tienes que llenarlo a mano: Derive brand escanea tu sitio web, un PDF de manual de marca o tu logo, y te propone la paleta, las fuentes y el tono. Apply brand book styles repinta cualquier plantilla, incluidas las más viejas, sin tocar el contenido.
Después arma el header con tu logo y un Menu block, y guárdalo como bloque reutilizable con Keep copies in sync activado, así un link nuevo del menú (por ejemplo, la sección de ofertas del Buen Fin) aparece en todos los emails a la vez. El footer funciona igual (ver la práctica 8).
#2. Construye el hero alrededor de la oferta, no de una foto de stock
Por qué funciona: el hero es lo que ve el lector antes de decidir si hace scroll. Si muestra la oferta, entiende el punto en 1 vistazo.
En lugar de: un corredor sonriente sacado de un banco de imágenes → prueba: los tenis de trail que están en oferta, con “25% de descuento en tenis de trail. Solo 48 horas.” como texto vivo encima.
En Pushwoosh: en el Image block, Generate with AI crea el visual a partir de un prompt (“tenis de trail running en un sendero de bosque mojado, luz cálida de la tarde”) en formato de banner 16:9. Colócalo como fondo de un Card block, y el titular y el botón siguen siendo texto vivo: se muestran aunque las imágenes estén bloqueadas, y los lectores de pantalla pueden leerlos.
El cuerpo: copy, CTA y contenido
#3. Escribe un titular personalizado para cada lector
Por qué funciona: un titular que nombra algo que el lector reconoce (su nombre, su talla, la categoría que estuvo viendo) se lee como un mensaje para él, no como un envío masivo.
En lugar de: “Descubre nuestra nueva colección” → prueba: “Sofía, tu talla de trail volvió a estar disponible.”
En Pushwoosh: inserta el nombre como merge tag desde la barra del Heading block y define un valor por defecto, como “Runner”, para los lectores sin nombre registrado. Para una línea distinta según el idioma o el país (por ejemplo, el precio en pesos mexicanos para México y en pesos colombianos para Colombia), usa plantillas Liquid.
#4. Dale a cada email 1 CTA que destaque con claridad
Por qué funciona: cada botón extra divide la atención. 1 CTA principal en un color de contraste le dice al lector qué hacer después, y en el teléfono necesita un área táctil de al menos 44×44 pt, según las Human Interface Guidelines de Apple.
En lugar de: 3 botones iguales (“Comprar ahora”, “Ver más”, “Ver todo”), o un botón metido dentro de una imagen → prueba: 1 botón de texto vivo, “Encontrar mi talla”, en tu color de acento.
En Pushwoosh: dale estilo al Button block con fondo sólido o degradado, radio de esquinas y padding, y define un padding móvil más grande para que el botón siga siendo del tamaño de un pulgar.
#5. Llena las grillas de productos con datos en vivo
Por qué funciona: los productos agotados y los precios desactualizados cuestan clics y confianza. En una venta de 48 horas, el stock cambia en cuestión de horas.
En lugar de: 6 tenis copiados en la plantilla el lunes, 2 de ellos agotados para el jueves → prueba: una grilla de tenis de trail basada en lo que vio cada lector, tomada del catálogo en vivo.
En Pushwoosh: el Products block llena los productos por regla de catálogo, desde el carrito abandonado del destinatario, o con una estrategia de recomendación como más vendidos, de vuelta en stock o basados en lo que vio. El feed de tu Product catalog se sincroniza cada hora, así los precios y el stock se mantienen al día sin que nadie edite el email.
Para apps de medios y contenido, el News block hace lo mismo con artículos de tus feeds, con intros escritas por IA debajo de cada titular.
#6. Dale a cada audiencia su propia sección
Por qué funciona: un cliente fiel y uno que no compra hace 3 meses necesitan razones distintas para hacer clic.
En lugar de: el mismo mensaje de “nueva colección” para todos → prueba: 1 sección con 3 variantes: acceso anticipado a la venta para los miembros del programa de lealtad, 25% de descuento para quien lleva 90+ días inactivo, y novedades para todos los demás.
En Pushwoosh: agrega una condición de visualización a cada variante, basada en Tags o en una expresión Liquid, y encadénalas con IF / ELSE IF / ELSE. 1 campaña para armar y probar, 3 emails distintos en el inbox.
#7. Haz concreta la urgencia con una cuenta regresiva
Por qué funciona: “pronto” es abstracto. Un plazo visible convierte el “tal vez después” en una decisión que el lector tiene que tomar ahora.
En lugar de: “¡La oferta termina pronto!” en el asunto, el titular y el botón → prueba: una cuenta regresiva hasta el cierre real de la venta de 48 horas, justo al lado del CTA.
En Pushwoosh: agrega el Timer block, define la fecha, la hora y la zona horaria de cierre, y estiliza los dígitos con los colores de marca. Si mandas la misma venta a varios países, fija la zona horaria con la que termina la oferta, para que nadie vea el reloj en cero antes de tiempo. ¿La oferta se canjea en tienda física? El Barcode block genera un código escaneable para cada destinatario.
La parte inferior: footer
#8. Arma el footer una vez y mantenlo sincronizado en todos lados
Por qué funciona: el footer lleva el link para darse de baja, la dirección postal y el texto legal. Tiene que estar correcto en cada email.
En lugar de: un footer copiado de campaña en campaña hasta que hay 2 versiones del texto legal → prueba: 1 footer, actualizado en 1 solo lugar.
En Pushwoosh: arma 1 footer con los estilos de marca, el link para darse de baja, la dirección postal y los links a redes sociales, y guárdalo como bloque reutilizable con Keep copies in sync activado. Edita la dirección una vez, y cada email que usa ese footer se actualiza, incluso los que ya están programados para enviarse.
Tip: Smart check marca un email de marketing que no tiene dirección postal en el footer, y te avisa cuando un email supera el límite de recorte de Gmail de ~102 KB, donde el footer es lo primero que se corta.
Acelera el diseño de email con herramientas de IA
Un email que destaca no tiene por qué tomar una semana. Estas herramientas de IA (ojo: disponibles para todos los usuarios de Pushwoosh) recortan el tiempo de producción y ayudan a mejorar el diseño. Justo lo que necesitas cuando tienes que sacar varias campañas para la misma temporada.
Asistente de IA
Describe el email en la AI tab, y el asistente te arma un email completo.
Imágenes y alt text con IA
Generate with AI crea un visual a partir de un prompt de texto, directo en el Image block. Generate alt with AI escribe el alt text a partir de la imagen misma.
Asuntos y preheaders con IA
Una vez armado el contenido, 1 clic redacta un asunto y un preheader a partir de lo que realmente hay en el email.
Traducción automática
Las versiones de idioma que faltan las completa la IA, en lugar de escribir cada idioma a mano. Útil si mandas la misma campaña en español y en portugués para Brasil.
Brand book y bloques sincronizados
Los estilos, el header y el footer de las prácticas 1 y 8 hacen que nadie tenga que rehacer lo básico para una campaña nueva.
Arma tu 1er email que destaca
-
Empieza desde una plantilla o un prompt.
Un layout de la biblioteca de plantillas de email, o un primer borrador del asistente de IA.
-
Aplica tu brand book.
Estilos de marca y un header sincronizado: práctica 1.
-
Recorre el email de arriba hacia abajo.
Hero, titular, CTA, productos, secciones por audiencia, cuenta regresiva, footer.
-
Diseña la versión móvil.
No dejes que el layout de escritorio simplemente se encoja en el teléfono, sobre todo en una región donde Android domina el mercado móvil. Cambia a la vista móvil, que es totalmente editable al ancho real de un teléfono, y elige Stack, Keep row o Reverse para cada fila de Columns. Define tamaños de fuente, padding y geometría de imágenes específicos para móvil, y usa Hide on mobile o Hide on desktop para los bloques que solo tienen sentido en 1 pantalla. Eso es diseño de email responsive sin escribir una sola media query.
-
Prueba.
Corre Smart check y después manda un email de prueba a hasta 50 direcciones.
-
Envía y después lee el click map.
La Click map tab dibuja un mapa de calor sobre la vista previa del email, así ves qué elementos se llevaron los clics y si el nuevo hero cumplió su función.
Preguntas frecuentes
Artículos relacionados
Ver todo
