Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch para principiantes: diseñando un completo boletín de correo electrónico

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Álvaro Göede Rivera (you can also view the original English article)

Final product image
What You'll Be Creating

En este tutorial aprenderemos como crear una plantilla sencilla y completa de boletín de correo electrónico utilizando Sketch.

El Instructivo

Si participas en el envío de boletines por correo electrónico, debes saber que estos son un punto clave en las estrategias de marketing. Nos dan un contacto directo con potenciales clientes pero tenemos que prestar atención al diseño de este para que la comunicación sea efectiva, esto es, captar la atención del usuario final y (lo más importante) cumplir nuestros objetivos.

Aquí esta el instructivo detrás de este ejercicio de diseño: vamos a imaginar que somos una compañía que ofrecemos recursos para el aprendizaje en línea. Queremos estar en contacto con nuestros potenciales clientes, informando los beneficios de usar nuestra plataforma. En esta etapa podemos empezar por la creación de un limpio pero efectivo boletín de noticias usando Sketch para cubrir nuestras necesidades.

Comenzaremos totalmente desde cero, usando las herramientas más común que tenemos en Sketch para crear nuestra platilla. ¡Te sorprenderás de lo fácil que será!

El calentamiento

Para completar exitosamente este tutorial necesitarás descargar los archivos adjuntos disponibles. En el archivo comprimido (ZIP) encontrarás texto y las imágenes que utilizaremos a lo largo de este tutorial.

Usaré Helvetica Neue como fuente por defecto pero si no la posees, prueba con Helvetica o Arial.

Nota: ¡recuerda ser un diseñador responsable! Con esto quiero decir: recuerda cambiar el nombre de las capas usando nombres descriptivos, agrupa las capas y organiza el contenido. Tus compañeros de trabajo te lo agradecerán, confía en mi.

¿Estás listo? ¡Comencemos!!

1. Creación de una mesa de trabajo

Paso 1

Comenzaremos creando una nueva mesa de trabajo. Ir a Insert > Artboard (A) desde el menú principal o barra de herramientas. Ahora haz clic y arrastra dentro del lienzo para crear una mesa de trabajo de las siguientes dimensiones 620 x 3000px. Si encuentras que es muy difícil, recuerda que puedes modificar estos valores en el Inspector a la derecha de tu pantalla. Puedes cambiar también el nombre de la mesa de trabajo desde el Layer List al lado izquierdo de tu pantalla.

Out artboard in Sketch

Consejo: El método más frecuente cuando diseñamos plantillas para boletines de correo electrónico es comenzar con una documento de 550 a 650px de ancho. Aprende más de marketing por correo electrónico en  este gran artículo realizado por Nicole Merlin.

Paso 2

Ahora comenzaremos a crear algunas guías que usaremos como referencia para colocar correctamente nuestros elementos, resultando en un diseño mesurado y equilibrado. ¿Donde debemos colocar las guías? Pensemos un poco:

Un boletín puede ser diseñado de muchas maneras. Una de las más comunes es utilizando una estructura de 1 columna. Esta disposición nos permite guíar al usuario de una manera más sencilla, usando un flujo vertical de bloques de contenido, uno tras otro. Además, diseñando con una sola columna, nuestro diseño se adapta fácilmente a diferentes dispositivos.

Sin embargo la finalidad de este ejercicio es practicar un poco más, por lo tanto crearemos una estructura de 3 columnas. ¡Perdón!

Activa las reglas y comienza creando las guías. Ir a View > Show Rulers (^R). Ahora haga clic sobre la regla horizontal en 30px, 200px, 225px, 395px, 420px y finalmente en 590px. Tu puedes mover las reglas arrastrándolas y moviendolas. También puedes mover tus propias guías de la misma manera. Para borrar guías, arrastralas por encima de las reglas.

Guides in Sketch

2. Diseñando el Encabezado

El encabezado de nuestro correo es muy importante. Este es el primer contacto que tenemos con el usuario y por lo tanto debemos comunicar nuestra oferta principal. También una buena decisión es mostrar el nombre de la compañía y un lema publicitario atractivo seguido por un botón que invite a inscribirse o recibir más información de nosotros.

