Esta semana he estado diseñando correos electrónicos, por lo que es comprensible que haya estado prestando más atención al diseño de los emails que encuentro. Con tantos de donde inspirarse, aquí tienes algunos ejemplos de diseños que creo que hacen su trabajo de manera adecuada.

Estilo

Mi gusto personal significa que los diseños con abundante espacio seguirán regresando en este resumen de inspiración, aquí está Death to Stock utilizando la fuente Courier, colores simples y acres de espacio en blanco:

Más tipografía monoespaciada aquí, de notanotherbill.com. Sin refinar, se remonta a los días de las máquinas de escribir, la pólvora y el aceite para la barba de los caballeros:

Eventbrite sabe cómo utilizar el color y el espacio en blanco; esta es la versión de uno de sus boletines de noticias:

Otro espacioso correo electrónico de Wistia, que atrae la atención a una sola entrada del blog. También tiene un GIF animado, para un mayor énfasis. Mi única crítica podría ser la incómoda línea que se rompe en pantallas angostas:

Llamadas a la acción claras

Las campañas de correo electrónico normalmente tienen una tasa de apertura del 20%, y solamente se hace clic en un dos o tres por ciento. Por tal motivo, es primordial concentrarse en esos llamados a la acción; eliminar el desorden, ir al grano y asegurarse de que los usuarios sepan qué acción se espera de ellos.

Este correo electrónico promocional de Typecast, tiene únicamente dos o tres elementos sobre los que se puede hacer clic, además de un copy claro, orienta al usuario de forma extremadamente efectiva:

Apple no se arriesga a que las cuentas de los miembros expiren; esta llamada a la acción demanda atención:

Compilación

Lograr que los usuarios vean los correos electrónicos es difícil, así que convencerlos de que se tomen el tiempo necesario para leer el contenido es un verdadero desafío. Me encantan los boletines de themoderndesk.com por su presentación consistente, las imágenes impecables y las viñetas que me permiten saber qué esperar del correo electrónico:

The New York Times Magazine de forma valiente pone su columna editorial al frente y en el centro; si no estás aquí por el contenido, te puedes ir.

Color

Sé atrevido, sé audaz, sé colorido (si la ocasión lo requiere). Las miniaturas generosas, los cuadros blancos nítidos para el texto, junto con un amarillo llamativo para equilibrar las imágenes, funcionan muy bien para Bezar (ahora AHAlife) «el mercado de objetos creativos e inspiradores».

MailChimp hace un excelente trabajo con todos sus correos electrónicos, aquí hay un colorido recordatorio de sus herramientas de prueba A/B:

Colores contrastantes, ángulos duros, algunas texturas más bien confrontadas y tipografía en negrita. Es lo menos que esperarías del Museo del Diseño de Londres, coincidiendo perfectamente con su marca y su sitio web.

Hemos mencionado Spotify y sus coloridos diseños en el pasado, y lo mismo sucede con su marketing directo. Aquí hay uno de hace un mes o dos. Utiliza texto basado en imágenes para el mensaje principal, por tanto, no es exactamente accesible (y no estoy seguro de dónde optar por una versión basada en texto) pero la estética es ganadora:

Plantillas para correo electrónico en Envato Market

Siempre vale la pena concluir con algunos ejemplos que puedes obtener a través de Envato Market. ¡Aquí hay algunas plantillas para correo electrónico para disfrutar!

Lecturas adicionales

Ahora que te has inspirado, revisa estos tutoriales de algunas de las mentes más destacadas del correo electrónico HTML en el negocio, ¡y luego empieza a diseñar el tuyo!

• Lo que deberías saber acerca del correo electrónico HTML
• Crea una plantilla para correo electrónico HTML desde cero
• Usando Grunt para que el flujo de trabajo del diseño de tus correos electrónicos sea divertido nuevamente
• Creando un correo electrónico responsivo preparado para el futuro sin media queries
• Cómo usar las plantillas para correo electrónico de Campaign Monitor

Más inspiración:

• reallygoodemails.com (y en CodePen @eallygoodemails)
• Inspiración de Mailchimp
• Blog de Litmus
• A Type of Email (libro electrónico)
• #emaildesign en Twitter
• #emaildesign en Twitter
• MailChimp para diseñadores