Diseño de correo electrónico 101: Una guía para diseñar correos electrónicos profesionales
Kristina Lauren
1 de agosto de 2021
Ya hemos hablado de Cómo codificar correos electrónicos desde cero y te guió a través de La diferencia entre la codificación de correo electrónico y la codificación web Pero ahora queremos guiarte en el diseño de correos electrónicos. Desde la creación del marco hasta la prueba del producto final, diseñar un correo electrónico es un proceso complejo, así que analicemos algunas de las mejores prácticas.
Empezando
Entonces, quieres diseñar un correo electrónico… pero ¿por dónde empezar? Quizás te preguntes: ¿debería esbozar un diseño, copiar el formato de los correos electrónicos de marcas que admiro o simplemente experimentar con un par de ideas hasta que algo funcione? Claro que parte del proceso de diseño de correos electrónicos consiste en descubrir qué funciona y qué no, pero sin duda ayuda a comprender los principios básicos de marketing de tu marca. Por eso, te conviene empezar con una auditoría de correo electrónico. Este primer paso te ayudará a evaluar las necesidades a largo plazo de tu marca y a definir correctamente los objetivos de tu proyecto. Para ello, necesitarás recopilar correos electrónicos actuales, directrices de marca y otros recursos de marketing, como logotipos y tipografías, para tener una idea más clara de lo que representa esencialmente tu marca visual.
A partir de ahí, podrás crear un sistema de diseño personalizado, que consiste básicamente en un catálogo con todos los elementos gráficos que usarás para diseñar tus correos electrónicos. Este sistema te servirá de base y puede contener muchos elementos de tu auditoría de correo electrónico, desde estilos de fuente hasta colores e iconos.
A medida que conozcas mejor a tu público y tu marca siga creciendo, inevitablemente evolucionará, lo que significa que tus estándares visuales también cambiarán. Pero puedes ahorrarte muchas frustraciones y mantener tu proceso de diseño fluido haciendo que tu sistema sea lo más dinámico posible. Recomendamos usar una herramienta como Figma, que te permite modificar fácilmente tu catálogo cuando necesites realizar cambios de imagen o pequeños ajustes.
Eche un vistazo a un ejemplo de sistema de diseño utilizando Figma:
Wireframes
A continuación, vienen los wireframes, que son esquemas que ofrecen una visión general de la estructura del correo electrónico. Para mayor flexibilidad a la hora de combinar secciones, sugerimos emplear un sistema modular, que permite usar bloques de construcción dinámicos. crear una variedad de plantillas , lo que le permite escalar rápidamente al ofrecer correos electrónicos nuevos utilizando la estructura existente.
Una vez que haya creado algunas maquetas de su correo electrónico a partir del wireframe y el texto/gráfico del marcador de posición, debería tener plantillas listas para usar personalizadas según sus necesidades.
Su wireframe debería verse similar a esto:
Errores comunes al diseñar correos electrónicos
Existe un método detrás de la locura que supone el diseño de correos electrónicos y algunas reglas simplemente no se deben romper.
Aquí hay una lista de algunos errores que vemos a menudo:
-
Correos electrónicos extensos que se cortan en ciertos clientes de correo electrónico (Gmail, te estamos mirando a ti).
-
No es compatible con el modo oscuro.
-
CTA inconsistentes o confusos.
-
Mala capacidad de respuesta móvil (o ninguna en absoluto).
-
Falta de contenido dinámico.
-
Ideas de diseño que no encajan con la marca.
-
Fuentes que son difíciles de leer o no es seguro para correo electrónico .
Algunos de nuestros clientes están acostumbrados a usar editores de arrastrar y soltar para crear sus correos electrónicos, lo cual tiene sus ventajas y desventajas. Por el lado positivo, subir imágenes a un editor de correo electrónico en lugar de usar código permite composiciones sofisticadas. Algunos editores también ofrecen mayor flexibilidad para usar fuentes únicas. Por otro lado, a veces estos correos electrónicos no responden a todos los clientes de correo electrónico. Puede haber problemas con la velocidad de carga de las imágenes, falta de compatibilidad con el modo oscuro, una representación deficiente en dispositivos móviles y, en ocasiones, los correos electrónicos pueden bloquearse por completo en ciertos clientes. Estos editores simplemente no son escalables.
Por eso, el objetivo siempre debe ser crear diseños funcionales que se adapten a las necesidades de tu audiencia, lo que incluye la optimización para diversos dispositivos y clientes de correo electrónico. El resultado es un diseño de correo electrónico profesional, único, escalable y fácil de usar.
Bienvenido al lado oscuro
Sabías El 82,7% de los usuarios prefiere el modo oscuro al modo claro Y por buenas razones: el modo oscuro reduce la fatiga visual, hace que el contenido destaque más y, por lo tanto, facilita la concentración. Teniendo esto en cuenta, debería diseñar una versión oscura complementaria a los correos electrónicos en modo claro y modificar los recursos en el sistema de diseño para garantizar que se visualicen correctamente. Puede ver en los siguientes ejemplos cómo se ve el mismo correo electrónico en modo claro y oscuro:
Lamentablemente, no se puede controlar completamente cómo se mostrará el modo oscuro en cada cliente de correo electrónico, por lo que conviene abordar cualquier problema relacionado con el modo oscuro durante la fase de diseño. Aquí tienes algunas buenas prácticas:
-
Asegúrese de que el texto sea bien legible con un estilo sencillo. fuentes compatibles con correo electrónico .
-
Los colores deben tener un contraste equilibrado: evite los colores saturados.
-
Evite sombras y/o componentes superpuestos.
-
Dar un tratamiento adecuado a todos los elementos gráficos (imágenes con fondos transparentes, iconos y logotipos con trazos finos y blancos, etc.).
-
Asegúrese de que las preferencias para gifs se ajusten correctamente al exportar para que la visualización sea correcta.
Representando su correo electrónico
Finalmente, llegamos a la etapa favorita de todo desarrollador de correo electrónico: las pruebas y el renderizado. Claro que sabes lo importante que es probar cualquier aspecto de tu marca antes de enviarlo a tu público, pero renderizar correos electrónicos es especialmente complejo: ¡un solo diseño puede tener hasta 15 000 posibles renderizados diferentes! La forma en que se visualiza tu correo electrónico depende del dispositivo, el cliente de correo electrónico, el tamaño de la pantalla y las múltiples combinaciones entre estos tres factores.
Vea algunos ejemplos a continuación para ver las diferencias entre dispositivos móviles, la Web y el escritorio.
¿Qué cosas hay que tener en cuenta al representar correos electrónicos?
-
Enlaces incorrectos o no rastreados
-
Errores de ortografía, gramática y puntuación
-
Imágenes rotas o imágenes sin texto alternativo
-
Problemas con las fuentes
-
Compatibilidad con el modo oscuro
-
Capacidad de respuesta en todos los tamaños de pantalla
-
Problemas de formato entre secciones
Errores aparentemente pequeños en los correos electrónicos pueden comprometer la confianza del público en una marca, especialmente si estos problemas son constantes. Lo último que quieres que tu público piense es: "Si no pueden escribir bien un simple correo electrónico, ¿debería realmente confiar en su producto o servicio?".
El traspaso
Cuando llega el momento de enviar tu correo electrónico a tus desarrolladores o de codificarlo tú mismo, Figma también simplifica enormemente el proceso de entrega. Esto se debe a que Figma permite que tu diseño siempre se transmita de forma consistente y, como resultado, puedas codificar componentes totalmente reutilizables, ahorrándote mucho tiempo.
Figma también tiene una función de diseño automático que controla elementos como el relleno y el espaciado y crea un diseño más responsivo, especialmente porque puede traducir estos elementos en código y exportar activos exactos en cualquier formato que necesite.
Al diseñar, hay muchos aspectos a considerar durante todo el proceso creativo. Entre recopilar información para iniciar un proyecto, crear diseños, introducir contenido y asegurarse de que se muestre correctamente, es fácil equivocarse, pero ahora deberías comprender bien qué hacer y qué no hacer en el diseño de correos electrónicos.
Sin embargo, dado que diseñar y crear correos electrónicos es nuestra actividad diaria en Scalero, nuestros diseñadores y desarrolladores son expertos en el proceso. Si busca más orientación o ayuda para crear sus propias plantillas de correo electrónico dinámicas, Envíanos un mensaje o regístrate para el Aplicación de tiramisú ¡Para empezar!