Primeramente debemos agregar un preencabezamiento, un enlace que permita al usuario acceder a nuestro boletín de correo electrónico mediante su navegador predeterminado en caso de que la información que estamos enviando no se vea correctamente.

Paso 1

Selecciona la Text tool (T) y haz clic en cualquier lugar de el lienzo para insertar una capa de texto. Observe como el Inspector ha cambiado para mostrar todas las propiedades de la capa de texto. Comienza a escribir “Problems viewing this email? View it online”.

Cambie el color a #8FA6B3 y establece el Size en 11px. Ahora selecciona solo la parte “View it online” y cambia el color de esta frase a #FF736D. Manten esa frase seleccionada. Haz clic en Options, el ícono anterior a Color y haz clic en la segunda opción de Decoration para subrayar el texto.

Our first link

Mueva el objeto desde la parte superior de la mesa de trabajo dejando un margen de 30px.

Aligning our preheader

Paso 2

Crea un rectángulo de 620x500px usando la herramienta Rectangle (R) y posicionalo justo debajo del enlace, dejando un margen de 30px entre ellos. Selecciona el rectángulo y cambie su color de relleno a #F5F7F8 usando el panel de Inspector. Desactive la opción borders para remover los bordes.

Background for the first block

Paso 3

Abre el archivo svg “icons” adjuntado en este tutorial. Selecciona todos los íconos, copialos y pégalos en el documento donde diseñamos nuestra plantilla. Utilizaremos estas imágenes para decorar el fondo de nuestro encabezado.

He puesto el grupo de íconos en X= -50 y Y = 0 (busca las propiedades de Position en el Panel Inspector) pero sientete libre de ubicarlo donde tu quieras.

Masking and grouping objects

Consejo: Algunas partes de los íconos estan fuera de la mesa de trabajo y Sketch automáticamente las oculta. No pasa nada. El programa entiende que tu estás usando una mesa de trabajo que limita tu área de diseño por eso esconde sectores de los elementos posicionados entre el área de la mesa de trabajo y el resto de el lienzo. Prueba moviendo todo el grupo fuera de la mesa de trabajo y observa que sucede con los elementos. ¿Lo ves? ¡No te olvides de devolverlo a su posición original!

Paso 4

En la lista de capas selecciona la carpeta “icons” y el rectángulo que habíamos creado. Agrupalos utilizando alguna de las opciones disponibles en Sketch. Por ejemplo usa el ícono Group en la Toolbar o usa el atajo de teclado (⌘-G) para realizarlo. Traslada el grupo a lo más bajo de la Layer List, cambia su nombre a algo como “Background” y utiliza la pequeña flecha a la izquierda para mostrar su contenido.

Creating a mask in Sketch

Selecciona el rectángulo y dirígete a Layer > Use as Mask. Espera a que la magia suceda. Sketch usará el rectángulo para enmascarar todas las capas que estén encima de este, la jerarquía de capas se puede observar en la Layer List. Si previamente agrupamos el contenido que queremos enmascarar y la mascara, no vamos a afectar a los elementos fuera del grupo, cómo por ejemplo la capa de texto. ¡Consejo bastante útil!

Ahora debes tener los íconos ya enmascarados como muestra la siguiente imágen:

Paso 5

Abre el archivo svg “logo” y copia la imágen en nuestro documento. Es muy grande, así que cambia las dimensiones a 90 x 31px en el Inspector Panel. Establece su posición en X = 265, Y = 100.

Adding a logotype

Paso 6

Crea una nueva capa de texto y establece su ancho en 560px. Cambia la posición X = 30 y Y = 220. Edita el texto con la siguiente frase “Your place to discover real world skills”. Esteblece sus propiedades Weight = Bold, Color = #424242, Size = 48, Line = 45 y Alignment = Center. Selecciona sólo la palabra “real” y cámbiala a italic.

The slogan

Paso 7

Ahora diseñaremos nuestro primer botón de interacción. Dibuja un rectángulo de 220x45px. Ir al panel Inspector y establece el Radius en 30. Cambia el Fill a #D92B2B. Mueve esto debajo del eslogan, dejando unos 50px entre los dos objetos.

Creating the CTA button

Paso 8

