Diseño y maquetación de ’newsletter’ y ’landing page’

Asignatura: Fundamentos del Diseño
Titulación: Diseño y Creaciones Digitales
Nombre del estudiante: Martín Gama Vilallonga
Consultor y profesor: Susana Perdomo Marín e Irma Vilà Òdena

Introducción

FESTDESIGN_BCN es un relevante festival que acoge charlas, conferencias, mesas redondas y presentaciones de importantes diseñadores, además de servir de marco de entrega de sus prestigiosos premios.

Se nos pide el diseño y maquetación de un newsletter, que tendrá una versión online y una impresa, y una landing page, que habrá que adaptar a tres formatos, que serán publicados por el festival para su promoción.

Etapas y retos

Planteamiento del encargo

La intencionalidad comunicativa del diseño será transmitir, a través de la distribución de los textos y las imágenes en la maquetación, una excelente claridad a la hora de percibir la información, ya que el newsletter, al contener horarios de actividades como información referente a los premios, será de consulta recurrente, por lo que la información tendrá que ser fácil de localizar. Para este objetivo se opta por una jerarquización de los textos a través de dos familias tipográficas y los distintos pesos dentro de estas. También se distribuye la información en distintos bloques diferenciados que resultan intuitivos a la hora de poder localizarla.

Otro punto a tener en cuenta será el target al que va dirigida esta campaña, que está relacionada con el mundo del diseño, por lo que la composición debe presentar puntos de interés que este tipo de público pueda valorar.

Diseño de páginas

Para nuestro objetivo se utiliza una retícula con nueve filas y nueve columnas separadas por medianiles de 5 milímetros. Esto nos da un total de 81 campos reticulares, lo cual nos confiere mucha versatilidad a la hora de colocar textos e imágenes.

A la hora de distribuir los elementos en la retícula se ha utilizado el contraste compositivo de equilibrio e inestabilidad. La técnica de equilibrio se emplea en los bloques de texto que están claramente equilibrados y con un centro de gravedad claramente perceptible; esto lo contrastamos con la figura del premio, que está ligeramente inclinada: da la sensación de un desequilibrio puntual y es un punto de atención dentro de la composición. «La inestabilidad da lugar a formulaciones visuales muy provocadoras» (Dondis, 1973, pág. 148). En las landing page utilizamos esta técnica para llamar la atención sobre el botón de acceso al festival.

En la versión para imprimir se opta por un alto contraste de la página frontal con el dorso. En la portada se ve el logotipo del festival en gran tamaño para que este sea reconocido en la distancia y actúe como reclamo. Debajo de este aparece un texto explicativo sobre el festival que, una vez el receptor haya sucumbido a la llamada del logotipo, podrá leer para obtener información detallada sobre el festival.

Detrás ya aparecen los distintos horarios, premios, precios y contacto. Esta última información está diseñada para ser percibida de forma clara y bien estructurada, ya que es abundante, y el lector habrá de recurrir frecuentemente a ella si decide acudir al festival.

En el newsletter para su versión online se monta todo el diseño en una sola página. Para unificar todos los elementos como parte de un todo, se amplía el espacio negro en diagonal, por lo que invade parte de lo que en la versión impresa sería la página posterior. También se desplazan algunos textos para que la composición no se resienta.

Las landing pages han sido adaptadas a los diferentes formatos requeridos, que han sido tres: escritorio, tablet y smartphone. Se han usado distintas retículas para colocar los distintos elementos. Estas se han diseñado atendiendo al tamaño del formato, ya que la versión de escritorio, al tener un tamaño mayor, permite más versatilidad en la retícula que la versión para smartphone, por lo tanto, esta está dotada de mayor número de campos reticulares y una distribución más espaciada de los elementos.

El objetivo, al igual que en el newsletter, era que la información se percibiera de forma limpia y clara, para ello era importante una buena estructuración de los elementos que iban a formar parte de la composición. Como ya se ha comentado antes, se opta por un contraste de equilibrio e inestabilidad generando un punto de tensión en la figura del premio que nos lleva hasta el botón de «acceder al festival», que es el objetivo de las landing pages.

Paleta de color elegida

La paleta cromática se ha seleccionado en base al color corporativo del festival (que nos venía dado por la versión original del logotipo), la psicología del color y el contraste que pudiésemos obtener. Con estas tres premisas se optó por la siguiente paleta de color:

