Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Ejemplos de correos electrónicos HTML que valen la pena ser abiertos

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Big Smiles and Happy Faces in Web Design
15+ Tools for Building Your Portfolio on the Web

Spanish (Español) translation by Carlos (you can also view the original English article)

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!

Viso - Responsive Email Builder Online
Viso - Correo electrónico responsivo + Creador en línea
Notify - Notification Email Themebuilder Access
Notify - Correo electrónico de notificación + acceso al creador de temas
Market - Responsive Newsletter with Template Builder
Market - Boletín informativo con creador de plantillas
Moka - Responsive Email and Newsletter Template
Moka - Plantilla de correo electrónico y boletín informativo responsivos

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!

Más inspiración:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.