¡Nuestro botón no tiene sentido si lo dejamos vacío! Necesitamos un texto que llame a la acción, pocas palabras que concentren la principal propuesta y capten la atención del usuario. Me encantaría hablar sobre este tipo de marketing, pero para apurarnos un poco crearemos sólo una capa de texto que diga “Join us from 10$/month”.

Cambia las propiedades a Weight = Bold, Color = #FFFFFF y Size = 15. Posicionalo en X = 225, Y = 375, debajo de nuestro rectángulo redondeado.

Vamos a usar este botón nuevamente más tarde así que es una buena idea guardarlo cómo un símbolo. Agrupa las capas de texto, rectángulo y haz clic en la opción Create symbol desde la barra de herramientas principal. Observe cómo el color de la carpeta en Layer List ha cambiado de azúl a morado.

The CTA symbol

Paso 9

Creo que necesitaremos un poco más de contraste entre el contenido en primer plano y la imágen de fondo así que vamos a realizar un pequeño cambio. Ir a la Layer List, mostrar la carpeta Background y duplicar el rectángulo que estamos utilizando como máscara en los íconos del fondo. Mueve este a la parte superior del grupo, mediante el panel Inspector cambia la Blending a Lighten y Opacidad a 50%. Cuando termines debes tener algo como esto:

¡Nuestro encabezado está listo!

3. Diseñando el bloque “Quiénes somos”

Ahora que tenemos la atención del usuario, necesitamos hablar un poco acerca de nosostros y de nuestros servicios. ¿Quiénes somos?, ¿Qué hacemos?, tenemos que responder a estas preguntas de una manera directa, concisa y tratando de mostrar algunos beneficios adicionales sobre el uso de nuestra plataforma.

Paso 1

Crea dos nuevas capas de texto. Establece sus width en 480px. Puedes escribir lo que tu quieras, pero yo he usado el texto que se encuentra dentro del archivo de texto adjunto.

¿Listo? Ahora usa las siguientes posiciones y propiedades:

Paso 2

Dibuja una línea que tenga de ancho 100px para eso haz clic en (Insert > Shape > Line) y establece Thickness en 2px y el border color en #E24A4A. Posiciona esto entre las dos capas de texto, manteniendo una distancia de 25px entre cada elemento. Recuerda: si seleccionas un elemento y presionas la tecla Alt mientras mueves el cursor, puedes ver las distancias en pixeles entre ellos.

Adding some texts to our email campaign

Paso 3

Vamos a replicar la estructura anterior un par de veces a lo largo de este tutorial. Pero por ahora, selecciona la línea, las capas de texto y agrúpalos. Recuerda ser organizado y darle un nombre. Yo usé “first-block”.

Selecciona la capa “Search for online...”, dirigete al panel Inspector y crea un nuevo Text Style haciendo clic sobre “No Text Styles”, luego Create New Text Style. Hace lo mismo con la segunda capa de texto. Cada capa vinculada a estos estilos será actualizada inmediatamente cuando edites sus propiedades.

Creating styles

Nota: hay que tomar en consideración que Sketch no puede guardar Estilos de Texto con multiples font-weights aplicadas en la misma capa. Aclarando esto, yo no utilizaré estilos para este tutorial. Si tu quieres aprender un poco más acerca de estilos, visita nuestra Guia de la A a la Z en Sketch.

Paso 4

Abre el archivo svg “highlights-icons”. Copia los tres íconos que encontrarás en el documento y pégalos en tu diseño. Utiliza las guías que ya creaste para alinearlos en la estructura de 3 columnas, posicionalos justo debajo del bloque anterior. No lo coloques demasiado cerca del bloque de arriba, deja un espacio en blanco de 40px. Si necesitas ayuda, revisa la siguiente imágen:

Adding some icons

Paso 5

Crea tres capas de texto de 170px de ancho usando Helvetica Neue Bold, Size = 15, Line = 18, Color = #424242 y Alignment = Center. Dispone estos textos a 30px debajo de los íconos usando las guías y ¡comienza a escribir o copiar el texto desde los archivos adjuntos!

Writing benefits about our company

¡Otro bloque terminado!

Diseñando el bloque “Nuevas lecciones”

Una característica común en los boletines es el envío de los últimos artículos o contenidos que los lectores estarían interesados en leer. Así que después de nuestro botón y de la sección donde se habla un poco acerca de nosotros, vamos a crear un bloque donde mostraremos las lecciones más recientes disponibles en nuestra plataforma de aprendizaje.

