Diseño de información: crea una campaña basada en datos en Figma

1. ¡Bienvenido a el diseño de la información!: Todos los diseñadores, nuestros diseñadores de información. El mundo está lleno de información y es trabajo de un diseñador organizarlo, darle sentido y presentarlo de una manera agradable y accesible para todos. Las habilidades básicas utilizadas para organizar y visualizar la información son extremadamente universales y pueden implementarse en cualquier proyecto de diseño. Soy la diseñadora gráfica Carolyn, que hoy está muy emocionada de compartir contigo los conceptos básicos del diseño de información. Tomé esta clase de diseño de información realmente increíble en RISD el verano pasado, y estaba muy emocionado de aplicar mis nuevas habilidades en todos mis proyectos de diseño. Entonces hoy voy a compartir contigo esas habilidades que aprendí y te enseñaré a hacer tu propio proyecto de diseño de información personal para tu portafolio. En el camino, aprenderás estas habilidades clave de diseño, dando forma al contenido, narración visual, practicando empatía por los usuarios, construyendo sistemas de diseño estratégico y creando proyectos visualmente cohesivos . Practicarás tus nuevas habilidades convirtiendo tu investigación en bocetos, construyendo un grupo conciso de diseños de información, diseñando una página web y una imagen de redes sociales para presentar tus diseños en y trabajando en Figma para Diseño Gráfico y Web. Esta clase es para todos los creativos en cualquier nivel de habilidad, desde principiantes hasta avanzados, que quieran aprender más habilidades de narración visual y diseño gráfico estarán trabajando en Figma, que es un diseño en crecimiento que es gratuita y fácil de usar. En esta clase tendrás un increíble proyecto de diseño de información que realmente muestra tus habilidades de comunicación y resolución visual de problemas a través del diseño gráfico, diseño web y diseño digital. No puedo esperar a ver qué se te ocurre para tu proyecto. Así que comencemos. 2. Proyecto: Para esta clase, quiero que crees un diseño de página web y un diseño de imagen de redes sociales como parte de una campaña más grande basada en datos. Este proyecto de campaña contará con tres gráficos de información visualmente cohesivos que creará sobre un tema de su elección. Completará tu proyecto en unos sencillos pasos. Investigará tu tema, lluvia de ideas y dibujará algunas ideas, y luego tomará esos bocetos, los transformará en un sistema completamente diseñado que conformará tu campaña impulsada por datos. Necesitarás algunas herramientas y materiales para ayudarte durante toda la clase. Necesitarás materiales de boceto como lápices, rotuladores y papel para ayudarte a hacer una lluvia de ideas sobre tus gráficos. Y luego necesitarás Figma, que es una herramienta de diseño online que usaremos para diseñar tu proyecto de campaña. Es fácil y gratuito de usar. Ni siquiera tienes que descargarla. Simplemente puedes usar la versión del navegador. Solo tienes que ir a figma.com para comenzar. Al final de la clase, subirás lo siguiente a la galería del proyecto. Tus bocetos de tu información, gráficos e imágenes de tu página web y diseños de redes sociales. Siéntase libre de subir sus bocetos o ideas en cualquier momento de la clase para obtener comentarios de mí y de sus compañeros de clase. Antes de comenzar tu proyecto, vamos a inspirarnos aprendiendo un poco más sobre diseño de información y veamos algunos ejemplos realmente emocionantes. 3. Diseño de información: diseño de la información es la práctica de presentar información de manera que fomente la comprensión efectiva y eficiente de esa información. Para inspirarnos antes de comenzar en nuestros proyectos, les voy a mostrar algunos ejemplos de infografías. Este es un libro súper genial llamado gráficos de información, y puedo vincularlo en la sección de proyectos y recursos. Por lo tanto, repasa una amplia historia de ejemplos de gráficos informativos, comenzando con tumbas del antiguo Egipto. Esta es una forma muy temprana de diseño gráfico que básicamente es solo un mapa con un montón de imágenes en él. Este es un ejemplo de un gráfico que estuvo en la portada de científicos estadounidenses. Es súper complicado, así que esta es una versión ampliada de la misma. Pero básicamente es solo este gran círculo. Y usa codificación de colores. E incluso gris parte de la información irrelevante que hay detrás de aquí para que la información coloreada realmente pueda aparecer la información coloreada realmente pueda aparecer y nos facilita la lectura. Pero si esto es obviamente un gráfico muy complejo, esto está mostrando ADN humano comparado con ADN de perro. En realidad. Esta es, creo, una infografía realmente interesante que muestra la comparación de la tecnología de audio y video. Así puedes ver un poco como tu típico, como gráficos de barras y cosas así, o un gráfico de líneas aquí abajo. Pero creo que es muy agradable que incluyeran estas ilustraciones en los laterales aquí. Eso realmente nos ayuda a conectarnos como, Oh, este es un escritorio Blu-ray. Se trata de video, o esto es un iPod y se trata de música. Creo que el esquema de color limitado aquí y las ilustraciones hacen un gran trabajo al ayudarnos como público a entender la información rápidamente. Aquí hay otro ejemplo de cómo el diseñador hizo un gran trabajo al usar un esquema de color muy limitado. Obviamente, sólo es negro, blanco, y pan. Y supongo que aquí está este tono posterior de rojo. Pero utilizan imágenes e imágenes para conectar el tema el público mucho más rápido. Entonces puedes ver aquí, esto es todo sobre Michael Jackson. Todo en este cartel o este artículo periodístico está relacionado con los cronogramas. Entonces podemos ver aquí como 1972 y hay una foto al lado. Entonces así se veía en esa fecha. Y esto es lo que estaba pasando en esta fecha. ¿Cuál es el estilo de música con el que estaba trabajando? Creo que esta es una forma realmente interesante y estratégica de exponer toda esta información sobre Michael Jackson. Entonces aquí tenemos esta gráfica simple y llana. Podemos ver los precios por la noche, los 1800, y luego podemos ver eso comparado justo al lado del 2008. Y luego estos son todos los países enumerados y codificados por colores con estos pequeños anillos al lado de ellos. Pero podemos ver una visualización mucho más interesante de esto. Estos números en esta gráfica diagonal en medio de este cartel. Los colores corresponden a los colores enumerados en esta tabla. Y es simplemente realmente fascinante ver una comparación visual. Esta es una manera realmente genial de mostrar la información y no solo decirte en el gráfico. En realidad es hacer ambas cosas, lo cual es muy bueno para las personas que tal vez quieran ver los números listados. En lugar de abstraerlo de una manera más visual. Este libro, que no es un libro de diseño, en realidad es un libro de cocina, hace un gran trabajo mostrarte algunas visualizaciones realmente geniales de la información presentada en el libro. Este es un ejemplo de diferentes aderezos que puedes hacer a base de recetas del libro. Esto es una especie de eje. Así que puedes pasar de ser ligero, tierno, cremoso demasiado crujiente, y todo está codificado por colores nuevamente muy bien. Y así dependiendo del tipo de aderezo que estés buscando, puedes encontrarlo en el eje. Entonces si quiero algo crujiente y cremoso, puedo mirar en este cuadrante inferior derecho. No podemos hablar de diseño de información moderno sin hablar de Georgia Loopy. Es una diseñadora de información enfocada en el ser humano que hace que la información sea más personal y relatable. Aquí hay un proyecto al que sí llamó datos de ciervos con una amiga, Stephanie postsináptica. Básicamente pensaron en su semana, escogieron un tema y representaron ese tema en una semana de su vida y se lo mandaron el uno al otro durante un año. Entonces este es un ejemplo impresionante de hacer que la información sea divertida, haciéndola parte de tu vida diaria. Eso fue solo una visión general realmente rápida de una enorme sección de diseño gráfico. Espero que estés inspirado y ya tengas algunas ideas para tu propio proyecto. Entonces comencemos en ese proyecto y en la siguiente lección. 4. Elige tu tema: Aprendimos que algunos conceptos básicos del diseño de información y vimos algunos ejemplos realmente geniales en la última lección. Entonces creo que estamos listos para comenzar nuestro proyecto de diseño. Tu primer paso es elegir tu tema. Puede ser cualquier cosa desde cambio climático, Animales, música, cocina, lo que te interese. Voy a escoger el tema de las armas en América. Siento que hemos estado escuchando tanto, lamentablemente últimamente sobre tiroteos masivos, tiroteos escolares en América. Y quería conocer más sobre las estadísticas detrás de esa violencia. Y enseñarme algo a través del diseño, que es lo que me encanta del diseño. Puedes diseñar cualquier cosa sobre cualquier tema, y al final de tu proyecto, aprenderás más sobre él. Una vez que hayas decidido tu tema, quiero que escojas una lente, un ángulo, una historia para contar sobre tu tema. Este proyecto es un ejercicio y narración visual. Entonces, ¿cuál es la historia que quieres contar a través de tu diseño? Voy a hablar sobre cómo la violencia con armas de fuego es un problema muy singularmente estadounidense. Entonces eso va a enfocar toda mi investigación y los tres gráficos de información que hoy voy a idear en esta clase. Elige tu tema y elige la historia que quieres contar para que podamos comenzar a investigar en la siguiente lección. 5. Investigación: Has escogido tu tema. Ahora vamos a llegar a algún contenido. Investiga, al menos tres piezas diferentes de información que comunican la historia que quieres contar sobre tu tema. Aquí hay un ejemplo de una pieza de información que encontré de la que puedo ser uno de mis gráficos de información. Aquí está la información, se acaba de escribir en un documento de texto. Y aquí un ejemplo de cómo luego convertí eso en mi gráfico de información. Este es un proceso de dar forma al contenido. El contenido es tu información y el formulario es tu futuro diseño. Aquí hay algunos consejos rápidos sobre cómo recopilar investigación e información. Crea un documento de texto para recopilar la información que deseas usar. Este puede ser su documento catch-all donde puede anotar estadísticas específicas e información que desea visualizar. Y también puedes enlazar a tus fuentes aquí. Recuerda qué historia estás tratando de contar con tu tema. Por ejemplo, yo. Me estoy enfocando en cómo la violencia con armas de fuego es un problema exclusivamente estadounidense. Entonces mi información va a enfocarse en comparar las comparar estadísticas estadounidenses de violencia con armas de fuego con otros países. Para mis datos, voy a incluir alguna información sobre muertes relacionadas con armas de fuego por cada 100 mil personas en diferentes países, incluyendo América. Los estadounidenses tienen diez veces más probabilidades morir por una muerte relacionada con un arma de fuego que las personas en otros 22 países desarrollados. Incidencias de tiradores activos por año en los últimos 20 años. Entonces podría arrojar esta pieza de información sobre cómo piensan los estadounidenses de la violencia con armas de fuego en Estados Unidos. Durante esta clase, quiero que concretes tres piezas de información y hagas tres gráficos informativos. Sin embargo, lo mejor de este proyecto es que se puede escalar más tarde. Para que puedas hacer cientos de gráficos de información a partir de cientos de piezas de información. Completa toda la investigación que necesites para comenzar a esbozar tus tres gráficos de información en la siguiente lección. 6. Show no decir: Quería tomar un desvío rápido de nuestro proyecto para discutir un problema muy grande mío y un error y diseño muy comunes, y especialmente el diseño de la información, que es cuando la gente dice y no te muestran. Entonces en todo el diseño, tu objetivo es mostrar a la gente, no decirle a la gente. Aquí hay un ejemplo de contar y no mostrar. Una de mis piezas de información es que los estadounidenses tienen diez veces más probabilidades morir por una muerte relacionada con un arma de fuego que las personas en otros 22 países desarrollados. No es visualizar nada para que el número diez sea realmente grande. Cuando estás trabajando con números y tu información, quieres mostrar la cantidad, quieres mostrar una comparación. Quieres ayudar a la gente a conectar ese número con algo significativo. Aquí tienes un ejemplo de cómo podrías mostrar esa información en lugar de simplemente decir que quieres visualizar diez veces. Y otras palabras, uno contra diez como visual. De esa manera tu audiencia podrá ver cuánto mayor es diez cuando se compara con solo uno. Recuerda, este proyecto se trata contar historias visuales y no vas a contar R, ni siquiera visualizar ninguna historia con solo hacer que el número diez sea realmente grande, por ejemplo, quieres pensar en cómo otros podrían entender fácil, efectivamente, eficientemente la información, que de nuevo, es lo que es el diseño de la información. Volvamos a diseñar nuestro proyecto en la siguiente lección. 7. Boceto: Nos sentimos inspirados. Vimos algunos ejemplos y tenemos nuestra investigación lista para comenzar. Así que vamos a saltar al bosquejo. Entonces tengo unos trozos de papel aquí y algunos utensilios de dibujo y esta guía circular regla para ayudarme a dibujar un poco mejor. Pero no importa cómo dibujes en este punto. Se trata de poner tus ideas en papel. Así que no te preocupes por que se vea perfecto ni nada. De hecho voy a configurar esto. Entonces este será mi primer boceto por aquí, y luego la interpretación sacramental de esa primera pieza de información. Por lo que la muerte relacionada con armas de fuego estará en ambos cuadrantes de aquí. Y luego mi segundo dato. Entonces comencemos con el primer boceto. Creo que para visualizar toda esta información, voy a probar con un gráfico de barras. Entonces voy a agarrar tres colores con mis marcadores. Voy a configurarlo como si un color representara a Estados Unidos. Entonces voy a usar este color dorado y poner eso justo en el medio ahí. Eso va a ser como una línea de longitud media porque esa información es 10.6. Así que voy a hacer una nota de eso aquí. Porque así es como quiero que se vea en mi infografía. Quiero que el país esté del lado izquierdo y después quiero que los números estén del lado derecho. Pienso, de este bar. Entonces voy a usar un color diferente, rojo, Digamos que eso va a representar a los países que son más altos. EU. Solo lo estoy mirando aquí, pero en realidad lo pondrás en escala en la computadora. Creo que esto es bueno. Esto es bastante sencillo y estoy contento con la idea general de ello. Pero creo que podría ser un poco más divertido. Tal vez. Voy a experimentar con solo una forma diferente, tal vez una forma más un poco emocionante. Grita de nuevo para representar esto. Y estoy pensando en ese gráfico de círculo proporcional diagonal que vimos para los números del PIB, este círculo representará a EU. Y tal vez podamos escribirlo justo en el círculo. Si eso se ve bien una vez que nos metemos en la computadora y lo probemos. Y luego proporcionalmente los círculos a su alrededor pueden escalar las cosas. Entonces esa es mi primera información , las fuego relacionadas con la muerte. Entonces voy a pasar a mi segundo dato. Yo usé este color dorado para EU y ambos bocetos, voy a seguir haciendo lo mismo en el sketch. Entonces quiero volver a ser visual y mostrar no contar. Entonces voy a hacer diez chiquititos aquí. Y luego los voy a comparar con un tipo, que serían los otros 22 países. Entonces tal vez pueda etiquetarlo usando este sistema de flechas y tal vez pueda hacerlo aquí, incluso México. Y obviamente puedes volver a cualquiera de tus bocetos en cualquier momento si tienes ideas de tus otros bocetos, Eso es lo bueno de hacer bocetos. Se pueden cambiar rápidamente las cosas y mover las cosas sobre papel, razón por la que creo que el papel es tan grande. Ahora voy a volver a tal vez a esta idea circular que hicimos aquí y tal vez hacer círculos. Entonces puedo usar el mismo sistema de etiquetado, probablemente con Estados Unidos aquí y luego con los otros países aquí. Pero voy a agarrar aquí esta nueva hoja de papel y continuar con mi tercer dato. Y entonces voy a tal vez simplemente hacer un gráfico de líneas típico aquí. Por lo que no es necesario escribir todos los números aquí. Ya me estoy deshaciendo de este otro eje de aquí. Entonces si te das cuenta, solo dibujé este eje inferior para las orejas porque esa es una forma más importante de establecer esta gráfica de líneas. Entonces todo está listo y orientado a este resultado final que te muestra el año. Entonces el resto de esto es solo un poco flotando en la parte superior aquí. Pero creo que eso es muy agradable porque enfatiza la línea que es la información y la parte más importante de esta gráfica. Entonces pienso de nuevo en este lado derecho, yo, voy a probar de nuevo el tema del círculo. Y entonces tal vez otra vez destaco. Bien, entonces voy a decir por ejemplo, un estudiante. Entonces la gente sabe que este pequeño círculo es un incidente. Y entonces puedo decir tres para este año, puedo decir 40 para este año, puedo decir 24 encima de todos los círculos como hice para los tres. De nuevo, ustedes solo tienen que hacer seis bocetos totales a bocetos por cada dato. Pero hice cuatro datos. Entonces voy a hacer ocho bocetos. Y un gráfico circular funciona aquí porque la información está fuera del 100%. Entonces, por ejemplo este gráfico de incidentes de tirador pretendiente activo no está fuera del 100%. Es justamente cualquiera que sea el número, es el número de incidentes por año. Definitivamente usa tus marcadores de colores , tus lápices de colores, lo que sea para ayudarte a diferenciar tus piezas de información. Y no tiene que ser como estos colores no tienen que ser los colores que voy a usar en mis infografías reales. Simplemente ayuda tener diferentes colores para distinguir este tipo diferente de información. Creo que voy a volver a esta línea o a este tema rectangular del lado derecho aquí. Así que voy a hacer una especie de gráfico de barras, pero todo va a ser sobre proporciones otra vez, tal como hicimos en ese primer boceto con los círculos. Este va a ser mi 50%. Yo, realmente no importa de qué tamaño sea este. Todo lo que importa es que los otros tamaños de los rectángulos por venir o en proporción a este rectángulo. Si esto es 50, quiero hacer 33. Este rectángulo al lado va a ser un poco más pequeño. Creo que tengo algunas opciones muy buenas para pasar a la computadora con. Vamos a instalarnos en Figma en la siguiente lección. 8. Configurado en Figma: Ahora que hemos investigado tu contenido y empezado a dar ese formulario de contenido y nuestros bocetos. Vamos a meternos en la computadora y comenzar a diseñar nuestra campaña. Tu primer paso es abrir Figma en tu computadora. Así que solo tienes que ir a figma.com y comenzar un nuevo proyecto. Entonces probablemente se vea así. Una vez que llegues a figma.com, quieres iniciar sesión si tienes una cuenta o comenzar. Puedes iniciar sesión con Google, lo que lo hace súper fácil. Entonces en este momento están ofreciendo una versión gratuita de sigma que podría cambiar en el futuro. Yo solo uso la versión gratuita por ahora, pero también puedes pagar al mes por una licencia profesional que te permita hacer algunas cosas más y te dé algunas características más. Pero hagamos la versión gratuita por ahora. Y luego vamos a diseñar con Figma. Simplemente seleccione un lienzo en blanco y eso generará un nuevo proyecto para nosotros. Muy bien, entonces tenemos nuestro archivo Figma listo para funcionar. Voy a renombrarlo rápidamente. Tenemos este lienzo en blanco, este fondo en blanco y espacio listo para funcionar. Así que solo un pequeño recorrido rápido aquí de Figma. Las herramientas están en la parte superior y puedes compartir prototipos, reproducir prototipos, acercar y alejar. En la parte superior aquí. Nosotros, a la izquierda tenemos tu panel de capas, tus activos y tus páginas. Y luego a la derecha tenemos sus elementos de diseño, está creando prototipos de elementos y luego su herramienta Inspector. Así que no vamos a estar usando muchas de estas cosas en este proyecto, sino que solo queremos mostrarte los alrededores. Entonces primero necesitamos hacer un marco que sea como el equivalente de un tablero de arte en algo así como Illustrator. Así que podemos simplemente arrastrar un marco a cualquier tamaño antiguo que queramos. O podemos escoger la herramienta de marco y podemos ir a la derecha y nos va a dar algunas opciones preestablecidas. Así que solo voy a hacer escritorio y lo etiquetará de escritorio. Así que no quiero eso. Quiero etiquetar este sistema. Aquí es donde vamos a crear nuestro sistema de diseño. Entonces también muy rápido solo para mantenernos organizados, voy a cambiar el nombre este número de página de este nombre de página, de la página uno al sistema. Comencemos a configurar su sistema de diseño en la siguiente lección. 9. Diseña tu sistema: Sé que cuando me subo a la computadora, hay un gran miedo a la página en blanco o Canvas. Cómo supero ese miedo o sentimiento de agobiamiento es dando pequeños pasos para crear un sistema de diseño, justo cuando inicio un proyecto, diseño sistema es una colección de componentes repetibles y un conjunto de normas que guían el uso de esos componentes. Piensa en esto como tu lenguaje visual para tus proyectos. Puede incluir fuentes, colores, iconografía y otras imágenes que hacen su proyecto una pieza consistente y cohesiva. Entonces primero quiero que pienses el título de tu proyecto. Esto debería ser algo que explique tu tema y le dé señales a tu audiencia sobre lo que habrá aprendido a través de tu campaña. Voy a llamar a los míos nosotros más armas porque se trata de Estados Unidos y de armas. También me gusta un poco EU, se parece un poco a nosotros. Entonces nosotros y las armas como una relación entre nosotros y las armas. A mí me gusta el juego de palabras. Pero entonces voy a crearlo en una forma más cuadrada. Quiero que crees una jerarquía o un sistema donde tus lectores puedan ver fácilmente los títulos, los titulares y el cuerpo de tu campaña. Entonces nuestros títulos van a ser los títulos de nuestras infografías, los títulos de nuestras páginas web y los títulos de nuestras imágenes de redes sociales. Entonces queremos que sean grandes, queremos que sean audaces y perceptibles. Y lo primero que te llama la atención, eso es lo que voy a hacer esto realmente grande y audaz. Trate de elegir una fuente que tenga una variedad de pesos en su familia. Entonces tenemos entonces tenemos luz, tenemos regular, medio, negrita, semi negrita. Puedo hacer mucho con eso. Entonces también tengo las versiones Serif y Sans Serif del mismo. Y luego como una versión monotipo de la misma, que probablemente no voy a usar. Pero es una buena opción para tener. Entonces tenemos nuestro título. Ahora vamos a crear nuestros titulares. Para los titulares, queremos que sea un poco más pequeño que el texto del título. Así que voy a seguir adelante y elegir como 32 o algo así. Bien, así que eso es bueno. Es muy claro incluso con solo mirar esto, que los títulos son realmente grandes e importantes. Los titulares también son bastante grandes, pero no tan importantes. Pero creo que podría hacer como un médium en su lugar. Y entonces tal vez volvamos a mezclarlo haciendo de nuevo ese tipo de letra san-serif. Bien, así que esto se ve bien. Está claro que tienes un título aquí, claro que tienes que titular. Pero ahora ¿qué pasa con el texto más pequeño en tu proyecto o tu copia corporal? No queremos que sea tan igual a los titulares porque va a ser más pequeño. Va a haber más Body Copy y luego los titulares o el título es par. Así que tenemos que hacerlo un poco más pequeño para que pueda encajar con todo tu otro contenido. Intentemos algo como el 18. Bien, sí, eso se ve bien. Entonces creo que este es un gran sistema tipográfico. Ahora agreguemos estos textiles y Figma. Tengo mi título seleccionado, mi cajita de texto seleccionado para mi título. Voy a ir a mi panel de texto y hacer clic en este pequeño botón de cuatro puntos a la derecha de aquí que dice estilo. Puedes agregar un estilo haciendo clic este pequeño botón más en la esquina superior derecha, y luego quieres darle un nombre. Entonces vamos a por ello y pongámosle el nombre Título. Bien, entonces ahora cuando hago clic fuera de eso, puedo ver mis estilos de texto. Por aquí. Tenemos nuestro estilo de título, que es 64 puntos sobre 70 puntos, que es el interlineado es ese segundo número 70 ahí. Entonces ahora voy a hacer lo mismo por mi titular. Sin embargo, no creo que quiera que 70 sea el interlineado, así que puedo editar el estilo haciendo clic en este pequeño botón a la derecha de aquí. Entonces hagamos algo más cercano al 32. Entonces no hay tal brecha de línea entre los dos. Entonces hagamos 40 y veamos cómo funciona eso. Nuevamente, estamos creando estos estilos en un vacío por aquí. En realidad no los estamos aplicando en un diseño todavía. Así podemos agregar estos estilos en cualquier momento. Como puedes ver, es muy fácil entrar y agregar estilos o editar estilos. Quiero que crees una paleta de colores con al menos seis colores y solo arrastres seis cajas o formas para trabajar aquí. Puedes entrar y alinear las cosas en Figma seleccionando dos capas diferentes y yendo hacia la parte superior derecha aquí, puedes ver que hay diferentes formas de alinear en el centro, en la parte superior. Quiero alinear estos dos a la izquierda. Bien, así que esos son claramente nuestros colores. Para que pueda ir aquí y escoger mi forma. Puedo entrar en el panel de relleno donde es justo este gris claro en este punto. Puedo cambiar el color y algunas formas diferentes. Entonces puedo escribir el número hexadecimal aquí, o puedo hacer clic en el cuadrado y seleccionar cualquier cosa en este gradiente. También puedo deslizar estos colores. Yo también puedo cambiar la opacidad aquí. Pero ese rojo me gustó. Así que voy a volver a la roja. Perfecto. Entonces puedo crear un estilo haciendo clic en nuestros cuatro puntos en un cuadrado. Y entonces no tengo ningún estilo de color aquí todavía, así que voy a hacer clic en el botón más y simplemente nombrarlo rojo y crear ese estilo. Ahora, si hacemos clic fuera de cualquier capa, podemos ver nuestros estilos de color comenzando a aparecer con nuestros textiles. Así que entra y agrega al menos seis colores a tu paleta de colores. Cuando eliges tu paleta de colores, definitivamente quieres tener una cantidad diversa de tonos. Entonces tus tonalidades son como tu Roy G Biv, tus nombres de color reales. Entonces el rojo, el amarillo, el verde. De esa manera en tus gráficos de información, es muy fácil para las personas diferenciar los diferentes colores. Y los diferentes colores significarán cosas diferentes en tus infografías, ¿verdad? También es bueno usar una variedad de valores y su combinación de colores. Entonces, por ejemplo, este morado es bastante oscuro, pero este beige es bastante claro. Así que hay un buen contraste entre sí. También es muy buena práctica a la hora de hacer tus esquemas de color para comprobar que es seguro para daltónicos. Y el contraste entre los colores y los fondos son buenos para usar. Puedes ir a las herramientas de accesibilidad de Adobe colors y verificar si el contraste está funcionando o no en tus colores. Entonces, por ejemplo, aquí está mi color beige. Si estuviera usando mi color beige sobre un fondo completamente blanco, por ejemplo, eso no sería lo suficientemente alto y contrastaría para ser legible. Entonces no quiero usar ese color solo para textos sobre fondo blanco. Quiero usarlo y mis gráficos que no sean accionables, como botones y cosas así, porque no se ve muy fácilmente. Así que entra en las herramientas de accesibilidad de Adobe Color y asegúrate de que tu contraste se vea bien entre los colores y tu fondo. Y tu paleta de colores es segura para daltónicos. Creo que es muy agradable y una paleta de colores para tener un color gris medio para usar para texto y cosas que no queremos que sean negras o súper duras. Lo último que voy a pedirte que hagas es un botón de aprender más. Tu botón, solo diremos Aprende más. Y quieres que el texto se vea clicable y accesible, lo que creo que sí. Comparado con la copia del cuerpo. Es un poco más grande y un poco más audaz, lo que me gusta y creo que va a funcionar muy bien y captando la atención de la gente. Voy a cambiar el color entrando en el relleno y haciendo clic en nuestros estilos a tal vez ese morado. Así que de esa manera no es negro y aburrido. Es un poco más emocionante. Entonces voy a intentar hacer un subrayado. Así que parece un poco como un enlace en el que se puede hacer clic. Voy a hacer la línea un poco más gruesa y luego tal vez cambiarla para que me guste el rojo o algo así. Bien. Creo que eso me parece un buen botón. No es un súper obvio botones. Entonces un botón más obvio podría verse algo así donde tiene un rectángulo. Y luego voy a mover esto de nuevo. Y mi panel Capas aquí a la izquierda haciendo clic en comando y luego la tecla de corchete izquierdo. Se puede ver en el panel de capas que se mueve hacia abajo. Bajando. Ahí vamos, está abajo. Conoce más ahora. Y luego voy a hacer que se vea aún más clicable redondeando las esquinas por aquí a la derecha. Y entonces no voy a hacer que sea de este color gris, pero a lo mejor el color beige, por ejemplo bien, genial. Entonces creo que estas son dos buenas opciones de botón. Ahora voy a hacerlos un componente el cual será activo reutilizable que podamos usar a lo largo de nuestro proyecto de diseño. Entonces voy a dar click en el texto Más información y la línea debajo de él. Voy a hacer clic derecho y presionar Crear componente. Eso va a generar un componente para nosotros. Y el símbolo para componente es esta pequeña forma de diamante que puedes ver en el panel de capas. Y luego por aquí en nuestros estilos o en nuestros escenarios. Voy a renombrarlo desde botón componente 12 o línea BTN. Entonces tal vez quiero usar este estilo de botón. A lo mejor no, no lo sé. Así que voy a crear simplemente un componente de todos modos. Voy a renombrarlo btn. Veremos si me gusta uno u otro más tarde. Pero solo necesitas crear un estilo de botón. Así que ahora tenemos todos los componentes de nuestro sistema de diseño. También puedes crear un conjunto de iconografía si eso te ayudará a unir tus tres infografías. Ahora que ya has establecido tu sistema de diseño, será muy fácil entrar y diseñar tus gráficos de información, tu página web y tu imagen de redes sociales. En las siguientes lecciones, Empecemos. 10. Diseña tu información: Configura tu increíble sistema de diseño en Figma. Entonces ahora todo lo que tenemos que hacer es llevar tus bocetos del papel a la computadora y Figma, empieza por hacer otra página para tus infografías. la izquierda aquí, deberías tener tus seis bocetos cerca y vas a elegir tus tres bocetos favoritos para diseñar en Figma. Mis bocetos favoritos siguieron ese tema circular. Entonces voy a empezar a diseñar esos en Figma y ver cómo resultan. Voy a pasar rápidamente y mostrarles cómo diseñé mis tres técnicamente para infografías, pero voy a darte algunos consejos pro en el camino. Copiar y pegar es tu mejor amigo. Una vez que tengas algunos elementos diferentes, te encantan, solo repite esos elementos. Eso también ayudará a que su estado visual sea muy consistente en los tres de su información. Gráfico, figma o el programa en el que estés trabajando, haz los cálculos por ti. Yo sólo puedo hacer el Starkey, así que Shift ocho y escriba el número por el que lo necesito multiplicado y usando esa tecla estrella, automáticamente calculará esa multiplicación por ti. El proceso de diseño implica mucho ensayo y error. Así que ajusta tu información y tus estilos a medida que avanzas. Entonces por ejemplo esta primera infografía que hice, esbocé una idea muy clara o lo que pensé que era clara de cómo quería que se viera. Pero una vez me subí a la computadora y empecé a hacer estos gráficos a escala en función de la información. No estaba funcionando. Algunos de los círculos eran demasiado grandes. Algunos de los círculos eran demasiado pequeños. Así que ajusté y creé un gráfico más consistente que tenía un tamaño más consistente. Para ello, tuve que sacar un conjunto diferente de información. En última instancia. Usa elementos como flechas , líneas y formas para etiquetar claramente tus diseños. Asegúrese de que sus elementos de diseño sean consistentes. Y si no lo son, hay sentido detrás de la inconsistencia. A lo largo de tu proceso, ponte en el lugar de tu usuario. Por ejemplo, terminé no superponiendo los círculos como tenía en mis bocetos. Porque pensé que podría ser confuso para mi público. Pensé que tal vez podrían interpretarlo como un diagrama de Venn donde la superposición significa algo. Mientras que aquí solo era una elección estilística que no necesitaba estar ahí y confundir a la gente. Minimiza los textos en tus imágenes usando el título o estadística de tus gráficos como etiqueta o etiquetas. Entonces por ejemplo mi estadística aquí, la dividí en dos piezas para actuar como etiquetas para las dos piezas diferentes que visualicé en mi gráfica. Siempre que pueda intentar desenfatizar o minimizar la información de soporte como ejes, claves y cosas así. ejemplo, en este gráfico de barras que estoy haciendo aquí, no necesito dos ejes. No necesito un eje x y un eje y. Solo puedo usar una y luego crear etiquetas para ayudar a que mi información llegue a mi audiencia. Del mismo modo, quieres etiquetar estratégicamente piezas de tus diseños, no necesariamente todo el diseño. Así que no te excedas con etiquetar cosas. Una vez que etiquetes y uno o dos lugares, tu audiencia probablemente se dará cuenta de lo que intentas comunicar. Use Figma es herramientas de alineación para mantener sus diseños ordenados y legibles. Volviendo a ese concepto de copiar y pegar que mencioné anteriormente, repita sus elementos de diseño para crear consistencia y facilitarlo a usted mismo. Después de crear una o dos de tus infografías, probablemente tendrás estos elementos consistentes como tus etiquetas y flechas, líneas, cosas así, que podrás reutilizar en todas tus infografías. Eso creará una apariencia consistente para unirlos a todos . ¿Estás haciendo un gráfico circular? Es súper fácil de usar arcos y barridos. En Figma, simplemente dibujas un círculo usando la herramienta elipse y aparecerá un pequeño punto blanco, ese es el arco. Así que haz clic en el punto y arrástralo hacia arriba o hacia abajo. Y vas a crear un arco, que es básicamente como una porción de tu gráfico circular. Y a partir de ahí puedes entrar y decir qué porcentaje quieres la televisión de barrido, y ese será el porcentaje que sea tu gráfico circular. No te apegues ciegamente a tus bocetos. Experimenta con el estilo, el color y el diseño, y sigue trabajando en tus tres infografías hasta que estés satisfecho con la forma en que tus diseños se están uniendo. Tienes tus tres datos, el diseño gráfico. Así que pongámoslos en una aplicación más final del mundo real haciendo un diseño de página web. En la siguiente lección. 11. Diseña tu página web: Hemos creado un conjunto realmente impresionante de tres infografías que se ven realmente geniales juntas. Están aquí, se ven bonitos en nuestra computadora. Pero, ¿cómo van a llegar a nuestro público? Ese es el objetivo del diseño, es llegar a una audiencia y compartir tus diseños con el mundo. Entonces por eso vamos a crear esta campaña impulsada por datos alrededor de nuestros tres gráficos de información. Así que vamos a hacer eso creando una página web y una imagen de redes sociales. Y de esa manera, nuestros diseños se moverán solo de nuestra computadora y se moverán al mundo y llegarán a nuestra audiencia. Empecemos con el diseño de tu página web. Entonces, lo primero que vamos a hacer es que vamos a agregar otra página, el diseño de tu página web y el diseño de tus publicaciones en redes sociales vivirán en esta página. Y así tendremos nuestra página de infografías aún con todos nuestros diseños originales. Entonces, si editas estos diseños infográficos en algún momento mientras estás haciendo tus diseños de página web y publicaciones sociales, tus diseños originales no se verán afectados. Vamos a subir a la herramienta de marco y vamos a hacer un marco de tamaño de escritorio. Entonces, hay un par de opciones diferentes bajo estos presets de escritorio. la derecha de aquí, solo voy a hacer clic en el que dice Escritorio, que debería ser un tamaño de escritorio bastante estándar. Antes de empezar a tomar nuestras infografías de la otra página de infografías, voy a simplemente configurar un rápido diseño de cuadrículas. Entonces, si vamos por aquí a la derecha, vamos a hacer clic en Rejilla de diseño, excepto que no quiero una cuadrícula per se. Prefiero tener columnas. Entonces voy a dar click sobre este botón aquí y seleccionar columnas. También puede hacer filas, o simplemente puede trabajar en una cuadrícula estándar. Pero me gusta configurar algunas columnas antes de comenzar en una página de diseño web. Y de esa manera solo te ayudará a mantenerte organizado y a mantener todo limpio y alineado. Normalmente me gusta hacer una cuadrícula de 12 columnas para algo así como una página del tamaño de un escritorio. Porque eso nos va a dar algunas opciones diferentes. Podemos hacer como una situación de tres columnas. Podemos trabajar con cuatro columnas, podemos trabajar con dos columnas. Entonces sí me gusta tener algunos márgenes solo para que las cosas no vayan al borde de mi página. Siempre puedes hacer clic en este marco y ocultar tu cuadrícula en cualquier momento haciendo clic en este ícono de ojito. Ahora vamos a entrar y configurar el marco de tu página web. Así que en realidad vamos a volver a nuestra página del sistema muy rápido y vamos a tirar de nuestro título. Y sólo voy a colocarlo la esquina superior izquierda. Entonces ahora vamos a establecer algunos conceptos básicos de nuestra página web y lo vamos a hacer creando un área de encabezado. Así que ya lo hemos hecho arrastrando y nuestro tipo de logotipo, o simplemente puedes escribir tu título simplemente en la parte superior. Y esto actuará como nuestro botón de Inicio. Normalmente en un sitio web estándar que existiría en esta esquina superior izquierda. Y luego podemos entrar y hacer un menú aquí. Sólo estamos haciendo una página web para este proyecto. Solo para que esto parezca un producto más robusto, aquí vamos a maquillar algunas otras páginas web. Voy a copiar esto. Imagínese qué otro tipo de información podría incluir en este proyecto de campaña. Los dueños de armas son como, ¿por qué la gente posee armas? ¿Cuáles son las estadísticas de cuántas personas poseen armas? Cosas así. Entonces tal vez eso sea algo que pueda agregar en el futuro. Creo que es un buen comienzo para mi menú aquí. Entonces voy a parar ahí. Y luego voy a volver a la página de mi sistema y agarrar uno de estos botones aquí. En general, no quiero que mi llamado a la acción en todo el sitio web sea para conocer más. Quiero que sea algo un poco más específico. Entonces voy a decir que actúes. No quiero que esto parezca un conjunto de información desesperado. Quiero que las personas se empoderen aprendiendo esta información y sientan que pueden actuar y hacer algo. Pero piensa en el objetivo real de tu campaña al final del día, ¿qué quieres que haga la gente después de que se enteren de tu información? Y ese puede ser el principal llamado a la acción en tu sitio web. Ahora vamos a entrar y agregar nuestras infografías. Bien, entonces ahora voy a seleccionar mis cuatro infografías. Voy a copiar y después voy a pegarlos. Entonces, si puedes ver aquí, solo estoy viendo como una infografía a la vez. Así que la gente realmente tiene que desplazarse hacia abajo para obtener a través de todas tus infografías. Pero en realidad, mucha gente no se toma el tiempo de desplazarse por una página. Entonces, si realmente quieres que vean todas tus infografías y podría ser inteligente para recopilarlas más en la parte superior. Voy a hacer algunos ajustes a esta página e intentar obtener la mayor parte de mis infografías por encima del pliegue. Entonces, lo que terminé haciendo es un poco ir por esto como el tipo de look de feed de Pinterest. Coloco todos mis gráficos y sus propias cajas y luego hice el fondo un poco más oscuro. Sin embargo, algo que sí quería hacer muy rápido, es solo asegurarme de que mi usuario esté orientado en el sitio web. Entonces esta página y estas infografías tratan sobre la violencia con armas de fuego. Voy a audaz y subrayar este elemento de violencia con armas de fuego en mi menú para asegurarme de que la gente sepa que esa es la página que están en este sitio web. Una última cosa que realmente quiero hacer es asegurarme de que gente pueda aprender más sobre cada una de estas piezas de información. Entonces voy a hacer eso agregando un botón de aprender más a cada una de estas piezas aquí. Asegúrate de estar agrupando o gráficos botones y cualquier otro elemento de diseño apropiadamente, puedes usar cajas como esta o líneas divisoras y dejar muy claro qué título corresponde con qué infografía, qué botón Learn More corresponde con qué info, etc. Este proyecto y tus infografías no parecen más reales ahora, parece un producto real que podría existir con solo incorporar alguna gráfica básica habilidades de diseño y diseño web. Ahora que tenemos tus gráficos de información todo configurado y el diseño de tu página web, los vamos a poner en otra aplicación u otra forma conectar con tu audiencia, que es a través de las redes sociales. Entonces, en la siguiente lección, vamos a llevar esos gráficos de información una imagen de redes sociales. 12. Diseña tu correo social: Tenemos tu página web y tus gráficos informativos listos para funcionar. Eso es genial. Ya están llegando a una audiencia, pero necesitamos correr la voz más rápido. Necesitamos educar a más gente. Así que vamos a hacer eso creando una publicación en redes sociales. Así que vamos a configurar otro marco junto a nuestro marco de página web. Vamos a ir a la herramienta de encuadre, y luego vamos a ir a las redes sociales. Y aquí hay un montón de presets, tal como teníamos para nuestra configuración de escritorio. Y aquí hay una configuración de página de historia de Instagram. Entonces vamos a hacer clic en la historia de Instagram. Vamos a cambiar el nombre a publicación social. Bien, entonces tenemos todo preparado. Lo primero que vamos a hacer es añadir nuestro tipo de logotipo o título. Lo que sea que terminaste haciendo como un pequeño círculo aquí. Entonces en Instagram Stories, normalmente, tu perfil, foto o imagen, como se llame hoy en día, suele estar en este pequeño icono arriba en la esquina superior izquierda. Vamos a hacer que esto se vea real y que en realidad esté en Instagram creando este pequeño círculo con tu logo o tu título en él. Instagram también tiene un cuadro de texto al lado para que entre tu título de tu cuenta de Instagram. Y luego lo más importante, vamos a elegir una de tus infografías para que aparezca aquí. Hazlo audaz, hazlo colorido y atractivo. Así que atraerá la atención de todos y hará que la gente se involucre con tu publicación. Tu objetivo es lograr que la gente haga clic en el enlace a tu sitio web para conocer más sobre tu tema mediante botones para que los usuarios puedan hacer clic y obtener más información en tu sitio web. Así que estoy bastante contento con cómo resultó mi diseño de post social. Terminé haciendo bastantes retoques, como volver a estas flechas para mis etiquetas. En lugar de hacer esta clave como lo hice para el diseño de mi página web. Entonces creo que este es un diseño muy divertido y accesible que funcionará bien para una historia de Instagram. Trabaja en el diseño de tus publicaciones sociales hasta que estés satisfecho con él. Y luego vamos a criticar nuestros diseños en la siguiente lección. 13. Critica tu diseño: Ahora que has reunido algunos diseños increíbles, es hora de cambiar tu sombrero de diseñador por tu sombrero crítico. Esto puede ser muy difícil de hacer, pero es muy importante como diseñador esforzarse siempre y asegurarse de que está haciendo el mejor trabajo que pueda hacer. Definitivamente recomiendo tomar un descanso al cambiar del modo de diseño al modo de crítica. Puede ser muy difícil cuando acabas de diseñar algo realmente increíble lo que estás realmente orgulloso para luego juzgarlo y desafiarlo. Pero al juzgar y desafiar tu trabajo, así es como creces como diseñadora. Por lo que recomiendo tomar aproximadamente un descanso de 24 horas entre diseñar algo y luego criticar algo. Estas son algunas preguntas que puedes hacerte mientras criticas tu trabajo. ¿Tus diseños comunican tu historia? Recuerda que al inicio de esta clase, te ocurrió una historia que quieres que cuente sobre tu tema. ¿Esa historia viene con tus tres infografías? ¿El mensaje o la información clara y fácil de entender? A lo mejor ahora que estás mirando hacia atrás y desafiando tu trabajo, un gráfico no resultó exactamente como pensabas que sería. Y a lo mejor es confuso o simplemente no está funcionando. Y el formato que elegiste originalmente son legibles todos tus textos y elementos de diseño? Será muy difícil comunicar tu historia si tu audiencia no puede leer tu texto o ver tus gráficos circulares, tus etiquetas, unidades y claves distraen de la información. Recuerda, tu información es más importante de tu gráfico. No necesitas ningún elemento extra distraiga a la gente del mensaje principal o de tu historia. Y lo más importante, ¿estás mostrando y no solo contando? Siempre puedes pedirle a tus amigos o familiares que le echen un vistazo. De esa manera, ofrecerá una perspectiva completamente fresca y externa desde la suya. Implementa cualquiera de esos pequeños retoques o tal vez grandes retoques que necesites para mejorar tu diseño y prepararlo para guardarlo como nuestra versión final en la siguiente lección. 14. Ahorra tus diseños: Has implementado todos tus cambios. Tienes diseños realmente fuertes de los que obviamente estás muy orgulloso y no puedo esperar a ver. Así que ahora necesitamos guardar tu obra de arte final para que podamos compartirla con nuestros compañeros aquí en Skillshare. Sigma hace que sea muy fácil exportar tus diseños. Todo lo que tienes que hacer es hacer clic en tus marcos que quieras exportar. Entonces queremos que nuestra página web y nuestras publicaciones sociales compartan en Skillshare. Entonces vamos a seleccionar ambos marcos. Vamos a bajar a la parte inferior de este panel derecho y vamos a hacer clic en Exportar. Puedes guardarlo como PNG o algunos tipos de archivos diferentes. Pero creo que PNG o JPEG es probablemente el mejor para nuestros propósitos de clase hoy en día, seleccionas tu tipo de archivo. Puede agregar cualquier nombre de archivo aquí, pero simplemente guardará automáticamente sus archivos como el nombre del marco. Por lo que guardará esto como página web. Y esto es publicaciones sociales, por eso es realmente importante, nuevo mantenerse organizado y Figma y etiquetar tus marcos, tus páginas apropiadamente. Simplemente te pondrá a punto para el éxito. Posteriormente. Podemos seguir adelante y hacer clic en Exportar dos capas. Y automáticamente descargará nuestras dos capas en un archivo zip. Enhorabuena, después de todo tu arduo trabajo, finalmente has guardado tus diseños finales. Y no puedo esperar a verlas. Asegúrate de subir estas dos imágenes junto con tus bocetos a la galería del proyecto. Pon tus diseños y una maqueta para ayudar a ver cómo se vería como un producto real y hacer que se vea más real en tu sitio web de portafolio. Ahora sólo vamos a terminar algunos cabos sueltos en nuestro último par de lecciones. 15. Otras aplicaciones: Todas las habilidades importantes que acabamos de aprender se pueden aplicar en cualquier campo de diseño y aplicación. Espero que estés tan emocionado como yo por aplicar estas habilidades realmente importantes en cualquier proyecto de diseño. Como mencioné antes, puedes seguir adelante con este proyecto. No tienes que apegarte a solo tres gráficos de información. Puedes construir 100 gráficos para poner en tu campaña basada en datos. Actualiza tu proceso de diseño usando los pasos que tomamos en esta clase para llevar forma al contenido a través de bocetos e iteraciones. En otras palabras, no solo deteniéndose ante tu primera idea, sino realmente empujando los límites y sacando más bocetos o probando diferentes estilos de diseño. Utilice un sistema de diseño y su proceso para crear proyectos de diseño coherentes y visualmente cohesivos. Establecer esos estilos por adelantado y su proyecto realmente puede marcar una gran diferencia y ayudar a todo se reúna al final, también hace que sea más fácil para usted enfocarse en su general en lugar de los pequeños elementos de diseño que aparecen a medida que diseñas, crea esquemas de color más estratégicos que son más inclusivos para un público más amplio usando esos Adobe Color herramientas de accesibilidad. Practique la empatía por los usuarios considerando cómo otros podrían ver o usar su diseño a lo largo de su proceso de diseño. Conoce más sobre diseño web, experiencia de usuario o diseño de interfaz, marketing y más temas que exploramos y abordamos en tu proyecto. Vamos a terminar todo en la última lección. 16. Conclusión: Enhorabuena, deberías estar muy orgulloso de ti mismo por trabajar en este proyecto de diseño de información realmente desafiante, pero ojalá perspicaz. Has aprendido mucho en esta clase de diseño de información, como dar forma al contenido, contar historias visuales, practicar empatía por los usuarios, construir sistemas de diseño estratégico, crear proyectos visualmente cohesivos, y diseño y Figma. Pero si solo le quitas una cosa a esta clase, espero que sea que puedas y debas seguir enseñándose nuevas formas de hacer crecer tus habilidades visuales para resolver problemas. Desafíate a ti mismo y a tus habilidades con regularidad creando nuevos proyectos para tu portafolio, como el que creamos en esta clase. Fortalecerá significativamente tu cartera para ayudarte a conseguir trabajos y agudizar tus conocimientos simultáneamente. No olvides subir tu proyecto de campaña a la galería de proyectos publicando tus bocetos y tus diseños finales de página web y redes sociales. Asegúrese de comunicarse conmigo o con cualquiera de sus compañeros de clase para obtener nuevas perspectivas, obtener comentarios y, con suerte, mejorar nuestra comunidad de diseño. Muchas gracias por tomar esta clase conmigo y aprender más sobre diseño de información. Te veré en la siguiente clase.