Share
Lo que vas a crearEn este tutorial, aprenderemos cómo crear una plantilla de boletín de correo electrónico simple y audaz utilizando Sketch.
Si participa en el envío de boletines por correo electrónico, deben considerarse un punto clave en sus estrategias de marketing. Nos dan contacto directo con clientes potenciales, pero tenemos que prestar atención a cómo los diseñamos para que se comuniquen adecuadamente, capten la atención y (lo más importante) cumplan nuestros objetivos..
Aquí está la información detrás de este ejercicio de diseño: imaginemos que somos una empresa que ofrece recursos de aprendizaje en línea. Queremos ponernos en contacto con nuestros clientes potenciales, revelando los beneficios de usar nuestra plataforma. En esta situación, podemos comenzar por crear un boletín de correo electrónico limpio pero efectivo utilizando Sketch para satisfacer nuestras necesidades.
Comenzaremos totalmente desde cero, utilizando las herramientas más comunes que tenemos en Sketh para crear nuestra plantilla. Te sorprenderá lo fácil que será.!
Para completar con éxito este tutorial, deberá descargar los archivos adjuntos disponibles. En el archivo zip encontrará texto y las imágenes que usaremos en los siguientes pasos.
Voy a usar Helvetica Neue como la fuente predeterminada, pero si no la tiene disponible, intente con Helvética o Arial.
Nota: recuerda ser un diseñador responsable! Con eso quiero decir: recuerda cambiar el nombre de tus capas utilizando nombres descriptivos, agrupar las capas y organizar el contenido. Tus compañeros te lo agradecerán, confía en mí..
¿Estás listo? Vamos a empezar!
Vamos a empezar por crear una nueva mesa de trabajo. Ir Insertar> Cartón (A) Desde el menú principal o barra de herramientas. Ahora haga clic y arrastre dentro del lienzo de Sketch para crear un 620 x 3000px mesa de trabajo Si le resulta difícil, recuerde que puede modificar estos valores a través de Inspector a la derecha de la pantalla. También puede cambiar el nombre de la mesa de trabajo desde Lista de capas en el lado izquierdo de la pantalla.
Propina: Un enfoque común cuando se diseñan plantillas de correo electrónico es comenzar con un ancho de documento de 550-650px. Aprende más sobre email marketing en este gran artículo de Nicole Merlin..
Ahora vamos a crear algunas guías que usaremos como una referencia para colocar correctamente nuestros elementos, dando como resultado un diseño sólido y equilibrado. ¿Dónde debemos colocar los guías? Pensemos un poco:
Una plantilla de correo electrónico puede ser diseñada de muchas maneras. Uno de los más comunes es simplemente crear un diseño de 1 columna. Este diseño nos permite guiar al usuario de una manera más fácil, utilizando un flujo vertical de bloques de contenido, uno tras otro. Además, el diseño con una estructura de una sola columna en mente, nos da la oportunidad de adaptarlo fácilmente a diferentes dispositivos.
Sin embargo, para los propósitos de este ejercicio, estamos aquí para practicar un poco más, así que vamos a crear un diseño de 3 columnas. Lo siento!
Activa las reglas y comienza a crear guías. Ir Ver> Mostrar reglas (^ R). Ahora haga clic en la regla horizontal en 30px, 200px, 225px, 395px, 420px y finalmente en 590px. Puedes mover las reglas arrastrándolas y moviéndolas. También puedes mover tus propios guías de forma similar. Para eliminar guías, arrástralas más allá de las reglas..
El encabezado de nuestro correo electrónico es muy importante. Es el primer contacto que tenemos con el usuario y, por lo tanto, debemos comunicar nuestra propuesta principal. También es una buena decisión mostrar el nombre de la empresa y un buen eslogan seguido de un botón de CTA que fomente el registro u obtener más información sobre nosotros..
En primer lugar debemos añadir un preencabezado, un simple enlace de texto que le permite al usuario acceder a la versión web de nuestro boletín en caso de que su cliente de correo electrónico no le permita verlo correctamente.
Selecciona el Herramienta de texto (T) y haga clic en cualquier lugar del lienzo para insertar una capa de texto. Observe cómo Inspector ha cambiado para mostrar todas las propiedades de la capa de texto. Comience a escribir "¿Problemas para ver este correo electrónico? Véalo en línea ”.
Cambiar su color a # 8FA6B3 y establecer tamaño a 11px. Ahora seleccione solo la parte "Verlo en línea" y cambie su color a # FF736D. Mantenlo seleccionado. Haga clic en el Opciones icono al lado de Color y haga clic en el segundo Decoración Opción para subrayar el texto..
Mueva el objeto desde la parte superior de la mesa de trabajo dejando un 30px margen.
Crear un 620x500px rectángulo usando el Rectángulo (R) herramienta y colóquela justo debajo del enlace de texto, dejando 30px entre ellos. Selecciona el rectángulo y cambia su color a # F5F7F8 utilizando la Inspector panel. Desmarque la fronteras opción para eliminarlo.
Abra el archivo svg de “iconos” adjunto a este tutorial. Seleccione todos los íconos, cópielos y péguelos en el documento que estamos diseñando nuestra plantilla. Los vamos a utilizar para decorar el fondo de nuestro encabezado..
He puesto el grupo de iconos en X = -50 y Y = 0 (buscar Posición propiedades en el Panel de inspectores) pero siéntase libre de adaptarse por su cuenta.
Propina: Verá que algunas partes de nuestros iconos están fuera de la mesa de trabajo y Sketch las esconde automáticamente. Nada está mal. El programa entiende que estás utilizando una mesa de trabajo para limitar el área de diseño, de modo que oculta las partes de los elementos ubicados entre el área de la mesa de trabajo y el resto del lienzo. Intente mover todo el grupo fuera de la mesa de trabajo para verlo completamente. ¿Lo ves? No olvides moverlo de nuevo a su posición original.!
En la Lista de capas, seleccione la carpeta “iconos” y el rectángulo que creó anteriormente. Agruparlos usando una de las opciones disponibles en Sketch. Por ejemplo, use el Grupo icono en el Barra de herramientas o usa el (⌘-G) atajo de teclado para hacerlo. Mueva el grupo hacia abajo hasta la parte inferior de la Lista de capas, renómbrelo a algo como "Fondo" y usa la pequeña flecha a la izquierda para revelar su contenido.
Selecciona el rectángulo y ve a Capa> Usar como máscara.Espera la magia. Sketch utilizará el rectángulo para enmascarar cada capa encima de ella en la Lista de capas. Si previamente agrupamos el contenido que queremos enmascarar y la máscara juntos, no afectaremos los elementos fuera del grupo. Consejo muy útil!
Ahora deberías tener los íconos ya enmascarados como la siguiente imagen:
Abra el archivo svg “logo” y copie el logotipo en nuestro documento. Sé que es demasiado grande, así que ve a la Panel de inspectores para cambiar sus dimensiones a 90 x 31px. Moverlo a X = 265, Y = 100.
Crea una nueva capa de texto y establece su ancho en 560px. Moverlo a X = 30 y Y = 220. Ahora edite el texto y cámbielo a "Su lugar para descubrir habilidades del mundo real". Establece sus propiedades en Peso = Negrita, Color = # 424242, Tamaño = 48, Línea = 45 y Alineación = Centro. Seleccione solo la palabra "real" y cámbiela a itálico.
Ahora vamos a diseñar nuestro botón de acción principal. Dibuja un 220x45 px rectángulo. Ve al panel de inspección y establece Radio a 30. Cambio Llenar a # D92B2B. Moverlo bajo el texto del eslogan, dejando alrededor 50px entre los dos objetos.
¡Nuestro botón no tiene sentido si lo dejamos vacío! Necesitamos una llamada a la acción texto, unas pocas palabras que se centran en la propuesta principal y captan la atención del usuario. Me encantaría hablar más sobre este tipo de marketing, pero para acelerar un poco, simplemente vamos a crear una capa de texto, luego escriba "Únase a nosotros desde 10 $ / mes".
Cambiar las propiedades a Peso = Negrita, Color = #FFFFFF y Tamaño = 15. Moverlo a X = 225, Y = 375, justo dentro de nuestro rectángulo redondeado.
Volveremos a utilizar este botón más tarde, así que es una buena idea guardarlo como un símbolo. Agrupe las capas de texto y rectángulo y haga clic en Crear simbolo Opción desde la barra de herramientas principal. Observe cómo el color de la carpeta en el Lista de capas ha cambiado de azul a púrpura.
Creo que necesitamos un poco más de contraste entre los contenidos de primer plano y la imagen de fondo, así que hagamos un pequeño cambio. Ve a la Lista de capas, expanda la carpeta Fondo y duplique el rectángulo que está utilizando para enmascarar los iconos de fondo. Muévalo a la parte superior del grupo, vaya a la Inspector panel y cambio Mezcla a Aligerar y Opacidad a 50%. Al final deberías conseguir algo como esto:
Nuestro encabezado esta hecho!
Ahora que tenemos la atención del usuario, necesitamos hablar un poco sobre nosotros mismos y nuestros servicios. ¿Quienes somos? qué hacemos? Tenemos que responder estas preguntas de manera directa y concisa, tratando de mostrar algunos beneficios adicionales sobre el uso de nuestra plataforma..
Crea dos nuevas capas de texto. Establecer su anchura a 480px. Puedes escribir lo que quieras, pero he usado el texto que encontrarás dentro del archivo de texto adjunto.
¿Hecho? Ahora usa las siguientes posiciones y propiedades:
Dibuja un 100px línea ancha (Insertar> Forma> Línea) y establecer Espesor a 2px y color del borde a #E24A4A. Colóquelo entre las dos capas de texto, dejando una distancia de 25px entre cada elemento. Recuerda: si presionas la tecla Alt mientras mueve el cursor, puede ver las distancias en píxeles entre los elementos seleccionados.
Vamos a replicar la estructura anterior un par de veces a lo largo de este tutorial. Pero por ahora, seleccione la línea y las capas de texto y agrúpelas. Recuerda ser organizado y ponerle un nombre. He usado "primer bloque".
Seleccione la capa de texto "Buscar en línea ...", vaya a la Panel de inspectores y cree un nuevo estilo de texto haciendo clic sobre "Sin estilos de texto", luego Crear nuevo estilo de texto. Haz lo mismo con la segunda capa de texto. Ahora, cada capa vinculada a estos estilos se actualizará a la vez cuando edite sus propiedades..
Nota: tenga en cuenta que Sketch no puede guardar estilos de texto con múltiples pesos de fuente aplicados en la misma capa. Dicho esto, no usaré estilos para este tutorial. Si desea aprender un poco más sobre los estilos, consulte nuestra guía A to Z de Sketch.
Abra el archivo svg "resaltados-iconos". Copie los tres iconos que encontrará en el documento y péguelos en su diseño. Use las guías que ya tiene para alinearlas como si estuviera usando un diseño de 3 columnas, justo debajo del bloque anterior. No los coloque demasiado cerca de ese bloque, deje espacios en blanco de alrededor. 40px. Si necesitas ayuda, solo echa un vistazo a la siguiente imagen:
Crear tres 170px capas de texto ancho utilizando Helvetica Neue Bold, Tamaño = 15, Línea = 18, Color = # 424242 y Alineación = Centro. Pon estos elementos alrededor 30px debajo de los íconos usando las guías y comience a escribir o copie el texto del archivo adjunto!
Otro bloque terminó!
Una característica común en los boletines es el envío de los últimos artículos o contenidos que interesarían a los lectores. Entonces, después de nuestra primera prueba de CTA y la parte en la que hablamos un poco acerca de nosotros mismos, creemos un bloque donde mostramos las lecciones más recientes disponibles en nuestra plataforma de aprendizaje.
Comience duplicando el "primer bloque" que ya hizo. Ponlo debajo de los bloques anteriores., 40px margen, y utilizar los contenidos dentro de la .TXT Archivo para modificar las capas de texto. Debería ser algo como esto:
Vaya a la carpeta de "lecciones" en los archivos de origen e importe todas las imágenes a su documento a través de Insertar> Imagen. Ahora tienes siete imágenes, 620px de ancho. Vamos a utilizar uno de ellos a tamaño completo y cambiaremos el tamaño del resto para que se ajuste a nuestro diseño de 3 columnas.
Vamos a añadir un texto para nuestra gran imagen. Inserte tres capas de texto, use el archivo de texto una vez más y establezca las propiedades y posiciones de la siguiente manera:
Necesitamos algunas capas de texto más para las otras lecciones que estamos mostrando. Hagámoslo de nuevo; inserte tres capas de texto, escriba lo que desee o copie los textos del archivo provisto. Establezca sus propiedades y posiciones utilizando la siguiente imagen como referencia y repita el proceso cinco veces para finalizar el resto de las lecciones que está mostrando..
Otro bloque terminó. Tómese un momento para organizar sus capas, luego pase a la siguiente parte!
Sé que nuestra plantilla de correo electrónico es ... larga. ¡Pero no es un problema si sabemos cómo lidiar con eso! Los usuarios tendrán que desplazarse por todo el contenido, por lo que es una buena idea ofrecer un acceso fácil a otra llamada a la acción sin tener que desplazarse hasta la parte superior del correo electrónico.
¿Recuerdas el "primer bloque" que duplicaste antes? Hazlo de nuevo, muévelo debajo del "bloque de lecciones" dejando un margen alrededor de 40px y cambiar su contenido de la siguiente manera:
Inserte un 620x243px rectángulo y rellenarlo con # F5F7F8. Ahora agregue una capa de texto y cambie su contenido y propiedades utilizando la siguiente imagen como referencia:
Ir Insertar> Símbolos y elige el botón de CTA que creaste antes. Ponlo bajo el párrafo anterior..
Ya casi terminamos!
Ok, tenemos nuestro bloque principal y un llamado a la acción. A continuación, agregamos algunos mensajes secundarios y un poco más de contenido. Más tarde, volvimos a hablar sobre nuestra propuesta principal, repitiendo el llamado a la acción. Ahora es el momento de diseñar el pie de página y terminar nuestra plantilla.!
Crear un 620x130px rectángulo. Llenarlo con # 555E68 y ponerlo bajo el bloque de la CTA. A continuación, crea otro. 620x45 px rectángulo y rellenarlo con # 383E44. Deberías terminar con algo como esto:
Importe el archivo "logo-white" a su documento y muévalo a X = 265 y Y = 2787.
Vamos a añadir el texto final. Inserte tres capas de texto y configure sus propiedades y posiciones de la siguiente manera:
No es necesario, pero puede ajustar la altura de la mesa de trabajo para que coincida solo con el espacio que realmente necesita. Puedes hacerlo seleccionando en la Lista de capas y cambiando su altura en el Inspector panel. Lo he cambiado a Altura = 2937px.
Así es como debe verse el producto final..
Espero que disfrutes este tutorial. Avísame si te quedas atascado o si necesitas pedir algo. ¿Tienes una idea para mi próximo tutorial? ¡Deja un comentario! Espero ver cómo te llevas!
Accentsconagua