La creación de un diseño es el primer paso para la plantilla de un correo electrónico HTLM. Hoy en Comunicare te enseñaremos algunos consejos sobre cómo diseñar PSD para una campaña de correo electrónico.
Índice de contenidos
Preparativos preliminares
Todo comienza con la comprensión del tipo de correo electrónico HTML que se enviará. Todos los tipos de correos electrónicos se pueden segmentar en 2 amplias categorías: a) Boletín de correo electrónico b) Correo electrónico promocional de productos / servicios.
Mientras que los correos electrónicos promocionales se basan en imágenes acompañadas de una breve descripción, los boletines informativos por correo electrónico tienen mucho texto y la inclusión de imágenes es opcional.
Antes de seguir adelante con sus diseños conceptualizados, es importante determinar si sus correos electrónicos serán de ancho fijo o receptivos. Según su elección, el diseño de correo electrónico receptivo tendrá un diseño de escritorio y un diseño móvil separados, mientras que el ancho fijo tendrá solo un diseño de escritorio.
Una de las mejores prácticas en el diseño de plantillas de correo electrónico es tener un ancho máximo de plantilla de 800px o 600px. Para el diseño móvil, el ancho se reducirá a ~ 320px. Para evitar cualquier recorte o desalineación del contenido de tu correo electrónico, es importante proporcionar un relleno en ambos lados. Por lo tanto, debes ajustar tu contenido dentro del límite de 500 px para el diseño de escritorio y 300 px para el diseño móvil. Algo muy útil a la hora de diseñar una campaña PSD de correo electrónico.
Esqueleto básico: cómo crear un diseño de correo electrónico HTML
Cualquier correo electrónico tiene 3 secciones principales:
Encabezado
aunque tus suscriptores abrirán el correo electrónico reconociendo el nombre del remitente y la línea de asunto, es importante tener un elemento de marca en el encabezado para aquellos que son nuevos en sus correos electrónicos.
Debido a problemas de compatibilidad con diferentes clientes de correo electrónico, tu correo electrónico debe tener una opción para ver el correo electrónico en línea que sea claramente visible.
Algunos clientes de correo electrónico, como el correo de Apple, Gmail y los clientes de correo electrónico nativos, obtienen los primeros caracteres de su correo electrónico como texto de vista previa. Mientras diseñas tu plantilla, el encabezado puede tener un texto de vista previa que se puede mantener oculto mientras se codifica para evitar que los suscriptores vuelvan a leer el texto una vez que abren el correo electrónico. Si tienes un menú de navegación, el encabezado es el mejor lugar para ubicarlo.
Cuerpo
Una vez que tu suscriptor abre un correo electrónico, el primer vistazo es decisivo si avanzará más o eliminará (o cancelará la suscripción si es usuario de iOS 10) el correo electrónico. Por lo tanto, la información más importante debe proporcionarse dentro de los 250-400 px superiores (denominados: Arriba del pliegue) según el ancho de la pantalla del dispositivo. Puede ser una rica imagen de héroe, una pancarta o incluso simples saludos.
Aunque muchos pueden argumentar en contra, la colocación de CTA en la mitad superior da como resultado un aumento de las tasas de clics en los correos electrónicos de presentación de productos / servicios. Independientemente de la ubicación, el botón de llamada a la acción debe estar bien resaltado y se puede hacer clic con el pulgar.
Tips
Dependiendo del mensaje a transmitir, si se van a incluir imágenes, asegúrate de utilizar imágenes de buena resolución. Si los usuarios de Apple dominan tu lista de suscriptores, asegúrese de que las imágenes utilizadas sean compatibles con la pantalla Retina. Algo muy útil a la hora de diseñar una campaña PSD de correo electrónico.
Además, asegúrate de que la relación texto-imagen se base en las mejores prácticas seguidas en el dominio de su industria. Para los correos electrónicos con imágenes pesadas, se pueden mostrar varias imágenes utilizando elementos interactivos como el banner giratorio o el control deslizante y proporcionar respaldo en formato GIF.
Basado en el patrón de movimiento de los ojos, el diseño del contenido también juega un papel en el procesamiento de la información. Hay diferentes diseños para mostrar su contenido y facilitar la escalabilidad. (haga clic en cada diseño para una fácil visualización).
- Sección de flip-flop
- Dos / Tres / Cuatro columnas
- Secciones completas
- Secuencia
- Miniatura con texto
- Sección de testimonios
Diseñar para formato móvil
- Tenga en cuenta la secuencia al hacer un diseño único. Dado que las secciones se organizan en una sola columna, asegúrate de que el flujo de información coincida con el visualizado para el diseño del escritorio. Dado que la mayoría de los usuarios de correo electrónico leen de izquierda a derecha, la sección de la izquierda debe organizarse en la parte superior de la columna derecha cuando se alinea en una sola columna. Para facilitar las manipulaciones, se sugiere que cada sección se pueda convertir en una capa / capa agrupada
- Uno de los PVU de los correos electrónicos receptivos es que la imagen cambia de tamaño según el ancho de la pantalla. Si hay texto dentro de tu imagen, se encogerá para volverse ilegible. En tal escenario, el texto y la imagen deben dividirse y organizarse en consecuencia.
- En caso de que tenga navegaciones en su correo electrónico, puede ubicarse dentro de un menú desplegable.
El correo electrónico de Saks Fifth Avenue tiene la navegación oculta en la parte inferior del correo electrónico, lo que también es adecuado si desea evitar el desorden de información en el pliegue anterior.
Pie de página
un pie de página de correo electrónico contiene principalmente la conclusión del mensaje transmitido en el cuerpo seguido de firmas de correo electrónico. Puedes agregar tu firma junto con los botones sociales para que los suscriptores se conecten contigo a través de las redes sociales. Además, el pie de página puede ser un buen lugar para compartir los derechos de autor, los términos y condiciones o la información de exención de responsabilidad necesaria para fines legales.
Antes de que pueda terminar, hay una cosa más que agregar a tu pie de página. La ley CAN-SPAM 2003 dicta que un correo electrónico enviado a la lista de correo debe tener un enlace o un botón que permita al lector darse de baja libremente junto con la dirección postal física del remitente. Aunque la mayoría de los ESP ahora agregan un enlace para cancelar la suscripción, es mejor agregar uno desde el punto de vista del diseño.
Consejos de diseño que se aplican al correo electrónico general:
- Las fuentes deben tener entre 12 y 14 puntos para facilitar la lectura y deben ser fuentes seguras para correo electrónico.
- La altura total de la plantilla debe limitarse a 1800-2000px; de lo contrario, se recortará en Gmail.
- Además, a menos que se trate de un boletín informativo, los suscriptores no prefieren un correo electrónico extenso.
- El diseño debe estar de acuerdo con el color y los logotipos de la marca.
- En general, el correo electrónico debe tener secciones separadas por un espaciador.
- Para facilitar la codificación de su correo electrónico, si tiene contenido editable, debe evitar agregar una imagen de fondo a esa sección.
¡Ahí tienes! Tu plantilla de diseño de correo electrónico está lista. En Comunicare siempre podemos ayudarte con la conversión de correo electrónico PSD a HTML e incluso con la gestión completa de la campaña de correo electrónico. Comparta sus experiencias en los comentarios. Por eso estos consejos te serán muy útiles a la hora de diseñar PSD para campaña de correo electrónico de tu empresa.
Las mejores plantillas gratuitas de correo electrónico PSD
Plantilla de correo electrónico receptiva PSD / HTML gratuita
Una plantilla receptiva de boletín de noticias limpia y elegante que se puede descargar y modificar para satisfacer sus necesidades específicas. El diseño ha incluido todos los PSD y HTML y CSS de código abierto.
3 plantillas de correo electrónico PSD gratuitas en 4 combinaciones de colores cada una
Con un número total de 12 plantillas de correo electrónico PSD gratuitas, esta colección incluye 3 categorías: plantillas de boletín, plantillas de correo electrónico promocionales y plantilla de correo electrónico de notificación personal. Cada categoría viene en 4 colores diferentes: azul, verde, gris y naranja, para que puedas optar por la mejor opción para tu negocio.
Diseño de plantilla de correo electrónico PSD gratuito en estilo plano
Una plantilla de boletín de noticias con un diseño elegante que viene en un archivo PSD bien organizado que se puede personalizar fácilmente. Con varias opciones de contenido, este obsequio te ayudará a comenzar a crear su propia plantilla de correo electrónico.
Elegante plantilla de correo electrónico Diseño PSD gratuito
Una plantilla de boletín de correo electrónico bellamente diseñada que viene en un archivo PSD completamente en capas. Este moderno diseño de plantilla de correo electrónico se puede personalizar para adaptarse a las necesidades de tu proyecto.
Boletín electrónico para restaurantes modelo PSD
Una plantilla de boletín de correo electrónico 100% editable y completamente en capas diseñada con un estilo limpio y elegante. De descarga completamente gratuita, esta plantilla PSD es adecuada para todas las empresas de restaurantes.
Plantilla de correo electrónico promocional Diseño PSD
Una plantilla PSD completamente en capas diseñada para promocionar tus aplicaciones de fitness. Es muy fácil trabajar con esta plantilla de boletín y completamente editable para adaptarse a sus necesidades personales.
Plantilla de correo electrónico de comercio electrónico simple y elegante
Una plantilla de correo electrónico totalmente personalizable y de descarga gratuita que viene en un archivo PSD bien organizado y agrupado. Tenga en cuenta que este archivo no incluye las imágenes reales de la vista previa, pero hay instrucciones claras en las que debe utilizar sus propias fotografías de productos.
Plantilla de correo electrónico multipropósito de moda PSD y HTML
Una plantilla de correo electrónico PSD gratuita elegantemente diseñada y limpia que está completamente en capas, agrupada y nombrada. También viene con un código HTML comentado y codificado a mano. Ambos formatos son fácilmente editables, así que hazte con este obsequio.
Plantilla PSD gratuita para boletín informativo por correo electrónico
Una plantilla presentada en un diseño minimalista y viene en un archivo PSD bien agrupado y organizado. Fácil de trabajar, esta plantilla se puede ajustar fácilmente según sus necesidades, así que consígala.
Plantilla de correo electrónico PSD gratuita en diseño simple
Una elegante plantilla de correo electrónico diseñada en verde y negro que se puede adaptar a tu gusto. Muy funcional y de moda, esta plantilla de correo electrónico te ayudará a realizar sus campañas de correo electrónico y es gratuita.
Diseño de plantilla de correo electrónico PSD gratuito agradable a la vista
Un diseño de plantilla de correo electrónico muy limpio en un moderno estilo plano. Diseñada en azul y gris, esta plantilla multifuncional es absolutamente editable ya que viene en un archivo PSD bien organizado y en capas. Simplemente agárralo y comienza a personalizarlo según tus necesidades.
Boletín electrónico PSD gratuito en diseño de sobres
Una plantilla de correo electrónico de regalo de diseño atractivo que muestra una pila de hojas de papel que salen de un sobre. Este diseño único se puede editar fácilmente hasta que satisfaga las necesidades específicas de tu proyecto.