Amarillo mostaza: nos viene dado por el logotipo del festival y es un requerimiento que este aparezca al menos una vez en su versión original, por lo que hemos construido la paleta de color en base a este, con él transmitimos diversión, amabilidad y entendimiento.

Azul: se incluye para transmitir calma y contrarrestar la estridencia del amarillo.

“El azul es el color de todas las buenas cualidades que se acreditan con el tiempo de todos los buenos sentimientos que no están dominados por la simple pasión. (Heller, 2000, pág. 23).”

Contraste cálido-frío: el amarillo mostaza es un color cálido que contrasta con el azul, que es un color frío. Como apoyo a estos dos se usan el blanco y el negro.

Familias tipográficas seleccionadas

Se ha optado por dos tipografías de alto contraste entre ellas, Roboto y Roboto Slab, una con serifa y otra de palo seco. Roboto Slab se ha seleccionado para confeccionar los títulos y subtítulos por su peso y Roboto por su excelente legibilidad para los cuerpos de texto.

Roboto tiene una naturaleza dual. Tiene un esqueleto mecánico y las formas son en gran parte geométricas. Al mismo tiempo, la fuente presenta curvas abiertas y amigables. Se ha elegido por ser un palo seco con excelente legibilidad.

La familia Roboto Slab se puede utilizar junto con la familia Roboto normal, ya que ofrece un claro contraste por su remate de bloque. Esto la hace idónea para funcionar en combinación con Roboto y obtener una clara jerarquía en los textos.

Conclusiones

Después de haber realizado esta práctica, creo que es importante la organización del trabajo e ir desarrollando un método para poder abarcar trabajos de estas características o más complejos. Dividir el trabajo en fases es fundamental: plantear el problema, documentarse, investigar, idear y probar soluciones; creo que es clave tener un método con el que proceder, ya que, si no, puede ser frustrante no saber por dónde empezar.

Si me planteasen esta práctica de nuevo puede que el resultado fuese completamente distinto, ya que cambiar una decisión en las primeras fases puede condicionar el planteamiento y, por tanto, el resultado. En mi caso en concreto elegí la estatuilla del premio como protagonista del diseño y reclamo para el evento, supongo que si este punto lo hubiese enfocado de otra manera el resultado hubiese sido muy distinto.

En definitiva, es un proceso en el que no solo se obtiene el resultado requerido, si no que el propio camino que te lleva a él es un aprendizaje. A mí personalmente el resultado obtenido me resulta satisfactorio y el aprendizaje global de la asignatura aún más.

Enlaces relacionados

Documentación

ALBERICH, Jordi; CORRAL, Albert; FERRER FRANQUESA, Alba; GÓMEZ FONTANILLS, David y SÁNCHEZ VILA; Alex. Diseño gráfico [en línea]. Barcelona: UOC (s. f.). Disponible en: http://materials.cv.uoc.edu/daisy/Materials/PID_00275178/pdf/index.html

PERDOMO MARIN, Susana. Actividad3 [en línea]. UOC [Consulta: 16 de noviembre de 2020].

PERDOMO MARIN, Susana. Clasificación Tipográfica [en línea]. UOC [Consulta: 16 de noviembre de 2020].

Google Fonts [en línea] [consulta: 23 de diciembre de 2020]. Disponible en: https://fonts.google.com/specimen/Roboto

Google Fonts [en línea] [consulta: 11 de enero de 2021]. Disponible en: https://fonts.google.com/specimen/Roboto+Slab#standard-styles

Unbounce [en línea] [consulta: 23 de diciembre de 2020]. Disponible en: https://unbounce.com/landing-page-examples/best-landing-page-examples/

Impactplus [en línea] [consulta: 23 de diciembre de 2020]. Disponible en: https://www.impactplus.com/blog/landing-page-examples

Toolbox Marketing [en línea] [consulta: 23 de diciembre de 2020]. Disponible en: https://www.toolbox.com/marketing/website-optimization/articles/landing-page-design-examples-2/

Bibliografía

DONDIS, Donis A. La sintaxis de la imagen. Barcelona: Gustavo Gili, 2019. ISBN:978-84-252-2929-9

HELLER, Eva. Psicología del color. Barcelona: Gustavo Gili, 2020. ISBN: 978-84-252-1977-1

Cita recomendada: GAMA VILLALONGA, MARTÍN. Diseño y maquetación de newsletter y landing page. Mosaic [en línea], abril 2021, no. 192. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n192.2116