Formato nuevo
Diseño de email: jerarquía y estilo
El diseño de email no es «hacerlo bonito» — es dejar claro en segundos: quién escribe, para qué existe el email y qué pulsar.
Abajo: errores habituales, estructura, jerarquía, trabajo con imágenes y un estilo unificado de serie. Cómo se renderiza en clientes de correo está en el texto de maquetación HTML.
Errores típicos
El email «repela» pero no se entiende por qué; la intención del diseñador no se lee; no hay estilo de serie; el remitente es invisible; ritmo caótico de bloques; texto minúsculo; sin CTA claro.
Primero corta ruido y restaura jerarquía — a menudo no hace falta «magia».
Estructura, jerarquía, imágenes
Grid modular: header de marca → oferta/lead → prueba → CTA → footer con baja. Pon lo importante pronto, antes de un scroll largo.
Jerarquía visual: tamaño, contraste, spacing. Agrupa elementos relacionados (proximidad), separa secciones con aire.
Imágenes en una misma clave: luz, crop, pies. No pongas todo el sentido solo en la imagen — algunos clientes no la mostrarán.
Checklist visual rápido:
- remitente/logo reconocible
- una idea principal
- un botón principal
- contraste de texto suficiente
- el estilo encaja con emails anteriores
Estilo de serie y chequeo final
Fija tokens: colores, botones, fuentes, spacing de módulos. Arma emails nuevos con los mismos bloques — más rápido, y la marca se sostiene.
Antes de enviar: preheader, vista móvil, alt, enlaces, baja, encaje con el copy de la oferta.
FAQ
¿Qué ancho de email usar?
Una guía habitual de columna desktop es unos 600px. En móvil importan más una columna y botones grandes que «meter tres».
¿Cuántas columnas debe tener un email?
En móvil una es más segura. Dos — solo con un stack responsive.
¿Por qué un estilo unificado de serie?
Reconocimiento de marca y confianza. Cada email «de otro planeta» baja el reconocimiento del remitente.
¿Dónde poner la oferta principal?
Arriba en el email: preheader, primer pantallazo, CTA antes de un scroll largo.
¿Mucha decoración es buena en email?
No. Líneas de más, fotos de relleno y texto minúsculo hieren la jerarquía.
¿Usar fuentes de marca en email?
Sí con web fonts y un fallback de sistema. La legibilidad gana a la tipografía exótica.
¿En qué se diferencia el diseño de la maquetación?
Diseño es composición y sentido. Maquetación es HTML/CSS para que no se caiga en Outlook.
¿Email bonito — pero la oferta y el CTA siguen perdiéndose?
Arreglamos jerarquía, estilo de serie y oferta above-the-fold para que el diseño ayude al CTR en lugar de pelear con la bandeja.
Hablar del proyecto