Neste artigo pretendo explicar um pouco sobre o que é um infográfico e dar algumas dicas/técnicas que utilizo para criar um! Talvez o meu processo de criação de infográficos possa te ajudar alguma hora : )
Primeiramente, o que é um infográfico?
Vamos buscar seu significado no dicionário online (https://www.dicio.com.br/infografico/)
Etimologia (origem da palavra infográfico): info + grafia.
“Explicação feita por meio de imagens (fotografia, desenho, gráficos, anagramas etc.) que, no jornalismo, é usada para sintetizar uma notícia ou resumir as informações apresentadas num texto.”
Basicamente, é uma forma de mostrar um texto de jeito mais dinâmico e ilustrativo. Os infográficos são ótimos em explicar assuntos em um tom menos cansativo e mais atraente, além de complementarem as informações com elementos visuais.
Alguns exemplos de usos para infográficos:
1- Para ilustrar o processo de alguma coisa, geralmente dividido em etapas/passos.
2- Linhas do tempo.
3- Ilustrar informações ou valores numéricos visualmente por meio de gráficos circulares, barras, linhas, etc.
4- Resumir um texto de forma mais visual, atrativa e ajudar no entendimento deste.
5- Fazer comparações.
Agora que já sabemos o básico sobre infográficos, vamos testar criar um!
Vou mostrar o processo de criação de um infográfico simples, apenas com o intuito de explicar o passo a passo do desenvolvimento.
Passo 1 – Definir o tema e conteúdo do infográfico
O que pretendemos informar no infográfico? Agora é a hora de criar o conteúdo!
No meu infográfico de exemplo irei falar sobre o processo de calibrar baterias para celulares Android, por envolver apenas 4 passos e ser um texto pronto deste link. Mas geralmente você pode se deparar com um texto maior que alguém o enviou para transformar em um infográfico. Neste caso, é importante evitar que o texto ocupe grande parte da arte e fique maçante de ler. Você pode, por exemplo, dividi-lo em tópicos com alguns parágrafos curtos explicativos, e balancear estes com imagens.
Passo 2 – Ideias/Inspiração para o infográfico
Iniciar algum projeto pode ser difícil se não tivermos ideias ou estivermos inspirados, especialmente se for algo que nunca fizemos antes. Quando isso acontece, podemos buscar referências! Eu costumo utilizar muito o Pinterest para me inspirar, criando boards com as artes que mais gostei. Busque por cores, formas, diagramações e tudo que achar interessante para o seu projeto! Deixarei aqui um board que criei com algumas referências legais de infográficos: Board Infográficos
Passo 3 – Rascunho do infográfico
Como podemos diagramar nosso texto e imagens? Vamos rascunhar possibilidades de organização das imagens/texto/elementos. Esse rascunho servirá como base para a estrutura do infográfico quando formos criá-lo no computador. Lembrando que existem muitas formas de fazer um infográfico, mas que o ideal é seguir algumas hierarquias (exemplo: títulos com fonte maior, parágrafos com fonte menor) para melhorar o entendimento.
Passo 4 – Estrutura Digital do infográfico
Passamos a estrutura escolhida para o digital. Vamos colar os textos posicionando eles onde imaginamos na estrutura, deixando espaços para as imagens que iremos criar a seguir. Os rabiscos no papel nos pouparam tempo que gastaríamos escolhendo as posições dos elementos no computador e tivemos mais liberdade para criar as estruturas. Mas você pode rascunhar direto no computador se você se sentir mais confortável.
Passo 5 – Imagens do infográfico
Vamos acrescentar vida ao infográfico! Precisamos traduzir de alguma maneira visual cada passo do processo de calibração de bateria. Existem muitas formas de fazer isso: podemos usar fotos, desenhos ou até mesmo ícones. Eu irei optar por criar ilustrações não muito complexas de cada passo. Para isso, vou analisar as informações e recorrer referências de imagens na internet e transformá-las em desenhos.
Passo 6 – Elementos Definidos do infográfico
Após criarmos todas as imagens, conseguiremos organizar os elementos na estrutura. Para deixar o layout um pouco mais dinâmico, coloquei as imagens e textos em zigue-zague. Isto evitou que os elementos repetidos ficassem um de baixo do outro e deixou o infográfico mais balanceado. Em seguida, iremos falar das cores!
Passo 7 – Cores do infográfico
Vocês devem ter notado que não me preocupei muito com as cores até agora. Isto porque não queria que elas interrompessem meu processo de criação da estrutura e imagens, já que eu poderia decidir mudar as cores no meio do caminho durante a execução de uma imagem e outra, por exemplo. Assim, agora eu fico mais livre para focar e pensar nas cores do conjunto total.
Mas como escolher combinações de cores interessantes? Caso você tenha dificuldade em criar combinações, existem sites que criam elas para você! Um exemplo deles é o Design Seeds, onde existem várias paletas de cores criadas a partir de fotos.
Outro site interessante é o Designspiration. Nele, o processo é um pouco diferente: você pode escolher buscar artes/designs pela cor que selecionar na busca. Então, se por exemplo, eu queira ter uma ideia de cores interessantes para se usar com amarelo, posso buscar resultados que tenham essa cor e me inspirar nos designs feitos por outros profissionais! Assim sabemos as tendências de combinações com cada cor e ficamos menos perdidos na hora de criarmos nossa própria paleta.
Passo 8 – Ajustando as cores do infográfico
Decidi limitar minha paleta a 5 cores. Existem várias artes de infográficos que se limitam a usar poucas cores para deixar um visual mais clean, mas isso é opcional e depende do estilo de infográfico que deseja criar.
Caso ainda não esteja satisfeito com as cores que escolheu, existe um método de alterar elas sem ter que mudar em cada parte da arte. Você pode usar o Selective Color ou Hue/Saturation do Photoshop para modificar as cores conforme desejar!
Passo 9 – Fontes do infográfico
Títulos exigem fontes mais trabalhadas e que chamem mais atenção, de preferência uma fonte diferenciada dos parágrafos já é uma boa opção. Alguns infográficos até mesmo possuem lettering em seu header. Para os textos corridos, é recomendado fontes que tenham uma boa leitura.
O pacote Adobe Cloud oferece o TypeKit, que é um sistema de sincronização de fontes para uso comercial/pessoal. Outros sites interessantes para se buscar fontes são:
E um site muito útil para conferir alguma frase escrita em todas as fontes de seu computador é o Wordmark. Apenas digite a frase no logo do site e tecle enter.
Passo 10 – Efeitos Finais do infográfico
Por fim, você pode adicionar um pattern ou textura. O site Subtle Patterns disponibiliza gratuitamente padrões/texturas para fundos e você pode testá-los no próprio site antes de baixar.
Concluindo…
Espero que alguma destas dicas tenham sido úteis de alguma maneira para vocês. Eu irei disponibilizar abaixo o arquivo PSD do infográfico criado neste post, mas caso houver alguma dúvida entre em contato comigo por jennifer@lumi.trianons.com.br !: )
