Universitat Oberta de Catalunya

Diseño de la infografía LED Señalización sostenible

Introducción

En este artículo se describe la experiencia que he tenido durante la asignatura de Imatge i Llenguatge visual. Haré una revisión de los conceptos más importantes que se han estudiado para abordar la creación de una infografía, que este año, al ser el año de la luz, debía tener alguna relación con ella.

La asignatura es una extensión de la asignatura de diseño gráfico, pero en este caso, se trabaja especialmente la parte de comunicar a través de la imagen. Para ello hemos trabajado principalmente los siguientes conceptos:

Tipografía. Uso de la tipografía para resaltar información relevante.

Estructura y organización

  • Transmitir información mediante gráficos, mapas y pictogramas.
  • Uso de figuras retóricas para reforzar el mensaje a transmitir.
  • Variables de Bertin para clasificar información visualmente.

No os asustéis, parecen muchos conceptos, pero conforme veáis como se han ido aplicando, os daréis cuenta que muchos de ellos los tenemos interiorizados porque son habituales en nuestro entorno.

Etapas y retos

El encargo de la práctica, tenía una serie de condiciones que detallo a continuación:

  • Mostrar en una infografía la relación entre un descubrimiento o teoría relevante respecto a la luz y su aplicación tecnológica y/o práctica
  • Mediante un gráfico explicativo y una línea de tiempo ilustra la relación entre ellos de una forma divulgativa para un público generalista.
  • Minimiza el uso de textos explicativos
  • Los gráficos han de ser todos de creación propia. (excepto mapas)
  • Formato apaisado de 1200 x 700 píxeles.
  • Fichero en formato SVG

Para crear la infografía he seguido las siguientes etapas:

Documentación. Sin duda este es uno de los principales puntos a la hora de realizar una infografía. Para poder plasmar gráficamente un resumen de un texto o una historia, es muy importante el tener toda la información y estructurar una historia clara en nuestra mente, interiorizarla para que después podamos plasmarlo de forma visual.

Para ayudarnos en esta fase, el equipo docente, nos indicó que usáramos la herramienta etherpad, en la que ya habían trabajado alumnos de otros semestres y en la que se podían encontrar numerosos links con información relacionada con la luz y sus descubrimientos. La herramienta aunque útil, es bastante confusa, porque es como un gran documento en el que todo el mundo puede modificar datos y moverlos a su antojo, por ello fue muy importante el tener especial cuidado con no borrar texto introducido por otros compañeros.

En mi caso me interesé especialmente por un tema de actualidad como son las luces led, y en concreto con la señalización vial.

Captura de pantalla de la herramienta etherpad
Captura de pantalla de la herramienta etherpad

Estructura. El siguiente paso es hacer un esquema de la infografía, es decir definir sobre un espacio de trabajo, donde ubicaremos los elementos que tenemos pensado incluir en la infografía. Particularmente este esbozo lo realizo en papel y lápiz.