Paso 1

Empezemos por duplicar el “first-block” que hiciste. Disponelo bajo el bloque anterior, deja un 40px de margen, y usa el contenido que esta dentro del archivo .txt para modificar las capas de texto. Debe ser algo como esto:

Putting some additional content into our email template

Paso 2

Ir a la carpeta “lessons” en los archivos adjuntos e importar todas las imágenes dentro de tu documento mediante Insert > Image. Tienes siete imágenes, de 620px de ancho. Vamos a utilizar una de ellas en su tamaño completo y cambiar el tamaño del resto para encajarlas en nuestra estructura de 3 columnas.

Our lessons thumbnails

Paso 3

Vamos a añadir un poco de texto para nuestra gran imagen. Inserta tres capas de texto, utiliza el archivo de texto una vez más y establece las propiedades y posiciones de la siguiente manera:

Text layers properties

Paso 4

Necesitas unas pocas capas de texto más para las otras lecciones que queremos mostrar. Vamos a hacer esto de nuevo; inserta tres capas de texto, escribe lo que tu quieras en ellas o copia los textos desde el archivo provisto. Establece sus propiedades y posiciones usando la imágen siguiente como referencia y repite el proceso cinco veces para terminar el resto de la lecciónes que queremos mostrar.

More text layers properties

Otro bloque terminado. Tómate un momento para organizar tus capas, luego, ¡pasaremos a la siguiente parte!

The Lessons block

Oferta principal, nuevamente

Se que nuestra plantilla de boletín es... larga. ¡Pero esto no es un problema si sabemos como manejarla! Los usuarios tienen que desplazarse hasta el pié del correo para leerlo completamente, esto es una buena oportunidad para realizar otra llamada atractiva, en este caso suscribirse, de esa manera evitamos que el usuario tenga que desplazarse por todo el boletín nuevamente hasta la parte superior, donde se encuentra nuestro primer botón.

Paso 1

¿Recuerdas el “first-block” que duplicaste anteriormente? Hazlo de nuevo, muevelo debajo de los “lessons block” manteniendo un margen de 40px y editalo la manera siguiente:

Adding another info block

Paso 2

Inserta un rectángulo de 620x243px y rellenalo con un color hexadecimal de #F5F7F8. Ahora agrega una capa de texto, cambia su contenido y propiedades usando la siguiente imágen de referencia:

Catchy slogan for our secondary CTA block

Paso 3

Haz clic en Insert > Symbols y selecciona el botón que creaste antes. Ponlo debajo del parrafo anterior.

¡Ya casi hemos terminado!

Diseñando el Pié de Página

Bien, tenemos nuestro bloque principal y un botón. Luego, agregamos algunos mensajes secundarios y un poco más de contenido. Más tarde, hablamos nuevamente de nuestra oferta principal, repitiendo el botón. ¡Ahora es el momento de diseñar el pie de página y terminar nuestra plantilla!

Paso 1

Crear un rectángulo de 620x130px. Rellenarlo con #555E68 Y ponerlo a continuación del botón anterior. Luego, crea otro rectángulo de 620x45px y rellenalo con #383E44. Tu debes terminar con algo parecido a esto:

Designing the footer

Paso 2

Importar el archivo “logo-white” en tu documento y posicionarlo en X = 265 y Y = 2787.

Put the logo into the footer

Paso 3

Vamos a agregar el texto final. Inserta tres capas de texto y establece sus propiedades y prosiciones como te muestro aquí:

Text layers properties

Esto no es necesario, pero puedes cambiar la altura de la mesa de trabajo para ajustarla sólo al espacio que necesitas. Puedes hacerlo seleccionando la mesa de trabajo en la Layer List y cambiando la altura en el panel de Inspector. Yo cambie esto a Height = 2937px.

¡Estamos listo!

Aquí esta cómo debería verse la plantilla final.

Espero que hayan disfrutado este tutorial. Quiero saber si te quedaste atascado en alguna parte o si necesita algo. ¿Tienes una idea para mi próximo tutorial? ¡Deja un comentario! ¡Estoy ansioso de ver cómo te va!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.