() translation by (you can also view the original English article)
Recientemente rediseñamos todos los correos electrónicos que enviamos en Envato Tuts+; Los boletines de noticias, los diversos resumenes, los email de campaña de comercialización, y los email de administracion. ¡En esta breve serie de estudio de casos explicaremos cómo lo hicimos!
¿Por qué?
Hasta el rediseño, teníamos una colección bastante desordenada de correos electrónicos sin un equipo central cuidandolos. Se hizo evidente que podíamos simplificar las cosas y hacer las cosas más económicas, así que decidimos pasar nuestros esfuerzos a una cuenta central en Campaign Monitor. Se utilizaría un conjunto central de temas en todos los ámbitos y nos aseguraríamos de que fueran diseñados y construidos de una manera que representara lo que representamos en Envato Tuts+.
Auditoría
La primera etapa de la operación fue recopilar todos los correos electrónicos que estábamos enviando a las masas. Esto significaba revisar nuestros boletines de correo existentes de MailChimp y desmantelar lo que teníamos en Exact Target.
Una vez que sabíamos lo que estábamos buscando, podíamos seleccionar elementos comunes y categorizar todo listo para la etapa de diseño.
Lo hicimos todo para:
Administración
- Nueva cuenta
- Confirmación de suscripción al correo electrónico
- Contraseña perdida etc.
Comercializacion
- Varias promociones
Noticias
- Resumen mensual
- Resumen semanal
- Boletín del traductor
- Boletín del colaborador
Necesidades
¿Cuáles fueron nuestras prioridades para este rediseño? En forma de puntos, necesitábamos:
- Un diseño web adaptable
- La marca y la tipografía para enlazarla con Tuts+
- Algo representativo de Envato en su conjunto
- Claras llamadas a acción (CTAs) cuando sea necesario
Y queríamos:
- Tipografía clara y legible
- Intemporalidad; Un estilo que no mostraría rápidamente su edad
- Diferenciación entre los distintos tipos de correo electrónico
Sketch
!Es hora de hacer algunas imágenes! He utilizado Sketch para este proceso de diseño, debido a su idoneidad para el diseño de interfaz de usuario. La primera etapa fue poner una mesa de trabajo y elaborar algunas dimensiones de la rejilla.
Utilicé las opciones de diseño de Sketch (Ver > Tela> Configuración de diseño..) para establecer una cuadrícula de 640px, con 8 columnas. Mi mesa de trabajo era mucho más ancha que eso, para darme espacio para respirar. Al hacer clic en Centro, el desplazamiento se calcula automáticamente, en este caso a 280 píxeles. La rejilla, por lo tanto, se colocó 280px en desde el borde de la mesa de trabajo.
Un ancho de columna de 62px atado bien con rellenos de 20px, dándome un punto de partida horizontal.
Yo también quería filas, así que marque la casilla Filas. Mi tipo funcionaría desde una base de 16px, así que lo usé como una cuadrícula vertical rudimentaria.
Diseño
El equipo de mercadotecnia en la sede había pedido que tomáramos disposiciones para algún tipo de sección de héroes; Algo que les permitiría usar gráficos llamativos si alguna vez lo necesitaban.
No quería que sea estándar en todos los tipos de correo electrónico, pero me dio un buen punto de partida. Usando bloques, me puse a hacer un diseño básico.
Con un hero, un área de contenido principal, y un lienzo blanquecino, el escenario estaba ambientado. Decidí usar capas y hacer que el área de contenido se superponga ligeramente al héroe. Era consciente de que esto podría causar a Nicole (que estaría construyendo todo el asunto) unos cuantos dolores de cabeza, pero sabía que lo habría averiguado, ella es una maga después de todo.
Las variantes de este arreglo podrían venir en la forma de:
- Héroe del color del bloque (los oscuros en la tapa)
- Salpicadura de imagen Héroe (los anaranjados por ejemplo)
- Transparente Héroe (abajo a la izquierda)
- Ausencia por completo de héroe (abajo a la derecha)
Móvil
Una ventaja de una disposición simple es que la capacidad de respuesta es inherentemente más fácil de lograr. Aplastada a una ventana más estrecha, colapsaríamos la columna dual cuando era necesario, y el área de contenido para arriba contra el borde de la ventana de visión, dándonos una serie de secciones y ninguna superposición.
En Sketch, donde se necesitan dos arreglos de columnas diferentes, necesitamos una segunda página. Cualquier diseño de cuadrícula que definamos se aplica a todas las mesas de trabajo en la misma página, y necesitamos una cuadrícula mucho más simple para nuestra vista de móvil aplastada.
Lo que necesitamos aquí es tan simple, de hecho, que realmente solo necesitamos una sola columna central, con una cuneta (nos adheriremos a 20px a ambos lados). Sin embargo, Sketch no puede crear una cuadrícula de una sola columna, así que tendremos que usar dos.
Tipografía
Usamos Roboto estos días en gran parte de Envato, por lo que la decisión fue tomada para mí. Los colores son dictados en gran parte por los estilos de Envato también, así que tuve una paleta para elegir. Tuve que decidir qué se utilizaría para el cuerpo, los encabezados, los enlaces, cualquier texto con menos énfasis y las "llamadas a la acción".
Mis prioridades eran que:
- El texto debe ser legible, por lo tanto mi eleccion fue 16px fácil para la copia del cuerpo, con 24px (1.5) altura de la línea.
- Los encabezados serían más pesados, pero no mucho más grandes, y usarían el mismo color para sugerir una relación entre ellos.
- Enlaces se subrayaran (es un algo de mi personalidad obsesiva, pero no veo por qué los enlaces no deben ser asi).
- Los elementos de lista usarían puntos
- ¡En ninguna parte el texto se vería obligado a entrar en espacios estrechos!
- Enlaces y "llamadas a acción" utilizaría el mismo color azul siempre que sea posible, ayudando al lector a concentrarse en todos los elementos que pueden ser procesados.
En términos de Sketch haciendo las cosas más fáciles aquí, los estilos de texto estan a sólo un clic de distancia. Estililizar un pedazo de texto como lo quiera, guarde esto como estilo del texto, después refiera de nuevo a él si alguna vez usted necesita ese estilo otra vez.
Resumenes
Envato Tuts+ es una plataforma visual; Usamos miniaturas en todos los lugares. Algunos comentarios del equipo sugirieron que el mismo arreglo de la tarjeta que usamos en nuestra página principal sería la mejor manera de presentar tutoriales en un resumen en correo electrónico. Los lectores harían la conexión, entenderían con qué están tratando, y en cualquier caso es una manera clara de presentar la información.
Los cursos son ligeramente diferentes; Quería dar a esos un énfasis adicional. Cada sección del tema mostraría primero un curso disponible, de ancho completo, con un poco más de detalle que los tutoriales, además de un botón de reproducción superpuesto en la miniatura. Esto pondría de relieve la distinción entre cursos y tutoriales mientras que estimula a los lectores a hacer clic (botones de reproducción son buenos para eso).
Tener el botón de reproducción colocado dinámicamente sobre la parte superior sería difícil, así que nos resignamos a colocar manualmente el botón gráfico en las miniaturas (con Photoshop, por ejemplo). Un poco de trabajo extra (lo siento Cameron) pero vale la pena el esfuerzo, creo.
Bloques de anuncios
También queríamos una forma de presentar bloques de anuncios; No necesariamente anuncios de terceros, sino algo para darnos la oportunidad de gritar cosas nuevas y emocionantes. He añadido un banner opcional a la parte superior del diseño–muy similar a lo que verás en el sitio web de vez en cuando.
Entonces decidí dividir todo el contenido en bloques, permitiéndonos arreglarlos en cualquier orden que elijamos, y también hacer una clara distinción entre secciones.
Asi es como se ve un bloque de anuncios, con dos secciones de resumen de cada lado.
Footer
El footer es un elemento universal en todos estos correos electrónicos. No quería toneladas de información enterrada allí, pero lo que decidimos hacer allí lo quería claro (no entiendo por qué algunas compañías hacen que sus pies apenas sean visibles, con "unsubscribe" enlaces ocultos).
Así que, con algunos enlaces sociales, un área de texto para explicar por qué alguien podría estar recibiendo el correo electrónico, los enlaces de cancelación de suscripción y la dirección de Envato HQ, estábamos listos.
Boletines
Ahora tenemos la base para todos los elementos que necesitamos, dándonos los bloques de construcción para cada uno de nuestros tipos de correo electrónico.
Es poco probable que los boletines de noticias necesiten un héroe gráfico de ningún tipo, por lo que usé un encabezado sencillo pero audaz para iniciar los procedimientos allí. Los estilos tipográficos que ya habíamos establecido servirían para la mayor parte del contenido posible.
Una distinción entre boletines y digeridos se hizo dando boletines de noticias un héroe transparente, por lo que es más .. Broadsheet.
Los correos electrónicos de administración
El más simple de todos nuestros correos electrónicos (además de las versiones de texto sin formato) son los mensajes de administración. En su caso absolutamente ningún estilo extra es necesario; Solo obten el punto, rápido y sencillo. Un héroe transparente y una falta de grandes posiciones establece el tono de administración muy bien aquí. Todo lo demás sigue siendo el mismo incluyendo, posiblemente, un botón CTA. Estas son las vistas de escritorio y móviles:
Entregas
Con los conceptos y diseños establecidos, era el momento de enviar los resultados a Nicole. Ella estaría tomando estas ideas y haciendo archivos HTML estáticos de ellos. Necesitaba asegurarse de que entendía las decisiones que se habían tomado, y tenía todos los activos necesarios para construir los correos electrónicos.
InVision permite una anotación muy rápida en documentos gráficos y puede cargar archivos de Sketch directamente. Una colección de imágenes con comentarios y punteros eran una buena manera de comunicar todas las ideas.
En términos de entrega de activos, Sketch hace que la exportación de todos las piezas muy fácil. No sólo podría preparar todos los activos (como logotipos, botones sociales, etc.) pero también podría entregarlos en diferentes tamaños, cubriéndonos para pantallas de densidades de píxeles variadas. Obtenga más información sobre cómo Sketch puede exportar sus activos:
Con todos los archivos, además de algunas instrucciones más en Dropbox, Nicole tenía todo lo que necesitaba para hacer su magia.
Lo Que Viene
En la siguiente parte de este estudio de caso te entregaré a Nicole para la construcción. Ella explicará cómo construyó la base sensible para estos correos electrónicos, y superó las ediciones habituales del desarrollo del email de las ediciones para arriba.
Siéntase libre de agarrar el archivo de Sketch de demostración del repo en GitHub, y ver los mensajes de correo electrónico acabados usted mismo: suscríbase a continuación!
