[AUDIO_EN_BLANCO] [MÚSICA] Bienvenidos y bienvenidas a este curso, a este vídeo de fundamentos del diseño de la primera semana de visualización de datos. Hoy vamos a hablar de fundamentos de diseño gráfico. Para ello vamos a empezar con una breve introducción y analizaremos con un ejemplo muy curioso, muy explícito, qué se puede comunicar y qué es mejor comunicar con imágenes y qué es mejor ser comunicado con mensajes textuales. Vamos a estudiar entonces, por lo tanto, cómo y qué comunicar con imágenes, y acto seguido, vamos a analizar un poco el abecedario del diseño. Hablaremos de color, composición y forma, bastante brevemente, porque escapa de las intenciones de este curso profundizar en el diseño mucho, pero sí que creemos importante que tengáis una noción general de lo que es la importancia del diseño y un conocimiento fundamental para poder diseñar bien. Finalmente, cerraremos el curso, el vídeo este, con una pequeña conclusión sobre la responsabilidad del diseñador a la hora de visualizar datos y representar infografías. Bien, empecemos pues cómo, con la imagen de cómo hay que comunicar con imágenes. Con este bloque vamos a analizar principalmente una diferencia importante de los límites que tiene el lenguaje visual y el lenguaje textual. Cabe decir pero que en la imagen se puede representar texto, entonces con las imágenes podemos añadir información textual. Pero empecemos con este ejemplo muy simple, os pido que cojáis un bolígrafo y un papel o simplemente hagáis el ejercicio con vuestra propia mente. Intentad imaginar una forma de representar de forma icónica, de forma sintética el concepto, por ejemplo de casa, una casa. Rápidamente, supongo que fácilmente, os imagináis como podríais representar este objeto habitable. Pensad, por ejemplo, en cómo representar a un ser humano, nos encontramos con la misma facilidad con una imagen de seguramente del típico icono del ser humano sintetizado y simplificado. Representar objetos de forma icónica es extremadamente simple, aunque sean objetos complejos. Pero ahora os pido que hagáis el mismo ejercicio y intentéis de forma muy clara y concisa, no simplemente con una idea amplia sino intentar ser lo máximo de concretos y pensad en cómo representaríais un icono para comunicar, por ejemplo, el concepto de felicidad. Podría venir la idea de un corazón, pero un corazón es un corazón físico de un cuerpo humano y no necesariamente se relaciona solo con felicidad, sino que implica pues, actualmente, por ejemplo, sería más parecido a un me gusta o a amor etcétera. Cuando intentamos ser claros con un concepto que es abstracto, nos damos cuenta de que los iconos son mucho más complejos, son mucho menos eficaces a la hora de expresar estos términos. Pongo un par de ejemplos más para que veáis que no era una trampa lo de felicidad, sino que hay más que cualquier concepto abstracto de hecho es complicadísimo de ser representado de forma icónica. Cómo representaríais de forma clara y concisa lo que sería un icono para representar por ejemplo el arte abstracto. Cómo representaríais el concepto de independencia, por ejemplo. ¿Cómo representaríais el concepto de espíritu o de alma? Son conceptos que entendemos perfectamente cuando los escribimos de forma textual, pero que son muy difíciles de representar de forma gráfica y dicho esto es interesante entender que cuando visualizamos datos o cuando hacemos una infografía nos podemos valer de los dos medios, podemos utilizar descripciones donde se explican los datos que estamos viendo de forma abstracta, o sea analizamos conceptos que son muy difíciles de representar visualmente y vamos a ver con la siguiente reflexión qué cosas sí que son más interesantes y más rápidas y eficaces, ser representadas de forma visual. La comunicación visual es extremadamente eficaz cuando hablamos de representar relaciones espaciales. Si queremos describir por ejemplo un accidente de tráfico, si utilizo mis manos para indicar dónde hubo el choque y de qué manera se movió el coche que insidió en el otro coche, las manos me permiten explicarlo muy fácilmente y si evito el uso de las manos y lo explico con palabras se complica mucho para decir la parte posterior, trasera, etcétera, es como menos preciso. Representar áreas, representar volúmenes, representar formas es mucho más eficaz de forma visual que de forma textual. Un texto donde se explica la descripción de una persona físicamente es menos eficaz que ver una foto de esta persona. Explicar el carácter de esta persona es mucho más eficaz con un texto que con una fotografía, bien. Por otro lado, otra de las cosas que la comunicación visual es muy importante, es la emoción que permite transferir con su impacto visual, con su textura y con su estética. Cuando estamos comunicando de forma visual aparte del mensaje que estamos dando, también estamos dejando toda una serie de elementos que son estéticos, pero que contienen información que es transferida automáticamente a la persona receptora. Entonces, tenemos que tener también muy en cuenta cómo estamos emitiendo esta capa, digamos, más de textura de calidad de sensaciones que no es explicita en el contenido, sino que esta implícita en el diseño. Y finalmente un buen diseñador es aquel capaz, o una buena diseñadora, capaz de equilibrar entre el contenido y la forma. Tener la capacidad de lo que se quiere comunicar, cómo le da una forma adecuada y cómo casa estos dos mundos, el textual, el informacional y su forma. Veamos un ejemplo de David Mackandal precioso del Skyland de edificios, de rascacielos. Se puede ver aquí muy fácilmente las relaciones de tamaño, las relaciones de volumen y si tuviésemos una tabla con la explicación de cada uno de los datos de las alturas, seguramente no sería tan eficaz. Aparte es una imagen que es bella y que nos habla de, os recomiendo ver la [INCOMPRENSIBLE] de David Mackandal que habla de "information is beautiful" o "beautiful information", que nos enseña ejemplos super bonitos, muy bien diseñados. Vamos a ver otro ejemplo que tiene interés por su estética, desde mi punto de vista. Este es un proyecto que os recomiendo visitar, por desgracia la página principal no está activa, pero es un grupo de eslovacos que hicieron un trabajo de diseño muy potente a la hora de diseñar visualmente cuál es la relación de estímulos cerebrales de una persona que está escuchando una misma canción, en un color se representa el flow y en el otro la capacidad de concentración. Esto es la representación, como podéis ver aquí, de la canción en sí, y los resultados de los estímulos cerebrales captados con un dispositivo especial para ello. Cada persona tiene respuestas distintas a la misma canción y a mí lo que me parece muy interesante de este trabajo es la posibilidad estética y bella de ver en todo este lenguaje de el tocadiscos, el círculo, la composición equilibrada, la asimetría que hablaremos más adelante, el trabajo del color, la expresividad. Me parece un trabajo muy interesante a nivel estético, cabe analizar si realmente es eficaz a la hora de explicar los resultados obtenidos de forma científica, pero la exposición del proyecto era con todos los carteles, uno tras el otro y sí que es una exploración muy interesante del encuentro entre estética y ciencia. Y desde luego creo que se pueden extraer muchas conclusiones de estas representaciones visuales. Avancemos pues con otro ejemplo para hablar del contenido y la forma. En este ejemplo que es uno de los premios de "information is beautiful" se nos representa una imagen que impacta visualmente, y que funciona de forma muy eficaz, refugiadas inmigrantes y arriba se nos explica con detalle los porcentajes de ciertas opiniones públicas de la gente. Desgraciadamente, aunque la imagen funciona y el cartel es precioso, tenemos que destacar que a nivel científico, a nivel riguroso la representación de los porcentajes no está bien planteada, pero a veces es más importante la capacidad de cautivar la atención que la eficacia, digamos, rigurosa de la representación. Para mí en este caso estamos en una situación en el que el contenido y la forma no están al 100 por 100, bien configurados, bien atados. De todos modos, me parece un ejemplo bueno, una muy buena idea, original, y creo que se puede explotar mejor para llegar a tener un resultado parecido, pero más potente. Vamos a Antes de pasar al siguiente bloque vamos a reflexionar sobre esta frase de Donald Norman de quien ha escrito el libro [EXTRANJERO] Dice: todo tiene una personalidad, todo mensaje tiene una señal emocional. Aun cuando esto no sea la intención del diseñador, las personas que ven un sitio web sienten su personalidad y experimentan emociones. Es muy importante que entendamos que cuando diseñamos, cuando representamos una imagen siempre estamos comunicando, no solo lo que hay de información textual si no tambien todo una serie de matices. Vamos ahora a hablar del abecedario del diseño, dar unos fundamentos básicos para diseñar y con esto cerraremos el bloque de esta sesión de hoy. Vamos a hablar de método, vamos a hablar de composición, de color y de forma. Simplemente antes de entrar en el tema del método os doy un consejo, que es que si realmente os interesa el diseño y queréis empezar a diseñar bien lo primero que tienes que hacer es entrenar el ojo [EXTRANJERO]. Para aprender a diseñar tienes que aprender cómo ver. Y es cierto que jamás podremos ser buenos diseñadores sí no somos capaces de ver el diseño. Entonces os recomiendo que empecéis a mirar qué colores están utilizando a vuestro entorno, qué composiciones están diseñando en las publicidades, en los anuncios, en las visualizaciones de datos, en las infografías. Qué tipografía se utiliza, qué orden, qué desorden, cómo se busca la comunicación no textual de los mensajes. Este vocabulario que podéis ir desarrollando a medida que veáis ejemplos y observéis con ojo crítico estos ejemplos, irán creando en vuestra capacidad de análisis también una capacidad de creación. Vamos a hablar brevemente de una propuesta de método, porque al final cada uno va a encontrar su manera de trabajar. Pero primero que todo es entrenar el ojo y aprender a mirar, que es lo que estabamos comentando. Observar y ser críticos, analizar y calificar bien ciertos diseños, ver lo bonitos que pueden ser, interesantes y eficaces que pueden ser los diseños es crucial para que despues vosotros podáis tambien crear. Bocetar, o sea antes de empezar a diseñar algo os propongo que cojáis un bolígrafo, un lápiz y hagáis bocetos, especuléis, testéis, busquéis la manera en que podéis comunicar una historia en que podéis comunicar los datos. En este proceso de bocetear os propongo que hagáis, hagáis, hagáis, o sea que hagáis un proceso, otro, otro. Y luego el siguiente proceso es el de filtrar, escoger y saber descartar los que no son interesantes y poner en valor los que están saliendo interesantes. Y finalmente en el campo del diseño uno no tiene siempre la razón, sino que tiene que validar a partir de compartir las propuestas que uno está haciendo y ver, escuchar si realmente están funcionando y si están consiguiendo el objetivo deseado,. No hay una formula, si no que hay un publico y hay una propuesta y se tiene que validar a través de este acto social de ver si funciona o no funciona con la gente. Este video vamos a intentar abarcar como ideas muy fundamentales del diseño. evidentemente no vamos a poder profundizar mucho, pero vamos a hablar por ejemplo de la composición. La composición es el hecho de organizar los elementos visuales, texto, imagen, símbolos y muchos otros elementos, cualquier elemento visual organizado en el espacio, con el objetivo de facilitar la compresión de un mensaje, o sea claramente con una intención comunicativa. Es el caso del diseño, el caso del arte por ejemplo, puede no tener una necesidad explicita de compartir un mensaje de forma clara, pero el diseño normalmente sí que lo tienen. ¿Qué elementos utiliza la composición para comunicar estos mensajes? El equilibro: simetría, radial o el uso de pesos de diferente organización de pesos entorno al espacio. Hemos visto un par de ejemplos, ahora veremos algunos más. La alineación de los elementos para crear una sensación de orden y de equilibro y para darnos una claridad de lectura. La repetición y el ritmo para utilizar, acostumbrar al ojo a moverse a través de los diferentes espacios informativos que pueda haber en nuestra composición y al final tambien utilizar los espacios en blanco para dar aire y para permitir que la gente se concentre en ciertos puntos. Uno, otro ejemplo de [EXTRANJERO] es esta visualización de los principios éticos o un intento de hacer una infografía sobre las diferencias entre las derechas y las izquierdas. Este es un claro caso de composición simétrica que juega con una repetición en el mismo eje y donde se pueden comparar de forma muy fáciles los dos elementos, uno de cada lado. Otro ejemplo que me gusta citar es el de Henry Beck de 1933. Es un ejemplo digamos de diseño grafico muy interesante por que Henry Beck era ingeniero y estaba trabajando en los ferrocarriles del metro de Inglaterra, de Londres, e hizo esta propuesta de diseño. Este diseño utiliza una rejilla, utiliza un patrón de diseño donde siempre hay 45 grados, 90 o intenta evitar, digamos, eliminar toda una serie de información para organizar un mapa completísimo de una manera relativamente simple y eficaz. El resultado es que la gente, el resultado ha sido un éxito porque la mayoría de metros hoy en día utilizan el mismo sistema que inventó Henry Beck en 1933. Aquí se demuestra que ordenar la información en un espacio de forma sistematizada puede comunicar mucho mejor que intentar ser fidedignos con el origen de los datos. Y aquí nos volemos a poner otro ejemplo de David [INCOMPRENSIBLE], esta capacidad de visualizar con un ritmo toda una serie de datos, nos gusta, nos funciona y nos transmite cierta tranquilidad al ver cierto orden. El ejemplo que hemos puesto antes, una en este caso estaríamos hablando de una composición radial, circular, centrada y con una simetría en la parte de abajo. Observar estos diseños e ir apreciando es súper importante para que aprendáis a mejorar vuestra capacidad de analizar y de crear. Hablemos brevemente del color y avancemos con estos fundamentos del diseño. Hay dos tipologías: la psicología del color nos habla de los colores fríos y los colores cálidos. Los colores cálidos transmiten pasión, felicidad, entusiasmo, fuerza, energía. Los fríos, por lo contrario, pues transmiten calma, estabilidad, profesionalidad, honradez. Elegir el color dice mucho del mensaje que queremos transmitir y es súper importante que a la hora de elegir los colores, escoger bien qué paleta vamos a utilizar y cómo vamos a crear digamos un discurso a través de la gama cromática. Escapa de la intención de este curso abarcar con mucha profundidad los temas del diseño, pero sí que vamos a hablar de los colores complementarios que son uno opuesto del otro dentro de la rueda del color. Los análogos que son los colores que están en los laterales del color principal que elegimos y las triadas que dibujarían un triángulo en el círculo cromático. Estos son tres típicos ejemplos de paletas cromáticas interesantes. Voy a situarles un ejemplo de un eslovaco paletton.com, que me parece un recurso muy interesante, nos permite elegir diferentes, por ejemplo, colores, escoger que queremos trabajar, por ejemplo, en amarillo y en la parte de arriba podemos decir si queremos trabajar con análogos o con la triada, por ejemplo y nos permite subir la saturación, bajar, etc, etc. Una de las cosas que me parecen mas interesantes de esta herramienta es que podemos ir a ejemplos y dentro de ejemplos podemos ir a ver, por ejemplo, animaciones para ver cómo se vería en movimiento esta paleta de colores o bueno hay otras animaciones que a lo mejor para la visualización de datos no nos interesa tanto. Ejemplos de patrones de formas pero que para visualizar datos nos puedan servir mucho para poder anticipar cómo se va a ver nuestro resultado, la gracia de esta herramienta es que realmente rápidamente nos permite elegir una paleta de colores que funcione bastante bien sin tener que dar muchas vueltas. Y lo más interesante es que nos permite exportar esto de forma estándar para poder despues pues compartirlo o simplemente utilizarlo con sus colores hexadecimales, etc. Bien vamos a seguir y terminando con el ultimo bloque de este apartado del video que es hablar de la importancia de las formas. La forma de alguna manera se relaciona estrechamente con la composición y en cuanto a formas relevantes para la transmisión de mensajes tanto los iconos como la tipografía son dos de los elementos claves. En este caso estamos viendo los iconos creados en el 64, 1964 para los juegos olímpicos de Tokio, que son considerados el primer sistema icónico sistemático utilizado en unos juegos olímpicos y que sintetiza de forma muy elegante con formas muy concretas, pero a la vez casi abstractas a todos los deportes que se jugaron en esos juegos olímpicos. La importancia de generar un sistema icónico para comunicar o de elegir un buen sistema icónico es crucial a la hora de comunicar grandes cantidades de datos si queremos visualizar. Y os remito a recordar [INCOMPRENDIBLE], el autor del primer sistema de [EXTRANJERO] que intentaba comunicar simplemente con iconos. Es muy interesante su trabajo y es muy interesante lo que se puede conseguir con el tema de los iconos. y para cerrar este bloque del abecedario del diseño, simplemente destacar la importancia de el caracter que tiene la tipografía, cuando utilizamos una Comic Sans estamos diciendo de forma clarísima que nos sentimos amables, simpáticos, informales, que simplemente comunicamos una información desde un sitio, como dice su propia tipografía, más cercano a lo cómico que a lo riguroso y serio. En cambio cuando utilizamos por ejemplo Helvética en su cuerpo con su máximo grosor, vemos lo contrario, una rigurosidad, una neutralidad, una modernidad muy potente. Elegir una buena tipografía comunica mucho más de lo que pensamos y es muy importante tenerlo en cuenta a la hora de hacer un diseño de infografía o de una visualización de datos. Y para terminar, y este sí que you es el final de los finales, vamos a hablar de la responsabilidad de vuestro proyecto, de vuestro trabajo a la hora de compartirlo con otras personas. Hay un mensaje explicito que siempre existe, cuando vamos a diseñar algo consciente o inconscientemente queremos comunicar algo concreto. Hagamos un ejercicio de clarificar y tener muy claro lo que queremos comunicar, porque a veces a la falta de claridad en esta decisión hace que el propio diseño quede faltado de esta contundencia o de claridad a la hora de transmitir una información. Después también hay el mensaje implícito, que es muy importante tener en cuenta, el poder comunicativo de las imágenes, el tono emocional que le damos, la estructura, cómo creamos foco, cómo destacamos cosas, qué estamos, preferimos colores fríos, colores cálidos, utilizamos una tipografía de una manera o de otra. Estamos diciendo mucho cuando diseñamos. Y finalmente entender que el receptor tiene un punto de vista y una cultura que van a hacer que su percepción de la composición forma, color y de nuestro diseño sea uno o sea otro, con lo cual como decíamos antes, escuchar también la recepción de cómo nuestro diseño funciona en el receptor final. Modos de ser responsables, intentar ser siempre honestos, citar fuentes y de alguna manera entender que cuando estamos utilizando este lenguaje explicito e implícito tenemos mucho poder a la hora de sugestionar. Y es importante en esta capacidad de sugestionar saber muy claramente cómo ser honestos y mantener cierta neutralidad a la hora de invitar a la gente a fantasear con las imágenes, con los mensajes comunicados. Pues hasta aquí este video que resume de forma muy condensada los fundamentos del diseño medianamente centrados en lo que sería la visualización y representación de infografías. Nos vemos en los siguientes videos. [SONIDO] [AUDIO EN BLANCO]
