Design de informações: crie uma campanha baseada em dados na Figma

1. Bem-vindo ao design de informações!: Todos os designers, nossos designers da informação. O mundo está cheio de informações e o trabalho do designer é organizá-las, entendê-las e apresentá-las de uma forma agradável e acessível a todos. As habilidades básicas usadas para organizar e visualizar informações são extremamente universais e podem ser implementadas em qualquer projeto de design. Sou a designer gráfica Carolyn, que está muito animada em compartilhar os fundamentos do design da informação com você hoje. Fiz uma aula realmente incrível de design da informação na RISD no verão passado e fiquei muito empolgada em aplicar minhas novas habilidades em todos os meus projetos de design. Então, hoje vou compartilhar essas habilidades que aprendi com você e ensinar como criar seu próprio projeto de design de informações pessoais para seu portfólio. Ao longo do caminho, você aprenderá essas principais habilidades de design, dando forma ao conteúdo, narrativa visual, praticando empatia pelos usuários, criando sistemas estratégicos de design e criando projetos visualmente coesos . Você praticará suas novas habilidades transformando sua pesquisa em esboços, criando um grupo conciso de designs de informações, criando uma página da web e uma imagem de mídia social para apresentar seus designs em e trabalhando na Figma para Design Gráfico e Web. Esta aula é para todos os criativos em qualquer nível de habilidade, do iniciante ao avançado, que desejam aprender mais habilidades visuais de narrativa e design gráfico e trabalharão no Figma, que é um design em crescimento ferramenta gratuita e fácil de usar. Nesta aula, você terá um incrível projeto de design da informação que realmente mostra suas habilidades de comunicação e resolução visual de problemas em design gráfico, web design e design digital. Mal posso esperar para ver o que você vai criar para o seu projeto. Então, vamos começar. 2. Projeto: Para esta aula, quero que você crie um design de página da web e um design de imagem de mídia social como parte de uma campanha maior baseada em dados. Este projeto de campanha apresentará três gráficos de informação visualmente coesos que você criará sobre um tópico de sua escolha. Concluirá seu projeto em algumas etapas fáceis. Pesquisará seu tópico, discutirá e esboçará algumas ideias e, e esboçará algumas ideias e, em seguida, pegará esses esboços os transformará em um sistema totalmente projetado que constituirá sua campanha baseada em dados. Você precisará de algumas ferramentas e materiais para ajudá-lo durante a aula. Você precisará de materiais de desenho, como lápis, marcadores e papel, para ajudá-lo a pensar em seus gráficos. E então você precisará do Figma, que é uma ferramenta de design on-line que usaremos para criar seu projeto de campanha. É fácil e gratuito de usar. Você nem precisa baixá-lo. Você pode simplesmente usar a versão do navegador. Basta acessar figma.com para começar. Ao final da aula, você enviará o seguinte para a galeria do projeto. Seus esboços de suas informações, gráficos e imagens de sua página da web e designs de mídia social. Sinta-se à vontade para enviar seus esboços ou ideias a qualquer momento durante a aula para obter feedback meu e de seus colegas de classe. Antes de começarmos seu projeto, vamos nos inspirar aprendendo um pouco mais sobre design da informação e ver alguns exemplos realmente interessantes. 3. DESIGN DA INFORMAÇÃO: design da informação é a prática de apresentar informações de uma forma que promova a compreensão efetiva e eficiente dessas informações. Para nos inspirarmos antes de começarmos nossos projetos, vou mostrar a vocês alguns exemplos de infográficos. Este é um livro muito bom chamado gráficos de informação, e posso criar um link para ele na seção de projetos e recursos. Então, ele meio que aborda uma ampla história de exemplos de gráficos informativos, começando com tumbas egípcias antigas. Essa é uma forma muito antiga de design gráfico que é basicamente apenas um mapa com várias imagens. Este é um exemplo de um gráfico que estava na capa de cientistas americanos. É muito complicado, então esta é uma versão ampliada . Mas é basicamente apenas esse grande círculo. E ele usa código de cores. E até acinza algumas das informações irrelevantes por trás daqui para que as informações coloridas possam realmente aparecer as informações coloridas possam realmente aparecer e facilitar a leitura. Mas se esse é obviamente um gráfico muito complexo, isso mostra o DNA humano comparado com o DNA do cão. Na verdade. Acho que este é um infográfico muito interessante que mostra a comparação da tecnologia de áudio e vídeo. Então você pode ver algo como o típico, como gráficos de barras e coisas assim, ou um gráfico de linhas aqui embaixo. Mas acho muito bom que eles tenham incluído essas ilustrações nas laterais aqui. Isso realmente nos ajuda a nos conectar, como , Oh, isso é uma mesa Blu-ray. Isso é sobre vídeo, ou isso é um iPod e isso é sobre música. Acho que o esquema de cores limitado aqui e as ilustrações fazem um ótimo trabalho ao nos ajudar, como público, a entender as informações rapidamente. Aqui está outro exemplo de como o designer fez um ótimo trabalho ao usar um esquema de cores muito limitado. Obviamente, é só preto, branco e pão. E acho que há um tom posterior de vermelho aqui. Mas eles usam imagens e imagens para conectar o assunto ao público com muito mais rapidez. Então você pode ver aqui, tudo isso é sobre Michael Jackson. Tudo neste pôster ou artigo de jornal está relacionado aos cronogramas. Então, podemos ver aqui como 1972 e há uma foto ao lado. Então foi assim que ele encarou aquela data. E isso é o que estava acontecendo nessa data. Qual é o estilo de música com o qual ele estava trabalhando? Acho que essa é uma maneira muito interessante e estratégica de expor todas essas informações sobre Michael Jackson. Então, aqui temos esse gráfico simples e simples. Podemos ver os preços à noite, 1800, e então podemos ver isso em comparação com 2008. E então esses são todos os países listados e codificados por cores com esses pequenos anéis ao lado deles. Mas podemos ver uma visualização muito mais interessante disso. Esses números neste gráfico diagonal no meio deste pôster. As cores correspondem às cores listadas neste gráfico. E é realmente fascinante ver uma comparação visual. Essa é uma ótima maneira de mostrar as informações e não apenas de mostrar no gráfico. Na verdade, está fazendo as duas coisas, o que é muito bom para pessoas que talvez queiram ver os números listados. Em vez de abstraí-lo de uma forma mais visual. Este livro, que não é um livro de design, é na verdade um livro de receitas, faz um ótimo trabalho mostrar algumas visualizações muito legais das informações apresentadas no livro. Este é um exemplo de diferentes molhos que você pode fazer com base nas receitas do livro. Isso é uma espécie de eixo. Assim, você pode deixar de ser leve, macio, cremoso, muito crocante, e tudo está codificado por cores novamente, muito bem. Então, dependendo do tipo de roupa que você está procurando, você pode encontrá-la no eixo. Então, se eu quiser algo crocante e cremoso, posso olhar neste quadrante inferior direito. Não podemos falar sobre design de informações moderno sem falar sobre Georgia Loopy. Ela é uma designer de informações focada no ser humano que torna as informações mais pessoais e identificáveis. Aqui está um projeto que ela chamou Deer Data com uma amiga, Stephanie postsynaptic. Eles basicamente pensaram em sua semana, escolheram um tópico e representaram esse tópico em uma semana de suas vidas e o enviaram um para o outro por um ano. Então, esse é um exemplo incrível de como tornar as informações divertidas, tornando-as parte de sua vida diária. Essa foi apenas uma visão geral muito rápida de uma grande seção de design gráfico. Espero que você esteja inspirado e já tenha algumas ideias para seu próprio projeto. Então, vamos começar esse projeto e a próxima lição. 4. Escolha seu tópico: Aprendemos algumas noções básicas sobre design de informações e vimos alguns exemplos muito legais na última lição. Então, acho que estamos prontos para começar nosso projeto de design. Seu primeiro passo é escolher seu tópico. Pode ser qualquer coisa, desde mudanças climáticas, animais, música, culinária, o que lhe interessa. Eu vou escolher o tópico das armas na América. Sinto que temos ouvido muito, infelizmente ultimamente, sobre tiroteios em massa, tiroteios em escolas nos Estados Unidos. E eu queria saber mais sobre as estatísticas por trás dessa violência. E me ensine algo por meio do design, que é o que eu amo no design. Você pode criar qualquer coisa sobre qualquer tópico e, ao final do seu projeto, aprenderá mais sobre isso. Depois de decidir sobre o assunto, quero que você escolha uma lente, um ângulo, uma história para contar sobre o assunto. Este projeto é um exercício e uma narrativa visual. Então, qual é a história que você quer contar por meio do seu design? Vou falar sobre como violência armada é um problema exclusivamente americano. Então, isso vai focar toda a minha pesquisa e os três gráficos de informação que vou apresentar nesta aula de hoje. Escolha seu tópico e escolha a história que você quer contar para que possamos começar a pesquisar na próxima lição. 5. Pesquisa: Você escolheu seu tópico. Agora vamos ver alguns conteúdos. Pesquise pelo menos três informações diferentes que comuniquem a história que você quer contar sobre o assunto. Aqui está um exemplo de uma informação da qual descobri que posso ser um dos meus gráficos informativos. Aqui está a informação, acabou de ser escrita em um documento de texto. E aqui está um exemplo de como mais tarde transformei isso em meu gráfico de informações. Esse é um processo de dar forma ao conteúdo. O conteúdo é sua informação e o formulário é seu design futuro. Aqui estão algumas dicas rápidas sobre como coletar pesquisas e informações. Crie um documento de texto para coletar as informações que você deseja usar. Esse pode ser seu documento abrangente onde você pode anotar estatísticas e informações específicas que deseja visualizar. E você também pode criar links para suas fontes aqui. Lembre-se da história que você está tentando contar com seu tópico. Por exemplo, estou me concentrando em como a violência armada é um problema exclusivamente americano. Portanto, minhas informações se concentrarão na comparação das comparação estatísticas americanas de violência armada com outros países. Para minhas informações, incluirei algumas informações sobre mortes relacionadas a armas de fogo por 100.000 pessoas em diferentes países, incluindo os Estados Unidos. Os americanos têm dez vezes mais chances morrer por uma morte relacionada à arma de fogo do que pessoas em 22 outros países desenvolvidos. Incidências de atiradores ativos por ano nos últimos 20 anos. Então, eu poderia incluir esta informação sobre como os americanos pensam sobre a violência armada nos EUA. Durante esta aula, quero que você defina três informações e faça três gráficos informativos. A melhor coisa sobre esse projeto, porém, é que ele pode ser ampliado posteriormente. Assim, você pode criar centenas de gráficos de informações a partir de centenas de informações. Complete todas as pesquisas necessárias para começar a esboçar seus três gráficos informativos na próxima lição. 6. Mostrar não diga: Eu queria fazer um rápido desvio do nosso projeto para discutir uma grande irritação minha e um erro e design muito comuns, e especialmente o design da informação, que é quando as pessoas contam e eles não mostram para você. Então, em todo o design, seu objetivo é mostrar às pessoas, não contar às pessoas. Aqui está um exemplo de contar e não mostrar. Uma das minhas informações é que os americanos têm dez vezes mais chances morrer por uma morte relacionada a uma arma de fogo do que pessoas em 22 outros países desenvolvidos. Não é visualizar nada que torne o número dez realmente grande. Quando você está trabalhando com números e suas informações, você quer mostrar a quantidade, você quer mostrar uma comparação. Você quer ajudar as pessoas a conectar esse número a algo significativo. Aqui está um exemplo de como você pode mostrar essas informações em vez de apenas dizer que deseja visualizar dez vezes. E outras palavras, um contra dez como visual. Dessa forma, seu público pode ver o quanto dez é maior quando comparado a apenas um. Lembre-se de que este projeto trata contar histórias visuais e você não vai contar para R, nem mesmo visualizar nenhuma história apenas tornando o número dez muito grande, por exemplo, você quer pensar em como outros poderiam entender as informações de forma fácil, eficaz e eficiente, o que, novamente, é o que é o design da informação. Vamos voltar a desenhar nosso projeto na próxima lição. 7. Esboço: Estamos nos sentindo inspirados. Vimos alguns exemplos e temos nossa pesquisa pronta para começar. Então, vamos começar a desenhar. Então, eu tenho alguns pedaços de papel aqui e alguns utensílios de desenho e este guia de círculo em régua para me ajudar a desenhar um pouco melhor. Mas não importa como você desenha neste momento. É tudo uma questão de colocar suas ideias no papel. Portanto, não se preocupe com a aparência perfeita ou algo assim. Na verdade, vou configurar isso. Então, este será meu primeiro esboço aqui e, em seguida, a interpretação sacramental dessa primeira informação . Portanto, a morte relacionada a armas de fogo estará em ambos os quadrantes aqui. E então minha segunda informação. Então, vamos começar com o primeiro esboço. Acho que para visualizar todas essas informações, vou tentar um gráfico de barras. Então, vou pegar três cores com meus marcadores. Vou configurá-lo como se uma cor representasse os Estados Unidos. Então, vou usar essa cor dourada e colocá-la bem no meio. Isso vai ser como uma linha de comprimento médio porque essa informação é 10,6. Então, vou anotar isso aqui. Porque é assim que eu quero que apareça no meu infográfico. Quero que o país fique no lado esquerdo e depois quero que os números estejam no lado direito. Acho que desse bar. Em seguida, vou usar uma cor diferente, vermelho, digamos que representará os países mais altos. Os EUA. Estou meio que olhando isso aqui, mas você vai realmente colocá-lo em escala no computador. Eu acho que isso é bom. Isso é bem simples e estou feliz com a ideia geral disso. Mas acho que poderia ser um pouco mais divertido. Talvez. Vou experimentar apenas de uma maneira diferente, talvez uma forma um pouco mais excitante. Grite novamente para descrever isso. E estou pensando no gráfico círculo proporcional diagonal que do círculo proporcional diagonal que vimos para os números do PIB, esse círculo representará os EUA. E talvez possamos simplesmente escrevê-lo diretamente no círculo. Se isso parecer bom, uma vez entramos no computador e experimentamos. E então, proporcionalmente, os círculos ao redor dela podem aumentar as coisas. Então essa é minha primeira informação, a morte relacionada a armas de fogo. Então, vou passar para minha segunda informação. Eu usei essa cor dourada para os EUA e esses dois esboços, vou continuar fazendo o mesmo no esboço. Então, eu quero novamente ser visual e mostrar, não contar. Então eu vou fazer dez garotinhos aqui. E então vou compará-los com um cara, que seriam os outros 22 países. Então, talvez eu possa rotulá-lo usando esse sistema de setas e talvez eu possa fazer isso aqui, até mesmo no México. E, obviamente, você pode voltar a qualquer um dos seus esboços a qualquer momento se tiver ideias de seus outros esboços Essa é a coisa boa de esboçar. Você pode mudar as coisas rapidamente e mover as coisas no papel, é por isso que eu acho que o papel é tão bom. Agora, talvez eu volte a essa ideia de círculo que fizemos aqui e talvez fazer círculos. Então eu posso usar o mesmo sistema de etiquetagem, provavelmente com os EUA aqui e depois com os outros países aqui. Mas vou pegar essa nova folha de papel aqui e continuar com minha terceira informação. E então talvez eu faça um gráfico de linha típico aqui. Portanto, você não precisa escrever todos os números aqui. Eu já estou me livrando desse outro eixo aqui. Então, se você notar, eu só desenhei esse eixo inferior para as orelhas porque essa é uma forma mais importante de estabelecer esse gráfico de linha. Então, tudo está definido e orientado para esse resultado final que mostra o ano. Então, o resto disso tudo está meio que flutuando no topo aqui. Mas acho que isso é muito bom porque enfatiza a linha que é a informação e a parte mais importante desse gráfico. Então eu acho que neste lado direito novamente, eu vou tentar o tema do círculo novamente. E então, talvez novamente, eu destaque. Ok, então eu vou dizer, por exemplo, um estudante. Então, as pessoas sabem que esse pequeno círculo é um incidente. E então eu posso dizer três para este ano, eu posso dizer 40 para este ano, eu posso dizer 24 em cima de todos os círculos, como eu fiz para os três. Novamente, vocês só precisam fazer um total de seis esboços para cada informação. Mas eu fiz quatro informações . Então eu vou fazer oito esboços. E um gráfico circular funciona aqui porque as informações estão fora de 100%. Então, por exemplo, esse gráfico de incidentes de atirador pretendente ativo não está fora de 100%. É qualquer que seja o número, é o número de incidentes por ano. Definitivamente, use seus marcadores coloridos, seus lápis de cor, qualquer coisa para ajudá-lo a diferenciar suas informações. E não precisa ser como se essas cores não precisassem ser as cores que vou usar em meus infográficos reais. Só ajuda ter cores diferentes para distinguir esse tipo diferente de informação. Acho que vou voltar para essa linha ou esse tema de retângulo no lado direito aqui. Então, vou fazer uma espécie de gráfico de barras, mas tudo vai ser sobre proporções novamente, assim como fizemos no primeiro esboço com os círculos. Esses serão meus 50%. Eu, realmente não importa qual é o tamanho. Tudo o que importa é que os outros tamanhos dos retângulos venham ou sejam proporcionais a esse retângulo. Se for 50, eu quero fazer 33. Esse retângulo próximo a ele será um pouco menor. Acho que tenho algumas opções muito boas para mudar para o computador. Vamos nos instalar em Figma na próxima lição. 8. Configure a figura: Agora que pesquisamos seu conteúdo e começamos a fornecer esse formulário de conteúdo e nossos esboços. Vamos entrar no computador e começar a criar nossa campanha. Seu primeiro passo é abrir o Figma no seu computador. Então, basta acessar figma.com e começar um novo projeto. Então, provavelmente é assim. Depois de acessar figma.com, você deseja fazer login se tiver uma conta ou começar. Você pode fazer login com o Google, o que torna tudo muito fácil. Então, no momento, eles estão oferecendo uma versão gratuita do sigma que pode mudar no futuro. Eu só uso a versão gratuita por enquanto, mas você também pode pagar por mês por uma licença profissional que permite fazer mais algumas coisas e oferece mais alguns recursos. Mas vamos fazer a versão gratuita por enquanto. E então vamos projetar com a Figma. Basta selecionar uma tela em branco e isso gerará um novo projeto para nós. Tudo bem, então temos nosso arquivo Figma pronto para ser usado. Vou renomeá-lo rapidamente. Temos essa tela em branco, esse fundo em branco e espaço prontos para uso. Então, apenas um pequeno passeio rápido aqui pela Figma. As ferramentas estão no topo e você pode compartilhar protótipos, jogar protótipos, aumentar e diminuir o zoom. No topo, aqui. Nós, à esquerda, temos seu painel de camadas, seus ativos e suas páginas. E então, à direita, temos seus elementos de design, você está prototipando elementos e, em seguida, sua ferramenta Inspector. Portanto, não usaremos muitas dessas coisas neste projeto, mas só queríamos mostrar a vocês o local. Então, primeiro precisamos criar uma moldura que seja como o equivalente a um quadro de arte em algo como o Illustrator. Então, podemos simplesmente arrastar uma moldura em qualquer tamanho antigo que quisermos. Ou podemos escolher a ferramenta de moldura e ir para a direita e ela nos dará algumas opções predefinidas. Então, vou fazer o desktop e ele o rotulará de desktop. Então eu não quero isso. Eu quero rotular esse sistema. É aqui que vamos criar nosso sistema de design. Então, também muito rapidamente, apenas para nos manter organizados, vou renomear esse número de página do nome dessa página, da página um para o sistema. Vamos começar a configurar seu sistema de design na próxima lição. 9. Projete seu sistema: Eu sei que quando eu entro no computador, há um grande medo da página em branco ou do Canvas. forma como supero esse medo ou sensação de sobrecarga é dando pequenos passos para criar um sistema de design Logo quando começo um projeto, sistema I design é uma coleção de componentes repetíveis e um conjunto de padrões que orientam o uso desses componentes. Pense nisso como sua linguagem visual para seus projetos. Ele pode incluir fontes, cores, iconografia e outras imagens que tornam seu projeto uma peça consistente e coesa. Então, primeiro eu quero que você pense sobre o título do seu projeto. Isso deve ser algo que explique seu assunto e indique seu público sobre o que aprenderá por meio de sua campanha. Vou chamar o meu de nós mais armas porque se trata dos Estados Unidos e das armas. Eu também meio que gosto dos EUA, pareço um pouco com a gente. Então, nós e as armas meio que uma relação entre nós e as armas. Eu meio que gosto do jogo de palavras. Mas então eu vou criá-lo em uma forma mais quadrada. Quero que você crie uma hierarquia ou um sistema em que seus leitores possam ver facilmente os títulos, as manchetes e o corpo da campanha. Portanto, nossos títulos serão os títulos de nossos infográficos, os títulos de nossas páginas da web e os títulos de nossas imagens de mídia social. Então, queremos que eles sejam grandes, queremos que sejam ousados e perceptíveis. E a primeira coisa que atrai sua atenção é o que eu vou fazer com que isso seja realmente grande e ousado. Tente escolher uma fonte que tenha uma variedade de pesos em sua família. Então temos a luz, temos o regular, o médio, o negrito, o semi arrojado. Eu posso fazer muita coisa com isso. Então eu também tenho as versões Serif e Sans Serif. E então, como uma versão monotipada, que provavelmente não vou usar. Mas é uma boa opção de se ter. Então, temos nosso título. Agora vamos criar nossas manchetes. Para as manchetes, queremos que elas sejam um pouco menores do que o texto do título. Então, vou escolher 32 ou algo assim. Ok, então isso é bom. Só de olhar para isso, fica muito claro que os títulos são muito grandes e importantes. As manchetes também são bem grandes, mas não tão importantes. Mas acho que, em vez disso, gostaria de um médium. E então talvez voltemos e misturemos tudo fazendo aquela fonte san-serif novamente. Ok, então isso parece bom. É claro que você tem um título aqui, claro que você tem uma manchete. Mas agora, o que dizer do texto menor do seu projeto ou da cópia corporal? Não queremos que seja tão igual às manchetes porque será menor. Haverá mais Body Copy e , em seguida, as manchetes ou o título estão empatados. Então, precisamos torná-lo um pouco menor para que ele possa se encaixar em todos os seus outros conteúdos. Vamos tentar algo como 18. Ok, sim, isso parece bom. Então eu acho que esse é um ótimo sistema tipográfico. Agora vamos adicionar esses tecidos e Figma. Eu selecionei meu título, minha pequena caixa de texto selecionada para meu título. Vou ao meu painel de texto e clicar neste pequeno botão de quatro pontos à direita aqui que diz estilo. Você pode adicionar um estilo clicando nesse pequeno botão de adição no canto superior direito e, em seguida, você quer dar um nome a ele. Então, vamos em frente e chamá-lo de Título. Ok, agora, quando clico nele, posso ver meus estilos de texto. Por aqui. Temos nosso estilo de título, que é 64 pontos sobre 70 pontos, que é o espaçamento entre linhas do segundo número 70. Então, agora vou fazer a mesma coisa com minha manchete. No entanto, acho que não quero que 70 seja o espaçamento entre linhas, então posso editar o estilo clicando neste pequeno botão à direita aqui. Então, vamos fazer algo mais próximo de 32. Portanto, não existe essa lacuna de linha entre os dois. Então, vamos fazer 40 e ver como isso funciona. Novamente, estamos criando esses estilos no vácuo aqui. Na verdade, ainda não os estamos aplicando em um design. Assim, podemos adicionar esses estilos a qualquer momento. Como você pode ver, é muito fácil entrar e adicionar estilos ou editar estilos. Quero que você crie uma paleta de cores com pelo menos seis cores e simplesmente arraste seis caixas ou formas para trabalhar aqui. Você pode entrar e alinhar as coisas no Figma selecionando duas camadas diferentes e indo até o canto superior direito aqui Você pode ver que existem maneiras diferentes de alinhar no centro, na parte superior. Eu quero alinhar esses dois à esquerda. Tudo bem, então essas são claramente nossas cores. Então eu posso ir aqui e escolher minha forma. Eu posso entrar no painel de preenchimento , onde está apenas cinza claro neste momento. Eu posso mudar a cor e de algumas maneiras diferentes. Então, eu posso digitar o número hexadecimal aqui, ou posso clicar no quadrado e selecionar qualquer coisa nesse gradiente. Eu também posso deslizar essas cores. Eu também posso alterar a opacidade aqui. Mas eu gostei daquele vermelho. Então, vou voltar para o vermelho. Perfeito. Depois, posso criar um estilo clicando em nossos quatro pontos em um quadrado. E ainda não tenho nenhum estilo de cor aqui, então vou clicar no botão de adição chamá-lo de vermelho e criar esse estilo. Agora, se clicarmos em qualquer camada, podemos ver nossos estilos de cores começando a aparecer com nossos tecidos. Então entre e adicione pelo menos seis cores à sua paleta de cores. Ao escolher sua paleta de cores, você definitivamente quer ter uma quantidade diversificada de tons. Então, seus tons são como seu Roy G Biv, seus nomes de cores reais. Então, o vermelho, o amarelo, o verde. Dessa forma, em seus gráficos informativos, é muito fácil para as pessoas diferenciarem as diferentes cores. E as cores diferentes significarão coisas diferentes em seus infográficos, certo? Também é bom usar uma variedade de valores e seu esquema de cores. Então, por exemplo, esse roxo é bem escuro, mas esse bege é bem claro. Portanto, há um bom contraste entre si. Também é uma prática muito boa, ao criar seus esquemas de cores, verificar se é seguro para daltônicos. E é bom usar o contraste entre as cores e os planos de fundo. Você pode acessar as ferramentas de acessibilidade de cores da Adobe e verificar se o contraste está funcionando ou não em suas cores. Então, por exemplo, aqui está minha cor bege. Se eu estivesse usando minha cor bege em um fundo todo branco, por exemplo, isso não seria alto o suficiente e o contraste para ser legível. Então, eu não quero usar essa cor apenas para textos em um fundo branco. Quero usá-lo e meus gráficos que não sejam acionáveis, como botões e coisas assim, porque não são facilmente vistos. Portanto, acesse as ferramentas de acessibilidade do Adobe Color e verifique se o contraste está bom entre as cores e o plano de fundo. E sua paleta de cores é segura para daltônicos. Acho muito legal e uma paleta de cores ter uma cor cinza médio para usar textos e coisas que não queremos que sejam pretas ou muito ásperas. A última coisa que vou pedir que você faça é um botão para aprender mais. Seu botão, diremos apenas Saiba mais. E você quer que o texto pareça clicável e acessível, o que eu acho que sim. Em comparação com o corpo da cópia. É um pouco maior e um pouco mais ousado, o que eu gosto e acho que vai funcionar muito bem e chamar a atenção das pessoas. Vou mudar a cor entrando no preenchimento e clicando em nossos estilos para talvez aquele roxo. Então, dessa forma, não é preto e chato. É um pouco mais emocionante. Em seguida, vou tentar fazer um sublinhado. Então, parece um link clicável. Vou deixar a linha um pouco mais grossa e depois talvez mude para vermelha ou algo assim. Ok. Acho que parece um bom botão para mim. Não são botões muito óbvios. Portanto, um botão mais óbvio pode ser mais ou menos assim , onde tem um retângulo. E então eu vou mover isso de volta. E meu painel de camadas aqui à esquerda clicando em comando e depois na tecla de colchete esquerdo. Você pode ver no painel de camadas que ele está se movendo para baixo. Descendo. Aí está, está embaixo. Saiba mais agora. E então vou fazer com que pareça ainda mais clicável arredondando os cantos aqui à direita. E então eu não vou fazer com que seja essa cor cinza, mas talvez a cor bege, por exemplo, ok, legal. Então, acho que essas são duas boas opções de botões. Agora vou torná-los um componente que será um ativo reutilizável que podemos usar em todo o nosso projeto de design. Então, vou clicar no texto Saiba mais e na linha abaixo dele. Vou clicar com o botão direito do mouse e clicar em Criar componente. Isso vai gerar um componente para nós. E o símbolo do componente é essa pequena forma de diamante que você pode ver no painel de camadas. E então aqui em nossos estilos ou ambientes. Vou renomeá-lo a partir do botão do componente 12 ou da linha BTN. Então, talvez eu queira usar esse estilo de botão. Talvez eu não saiba, eu não sei. Então, vou criar um componente de qualquer maneira. Vou renomeá-lo como btn. Veremos se eu gosto de um ou de outro mais tarde. Mas você só precisa criar um estilo de botão. Então, agora temos todos os componentes do nosso sistema de design. Você também pode criar um conjunto de iconografia se isso ajudar a unir seus três infográficos. Agora que você estabeleceu seu sistema de design, será muito fácil começar a criar gráficos informativos, sua página da web e sua imagem de mídia social. Nas próximas aulas, vamos começar. 10. Projete suas informações: Você configurou seu incrível sistema de design no Figma. Então, agora tudo o que precisamos fazer é levar seus esboços do papel para o computador e Figma, começar criando outra página para seus infográficos. Aqui à esquerda, você deve ter seus seis esboços por perto e escolher seus três esboços favoritos para desenhar no Figma. Meus esboços favoritos seguiram esse tema circular. Então, vou começar a projetá-los no Figma e ver como eles ficam. Vou analisar rapidamente e mostrar a vocês como criei meus três tecnicamente para infográficos, mas vou dar algumas dicas profissionais ao longo do caminho. Copiar e colar é seu melhor amigo. Depois de ter alguns elementos diferentes, você os ama, basta repetir esses elementos. Isso também ajudará seu estado visual a ser muito consistente em todas as três informações. Graphic, figma ou o programa em que você está trabalhando, faça as contas para você. Eu posso simplesmente fazer o Starkey, então mude oito e digite o número pelo qual preciso multiplicá-lo e usando essa tecla de estrela, ele calculará automaticamente essa multiplicação para você. O processo de design envolve muitas tentativas e erros. Então, ajuste suas informações e seus estilos à medida que avança. Então, por exemplo neste primeiro infográfico que fiz, esbocei uma ideia muito clara ou achei clara de como eu queria que fosse. Mas quando entrei no computador , comecei a realmente fazer esses gráficos em escala com base nas informações. Não estava funcionando. Alguns dos círculos eram muito grandes. Alguns dos círculos eram muito pequenos. Então, ajustei e criei um gráfico mais consistente com tamanhos mais consistentes. Para fazer isso, tive que extrair um conjunto diferente de informações. Em última análise. Use elementos como setas , linhas e formas para rotular claramente seus designs. Certifique-se de que seus elementos de design sejam consistentes. E se não estiverem, há um significado por trás da inconsistência. Durante todo o processo, coloque-se no lugar do usuário. Por exemplo, acabei não sobrepondo os círculos como eu tinha em meus esboços. Porque achei que poderia ser confuso para meu público. Achei que talvez eles pudessem interpretá-lo como um diagrama de Venn em que a sobreposição significa alguma coisa. Já aqui era apenas uma escolha estilística que não precisava estar lá e confundir as pessoas. Minimize os textos em seus visuais usando o título ou a estatística do gráfico como rótulo ou rótulos. Então, por exemplo minha estatística aqui, eu a dividi em duas partes para atuar como rótulos para as duas peças diferentes que eu visualizei no meu gráfico. Sempre que você puder tentar não enfatizar ou minimizar as informações de suporte, como eixos , chaves e coisas assim. Por exemplo, neste gráfico de barras que estou fazendo aqui, não preciso de dois eixos. Eu não preciso de um eixo x e um eixo y. Eu posso simplesmente usar um e depois criar rótulos para ajudar a transmitir minhas informações ao meu público. Da mesma forma, você deseja rotular estrategicamente peças de seus designs, não necessariamente todo o design. Portanto, não exagere na rotulagem das coisas. Depois de rotular um ou dois lugares, seu público provavelmente perceberá o que você está tentando comunicar. Use o Figma como ferramenta de alinhamento para manter seus designs organizados e legíveis. Voltando ao conceito de copiar e colar que mencionei anteriormente, repita seus elementos de design para criar consistência e facilitar as coisas para você. Depois de criar um ou dois de seus infográficos, você provavelmente terá esses elementos consistentes como rótulos e setas, linhas e coisas assim, que você pode reutilizar em todos os seus infográficos. Isso criará uma aparência consistente para unir todos eles. Você está fazendo um gráfico circular? É muito fácil usar arcos e varreduras. No Figma, basta desenhar um círculo usando a ferramenta de elipse e um pequeno ponto branco aparecerá, esse é o arco. Então clique no ponto e arraste-o para cima ou para baixo. E você vai criar um arco, que é basicamente como uma fatia do seu gráfico circular. E a partir daí você pode entrar e dizer qual é a porcentagem que você quer que a TV de varredura seja, e essa será a porcentagem do seu gráfico circular. Não se apegue cegamente aos seus esboços. Experimente com estilo, cor e layout e continue trabalhando em seus três infográficos até ficar satisfeito com a forma como seus designs estão se encaixando. Você tem suas três informações, design gráfico. Então, vamos colocá-los em um aplicativo mais definitivo do mundo real criando um design de página da web. Na próxima lição. 11. Crie sua página da Web: Criamos um conjunto realmente incrível de três infográficos que ficam muito bem juntos. Eles estão aqui, estão lindos no nosso computador. Mas como eles vão chegar ao nosso público? Esse é o objetivo do design, é alcançar um público e compartilhar seus designs com o mundo. É por isso que vamos criar essa campanha baseada em dados em nossos três gráficos informativos. Então, vamos fazer isso criando uma página da web e uma imagem de mídia social. Dessa forma, nossos designs sairão apenas do nosso computador e se moverão para o mundo e alcançarão nosso público. Vamos começar com o design da sua página da web. Então, a primeira coisa que faremos é adicionar outra página, o design da sua página da web e o design das suas postagens nas redes sociais ficarão nesta página. Dessa forma, teremos nossa página de infográficos ainda com todos os nossos designs originais. Portanto, se você editar esses designs de infográfico a qualquer momento enquanto estiver criando seus designs de páginas da web e postagens sociais, seus designs originais não serão afetados. Vamos até a ferramenta de moldura e vamos criar uma moldura do tamanho de uma mesa. Portanto, há algumas opções diferentes nessas predefinições de desktop. Aqui à direita, vou clicar no que diz Desktop, que deve ter um tamanho de desktop bastante padrão. Antes de começarmos a pegar nossos infográficos da outra página de infográficos, vou configurar uma grade de layout rápida. Então, se formos até a direita, clicaremos em Grade de layout, exceto que eu não quero uma grade em si. Eu prefiro ter colunas. Então, vou clicar nesse botão aqui e selecionar as colunas. Você também pode fazer linhas ou simplesmente trabalhar em uma grade padrão. Mas eu gosto de configurar algumas colunas antes de começar em uma página de web design. Dessa forma, isso ajudará você a se manter organizado e a manter tudo limpo e alinhado. Normalmente gosto de fazer uma grade de 12 colunas para algo como uma página do tamanho de um desktop. Porque isso nos dará algumas opções diferentes. Podemos fazer como uma situação de três colunas. Podemos trabalhar com quatro colunas, podemos trabalhar com duas colunas. Então, eu gosto de ter algumas margens só para que as coisas não cheguem ao limite da minha página. Você sempre pode clicar nesse quadro e ocultar sua grade a qualquer momento clicando neste pequeno ícone de olho. Agora vamos entrar e configurar a estrutura da sua página da web. Então, na verdade, vamos voltar para a página do nosso sistema muito rápido e vamos inserir nosso título. E vou colocá-lo no canto superior esquerdo. Então, agora vamos estabelecer algumas noções básicas de nossa página da web e vamos fazer isso criando uma área de cabeçalho. Então, já fizemos isso arrastando e digitando nosso logotipo, ou você pode simplesmente digitar seu título simplesmente na parte superior. E isso funcionará como nosso botão Início. Normalmente, em um site padrão que existiria no canto superior esquerdo. E então podemos entrar e fazer um menu aqui. Estamos criando apenas uma página da web para este projeto. Só para fazer com que pareça um produto mais robusto, vamos criar algumas outras páginas da web aqui. Vou copiar isso. Imagine quais outros tipos de informações eu poderia incluir nesse projeto de campanha. Os proprietários de armas dizem por que as pessoas possuem armas? Quais são as estatísticas sobre quantas pessoas possuem armas? Coisas assim. Então, talvez isso seja algo que eu possa acrescentar no futuro. Acho que é um bom começo para o meu cardápio aqui. Então eu vou parar por aí. E então vou voltar para a página do meu sistema e pegar um desses botões aqui. Em geral, não quero que meu apelo à ação em todo o site seja para saber mais. Eu quero que seja algo um pouco mais específico. Então, vou dizer, tome uma atitude. Não quero que isso pareça um conjunto inútil de informações. Quero que as pessoas tenham o poder de aprender essas informações e sintam que podem agir e fazer alguma coisa. Mas pense na meta real de sua campanha: no final das contas, o que você quer que as pessoas façam depois de aprenderem sobre suas informações? E essa pode ser a principal chamada à ação em seu site. Agora vamos entrar e adicionar nossos infográficos. Ok, agora vou selecionar meus quatro infográficos. Vou copiar e depois colá-los. Então, se você pode ver aqui, eu estou vendo apenas um infográfico por vez. Então, as pessoas realmente precisam rolar para baixo para ver todos os seus infográficos. Mas, na realidade, muitas pessoas não se dão ao trabalho de rolar até o fim de uma página. Então, se você realmente quer que eles vejam todos os seus infográficos talvez seja inteligente coletá-los mais no topo. Vou fazer alguns ajustes nesta página e tentar colocar a maioria dos meus infográficos acima da lista. Então, o que acabei fazendo foi meio que optar por esse tipo de look de feed do Pinterest. Coloquei todos os meus gráficos e suas próprias caixas e depois deixei o fundo um pouco mais escuro. Porém, algo que eu queria fazer muito rápido é garantir que meu usuário esteja orientado no site. Então, esta página e esses infográficos são todos sobre violência armada. Vou colocar em negrito e sublinhar esse item sobre violência armada no meu menu para garantir que as pessoas saibam que essa é a página em que estão neste site. Uma última coisa que eu realmente quero fazer é garantir que as pessoas possam aprender mais sobre cada uma dessas informações. Então, vou fazer isso adicionando um botão para aprender mais a cada uma dessas peças aqui. Certifique-se de agrupar os botões gráficos e quaisquer outros elementos de design de forma adequada Você pode usar caixas como essa ou linhas divisórias e deixar bem claro qual título corresponde a qual infográfico, qual botão Saiba mais corresponde a quais informações, etc. Esse projeto e seus infográficos não parecem mais reais agora, parece um produto real que poderia existir apenas incorporando alguns gráficos básicos? habilidades de design e web design. Agora que temos seus gráficos de informações todos configurados e o design de sua página da web, vamos colocá-los em outro aplicativo ou em outra forma conectarmos ao seu público, que é por meio das mídias sociais. Então, na próxima lição, vamos trazer esses gráficos informativos para uma imagem de mídia social. 12. Crie seu post social: Temos sua página da web e seus gráficos de informações prontos para uso. Isso é ótimo. Eles já estão alcançando um público, mas precisamos divulgar mais rápido. Precisamos educar mais pessoas. Então, vamos fazer isso criando uma postagem nas redes sociais. Então, vamos configurar outro quadro ao lado do quadro da nossa página da web. Vamos usar a ferramenta de moldura e depois vamos para as mídias sociais. E há um monte de predefinições aqui, assim como tínhamos na configuração do nosso desktop. E há uma configuração de página de histórias do Instagram aqui. Então, vamos clicar na história do Instagram. Vamos mudar o nome para publicação social. Ok, então temos tudo configurado. A primeira coisa que faremos é adicionar nosso tipo de logotipo ou título. Tudo o que você acabou fazendo como um pequeno círculo aqui. Então, no Instagram Stories, normalmente , seu perfil, foto ou imagem, como é chamado hoje em dia, geralmente está neste pequeno ícone no canto superior esquerdo. Vamos fazer com que isso pareça real e como se estivesse realmente no Instagram criando esse pequeno círculo com seu logotipo ou título nele. Instagram também tem uma caixa de texto ao lado para inserir o título da sua conta do Instagram. E, o mais importante, vamos escolher um de seus infográficos para apresentar aqui. Torne-o ousado, torne-o colorido e atraente. Então, isso chamará a atenção de todos e fará com que as pessoas se envolvam com sua postagem. Seu objetivo é fazer com que as pessoas cliquem no link do seu site para saber mais sobre seu tópico usando botões para que os usuários possam clicar e obter mais informações sobre seu site. Então, estou muito feliz com o resultado meu design de postagem social. Acabei fazendo alguns ajustes, como voltar a usar essas setas para minhas etiquetas. Em vez de fazer essa chave como fiz com o design da minha página da web. Então, acho que esse é um design muito divertido e acessível que funcionará bem para uma história no Instagram. Trabalhe no design de suas postagens sociais até ficar satisfeito com isso. E então vamos criticar nossos projetos na próxima lição. 13. Crítica de seu design: Agora que você montou alguns designs incríveis, é hora de trocar seu chapéu de designer por seu chapéu de crítica. Isso pode ser muito difícil de fazer, mas é muito importante, como designer, sempre se esforçar e garantir que você esteja fazendo o melhor trabalho possível. Definitivamente, recomendo fazer uma pausa ao mudar do modo de design para o modo crítico. Pode ser muito difícil, quando você acaba de criar algo realmente incrível do qual se orgulha , julgá-lo e desafiá-lo. Mas ao julgar e desafiar seu trabalho, é assim que você cresce como designer. Então, eu recomendo fazer uma pausa de cerca de 24 horas entre projetar algo e depois criticar algo. Aqui estão algumas perguntas que você pode fazer a si mesmo enquanto critica seu trabalho. Seus designs comunicam sua história? Lembre-se de que, no início desta aula, você inventou uma história que gostaria que ela contasse sobre o assunto. Essa história está aparecendo com seus três infográficos? A mensagem ou as informações são claras e fáceis de entender? Talvez agora que você esteja olhando para trás e desafiando seu trabalho, um gráfico não tenha saído exatamente como você pensava. E talvez seja confuso ou simplesmente não esteja funcionando. E o formato que você escolheu originalmente são todos os seus textos e elementos de design legíveis? Será muito difícil comunicar sua história se seu público não conseguir ler seu texto ou ver seus gráficos circulares, se seus rótulos, unidades e chaves distraírem as informações. Lembre-se de que suas informações são a coisa mais importante sobre seu gráfico. Você não precisa de nenhum elemento extra distraia as pessoas da mensagem principal ou da sua história. E o mais importante, você está mostrando e não apenas contando? Você sempre pode pedir a seus amigos ou familiares que dêem uma olhada. Dessa forma, ele oferecerá uma perspectiva totalmente nova e externa da sua. Implemente qualquer um desses pequenos ajustes ou talvez grandes ajustes que você precise para melhorar seu design e prepará-lo para salvá-lo como nossa versão final na próxima lição. 14. Salve seus projetos: Você implementou todas as suas mudanças. Você tem designs muito fortes dos quais obviamente se orgulha e mal posso esperar para ver. Então, agora precisamos salvar sua arte final para que possamos compartilhá-la com nossos colegas aqui no Skillshare. Sigma facilita muito a exportação de seus designs. Tudo o que você precisa fazer é clicar nos quadros que deseja exportar. Então, queremos que nossa página da web e nossas postagens sociais sejam compartilhadas no Skillshare. Então, vamos selecionar esses dois quadros. Vamos até a parte inferior do painel direito e clicaremos em Exportar. Você pode salvá-lo como PNG ou em alguns tipos de arquivo diferentes. Mas acho que PNG ou JPEG é provavelmente o melhor para nossos propósitos de classe. Hoje, você seleciona seu tipo de arquivo. Você pode adicionar qualquer nome de arquivo aqui, mas isso apenas salvará automaticamente seus arquivos como o nome do quadro. Portanto, ele salvará isso como página da web. E essas são postagens sociais, é por isso que é muito importante, novamente, manter a organização e o Figma e rotular seus quadros, suas páginas de forma adequada. Isso apenas o preparará para o sucesso. Mais tarde. Podemos seguir em frente e clicar em Exportar duas camadas. E ele baixará automaticamente nossas duas camadas em um arquivo zip. Parabéns, depois de todo o seu trabalho árduo, você finalmente salvou seus designs finais. E mal posso esperar para vê-los. Certifique-se de enviar essas duas imagens junto com seus esboços para a galeria do projeto. Coloque seus designs e uma maquete para ajudar a ver como seria um produto real e torná-lo mais real no site do seu portfólio. Agora, vamos encerrar algumas pontas soltas em nossas últimas aulas. 15. Outros aplicativos: Todas as habilidades importantes que acabamos de aprender podem ser aplicadas em qualquer campo e aplicação do design. Espero que você esteja tão empolgado quanto eu em aplicar essas habilidades realmente importantes em qualquer projeto de design. Como mencionei antes, você pode continuar com este projeto. Você não precisa se limitar a apenas três gráficos informativos. Você pode criar 100 gráficos para colocar em sua campanha baseada em dados. Atualize seu processo de design usando as etapas que seguimos nesta aula para dar forma ao conteúdo por meio de esboços e iterações. Em outras palavras, não apenas parando na primeira ideia, mas realmente ultrapassando os limites e fazendo mais esboços ou experimentando diferentes estilos de design. Use um sistema de design e seu processo para criar projetos de design consistentes e visualmente coesos. Estabelecer esses estilos com antecedência e seu projeto pode realmente fazer uma grande diferença e ajudar tudo a se encaixar no final, além de facilitar o foco geral em vez dos pequenos elementos de design que aparecem à medida que você projeta, crie esquemas de cores mais estratégicos que sejam mais inclusivos para um público mais amplo usando os Adobe Color ferramentas de acessibilidade. Pratique empatia com os usuários considerando como os outros podem ver ou usar seu design durante todo o processo de design. Saiba mais sobre web design, experiência do usuário ou design de interface, marketing e mais tópicos que exploramos e abordamos em seu projeto. Vamos encerrar tudo na última lição. 16. Conclusão: Parabéns, você deve estar muito orgulhoso de si mesmo por trabalhar neste projeto de design de informações realmente desafiador, mas esperançosamente perspicaz. Você aprendeu muito nesta aula de design da informação, como dar forma ao conteúdo, contar histórias visuais, praticar empatia pelos usuários, criar sistemas estratégicos de design, criar projetos visualmente coesos, e design e Figma. Mas se você tirar apenas uma coisa dessa aula, espero que você possa e deva continuar si mesma novas maneiras de desenvolver suas habilidades visuais de resolução de problemas. Desafie a si mesmo e suas habilidades regularmente criando novos projetos para seu portfólio, como o que criamos nesta aula. Isso fortalecerá significativamente seu portfólio para ajudá-lo a conseguir empregos e aprimorar seus conhecimentos simultaneamente. Não se esqueça de enviar seu projeto de campanha para a galeria do projeto publicando seus esboços , sua página da web final e os designs de mídia social. Não deixe de entrar em contato comigo ou com qualquer um de seus colegas para obter novas perspectivas, obter feedback e, com sorte, melhorar nossa comunidade de design. Muito obrigado por fazer este curso comigo e aprender mais sobre design da informação. vejo na próxima aula.