Boceto del proyecto (izquierda y infografía final con retícula (derecha).
Boceto del proyecto (izquierda y infografía final con retícula (derecha).

Tal y como se puede apreciar en el diseño, he utilizado una composición equilibrada. La retícula creada, incluye un encabezado y un pie de página. En el centro superior, se indicarán toda la información estadística relacionada con la luz led. Se ha tenido en cuenta también el diagrama de Gutenberg según el cual, la información relevante debe situarse en la parte superior izquierda. La tendencia del lector, es hacer un barrido desde la parte superior izquierda a la parte inferior derecha.

Se ha utilizado la letra M como referencia para crear los espacios necesarios entre los elementos. Para ello yo creo una capa y sitúo varias M en los puntos necesarios para poder tener una referencia. Al exportar o visualizar el resultado, simplemente oculto la capa que las contiene. Utilizo también diferentes guías para dividir el espacio en zonas de trabajo.

El uso de diferentes capas, nos permitirá aislar los diferentes elementos, en esta infografía he usado 6 capas diferentes, lo que permite bloquear zonas que tenemos terminadas, así como realizar pruebas visualizando y ocultando capas.

Color y tipografía. Con el esbozo creado, y teniendo la información sintetizada, tenemos que decidir los colores y tipografías que utilizaremos. En este sentido la frase “Menos es más” creo que es de mucha utilidad. Es importante no utilizar mucho color ni muchas tipografías. La misión de una infografía es transmitir la información de forma visual. Si confundimos al lector con muchos colores y fuentes diferentes, no conseguiremos transmitir el mensaje de una forma clara.

Inicialmente al tratarse de la luz led, lo primero que viene a la mente es crear unos tonos más “futuristas” de tipo neón, pero para evadirme de la idea típica y teniendo en cuenta el matiz histórico de la infografía, preferí optar por tonalidades más relacionadas con pergaminos. Escogiendo unos tonos canela  y combinándolos con un azul apagado.

La tipografía seleccionada ha sido la Arimo que es una fuente lineal neogrotesca con buena legibilidad. Jugando con los tamaños y colores de la tipografía, se han establecido diferentes categorías. Así los textos en negrita, indican que es un título, y el tamaño indica la jerarquía. Se ha unificado el texto en color azul para las explicaciones de texto, tanto de los esquemas de funcionamiento como de la línea de tiempo.

Elementos visuales. Los diferentes elementos visuales, leds, retratos, etc, se han creado en ficheros independientes para facilitar el desarrollo. Para conseguir igualar las tonalidades, y darle a todos los elementos un tono canela, he reducido la opacidad de los elementos al 10 ~ 25%, de este modo el color se diluye con el fondo, cogiendo su tonalidad. Hay que destacar que el texto, debe ser un complemento de los elementos visuales y no al contrario. Debe aportar datos concretos que ayuden a entender el gráfico.

Datos estadísticos, mapas . La gran mayoría de infografías, presentan de un modo u otro datos numéricos. El uso de gráficos de barras, es muy útil para comparar valores de varios elementos, en cambio los gráficos de pastel o donuts, son ideales para comparar proporciones o porcentajes.

Ejemplo de datos estadísticos del proyecto
Ejemplo de datos estadísticos del proyecto

Los mapas sirven para ubicar al usuario en los lugares donde se han producido los hechos explicados. En este caso, se ha señalado con un cambio de color las zonas implicadas, relacionándolas a través de flechas y marcadores numéricos.

Conclusiones

Realizar esta infografía, me ha servido para poner en práctica los conocimientos teóricos de la asignatura. He entendido la importancia del color y el tamaño. La necesidad de que haya espacios iguales entre los elementos que permitan dar una armonía a todo el conjunto.

Para los futuros estudiantes de la asignatura les aconsejaría la práctica de la aplicación Illustrator, ya que deberán realizar todos los gráficos con ella.

Analizar infografías de terceros les ayudará a aprender como se aplican los conceptos estudiados. Una buena fuente para encontrar infografías es Las otras infografías

Estoy satisfecho con lo aprendido en la asignatura, y con el resultado de la práctica, lo que me ha llevado, animado por el consultor David, a publicarla en wikiars.

Documentación

http://commons.wikimedia.org/wiki/Maps_of_the_world#/media/File:BlankMap-World6.svg

https://www.google.com/fonts/specimen/Arimo

https://commons.wikimedia.org/wiki/File:LED._Senyalitzaci%C3%B3_sostenible.svg

https://commons.wikimedia.org/wiki/Maps_of_the_world#/media/File:BlankMap-World6.svg

http://lasotrasinfografias.com/

https://helpx.adobe.com/es/illustrator/using/drawing-pen-pencil-or-flare.html

http://tv.adobe.com/es/watch/tutoriales-para-disenadores/curvas-con-la-pluma-en-illustrator-cc/


Cita recomendada: PUERTAS ESTIVILL, Pedro. Diseño de la infografía LED Señalización sostenible. Mosaic [en línea], septiembre 2015, no. 131. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n131.1522.

Deja un comentario