The Do’s And Don’ts Of Infographic Design

• 12 min read
• Design,Data Visualization,Infographics
• Saved for offline reading
• Share on Twitter, LinkedIn

Since the dawn of the Internet, the demand for good design has continued to skyrocket. Da Web 1.0 para a Web 2.0 e mais além, os designers têm permanecido atentos à medida que definem as tendências e expectativas do nosso universo online.

P>Editor’s Note: Você pode querer ler o artigo de Nathan Yau The Do’s And Don’ts Of Infographic Design: Revisitado aqui na Smashing Magazine que é uma resposta a este artigo.

Desde o início da Internet, a procura por bom design tem continuado a disparar. Da Web 1.0 à Web 2.0 e mais além, os designers têm permanecido atentos à medida que definem as tendências e expectativas do nosso universo online. A Internet é um grande parque de diversões para designers, e as empresas online estão cada vez mais agradecidas pelo que se pode ganhar com um pouco de doces para os olhos bem executados. Nos últimos dois anos, este facto tornou-se a espinha dorsal de uma tendência crescente no marketing online: o infográfico.

Infográficos são representações visuais de informação, ou “data viz”, como os miúdos fixes lhe chamam hoje em dia. O termo “data viz” vem de “data visualization”, o que implica que conjuntos de dados serão exibidos de uma forma única que pode ser vista, em vez de lida. Esta visualização não deve ser deixada à interpretação, mas sim desenhada de forma a proporcionar uma conclusão universal para todos os telespectadores. Em termos mais simples, os infográficos não são muito diferentes dos gráficos e gráficos que programas como o Excel vêm cuspindo há anos.

Leitura adicional no SmashingMag:

• Engaging Instances Of Interactive Infographic Design
• Data Visualization and Infographics Resources
• Imagine A Pie Chart Stomping On An Infographic Forever
• Fun With Physics In Data Visualization

Of course, just as Web 2.0 mudou 1.0, os infográficos de hoje são muito mais chamativos do que simples gráficos de pizza e gráficos de barras. Hoje em dia, os infográficos compilam muitas visualizações de dados diferentes em uma peça coesa de “doce para os olhos”. Eles evoluíram com tendências de design, receberam alguns facelifts criativos, e a Internet está agora sendo preenchida com informações interessantes entregues de forma cativante.

Embora algumas tendências de design venham e vão, os infográficos estão aqui para ficar. Com marcas como USA Today, The New York Times e Google e até mesmo o presidente Obama ficando atrás deles, os infográficos estão se tornando uma ferramenta poderosa para disseminar enormes quantidades de informação para as massas. Empresas grandes e pequenas estão usando infográficos para construir suas marcas, educar seu público e otimizar seu ranking nos motores de busca através da construção de linhas. É por isso que aprender a desenhar um bom infográfico é uma obrigação, e evitar as armadilhas comuns do design infográfico pode significar a diferença entre aterrissar um grande cliente e perdê-los por completo.

Wrapping Your Mind Around Data Viz And Infographic Design

Desenhar um infográfico não é o mesmo que desenhar um website, panfleto, brochura, etc. Mesmo alguns dos melhores designers, com portfólios que o fariam babar, não conseguem executar um design infográfico eficaz. Criar infográficos é um desafio e requer uma mentalidade que não vem naturalmente para todos. Mas essa mentalidade pode ser conquistada através da prática e da adesão a certos padrões, o mais importante dos quais é respeitar e compreender os dados, por exemplo, aqui estão algumas regras simples a seguir ao envolver a sua mente em torno de dados apropriados, por exemplo,

Show, Don’t Tell

Uma regra do cinema é mostrar, não contar. O mesmo se aplica ao design infográfico. O fundamento de qualquer bom desenho infográfico é o dado, ou seja, como designer infográfico, você pode ou não determinar o conceito e compilar toda a pesquisa para o desenho final, mas de qualquer forma você é responsável por transformar essa informação em um desenho visualmente estimulante e coeso que conta uma história e que não perde uma única oportunidade de visualizar os dados. Tome como exemplo esta parte de um infográfico sobre o Twitter pela ViralMS:

O que há de errado com este infográfico? Quebra a primeira regra logo à saída do portal. Quando você tiver a oportunidade de exibir informações visualmente, aproveite-a. Aqui, os tweets por segundo poderiam ter sido mostrados pelo menos em um gráfico de barras. Isto permitiria que alguém olhasse rapidamente para esta seção e visse o que está acontecendo; ao ver as várias alturas das barras, o olho poderia ter rapidamente medido as diferenças de tweets por segundo por evento sem ter que ler nada.

Se você estiver tendo problemas para aderir a esta regra, tente manter todo o seu texto em uma camada do seu arquivo AI (excluindo o texto dentro dos gráficos e gráficos). De vez em quando, desligue a camada de texto e veja se o infográfico ainda faz sentido. Se não houver nenhum dado viz, ou se um monte de figuras estiver faltando contexto, então você está fazendo muita coisa e não está mostrando o suficiente.

Se o cliente quisesse um gráfico do Excel, eles não precisariam de você

Pode parecer duro, mas é verdade. Se os infográficos fossem tão simples como colocar um monte de gráficos e gráficos padrão em uma página, então os clientes não precisariam procurar grandes designers. Muitas ferramentas estão online que podem criar gráficos de torta coloridos, gráficos de linha e gráficos de barra, então você tem que levar as coisas para o próximo nível para o seu design se destacar. Levando os dados de cima, qual dos dois gráficos abaixo você acha que faria um cliente mais feliz?

Se você respondeu o Gráfico B, você está pegando. Claro, nem todos os dados se prestam a gráficos criativos e únicos. O Gráfico A poderia funcionar muito bem se o resto do infográfico compartilhasse uma estética semelhante. Às vezes você só precisa morder a bala e produzir um gráfico de barras tradicional ou gráfico de torta; no entanto, considere sempre maneiras de vesti-lo, como nos exemplos abaixo:

Tipografia não deve ser uma muleta

Tipografia pode fazer ou quebrar um desenho, mas não deve ser a solução para um problema de dados, por exemplo. Na maioria das vezes, os designers começam um infográfico com muita energia e excitação, mas eles perdem o vapor rapidamente à medida que continuam a descer a página. Isso muitas vezes leva a decisões rápidas e soluções ruins, como usar a tipografia para mostrar um grande número em vez de visualizá-lo de alguma forma. Aqui está um exemplo:

Quando vejo isto, lembro-me da campanha publicitária “Where’s the beef?”, e penso: “Where’s the data viz? Embora o Sketch Rockwell seja uma das minhas fontes favoritas de todos os tempos, este é um exemplo perfeito de confiar demasiado na tipografia.

Ainda que lhe seja fornecido um número de pesquisa para um infográfico, pergunte-se como pode ser visualizado. As percentagens podem sempre ser visualizadas com gráficos de pizza criativos; os valores numéricos num conjunto podem normalmente ser transformados num gráfico de barras único; e quando os números não cabem numa escala consistente, você pode ser capaz de visualizá-los num diagrama. Aqui está outra forma de visualizar os dados acima:

Tipografia Tem Seu Lugar

Tudo isso dito, a tipografia tem seus usos, que não devem ser ignorados ao criar um infográfico. Na maioria das vezes, você vai querer focar suas energias tipográficas criativas em títulos e cabeçalhos. O título do infográfico é uma oportunidade perfeita para usar uma fonte divertida e apelativa e para lhe dar um tratamento que se enquadre no tema ou tópico. Apenas certifique-se de que o título não é tão perturbador que nos afaste do motivo pelo qual estamos a olhar para o infográfico em primeiro lugar. A verdade da questão é que alguns tópicos infográficos são chatos, mas o design correto do título pode envolver as pessoas o suficiente para percorrer.

Simplesmente, os títulos ajudam a quebrar um infográfico e tornar os dados mais fáceis de serem absorvidos, dando a você outra chance de deixar sua bandeira de fontes voar.

Organização e Storyline

Organizar um infográfico de uma forma que faça sentido e que mantenha o espectador interessado nem sempre é fácil, mas faz parte do trabalho para a maioria dos designers infográficos. Normalmente, você receberá muitos dados e precisará criar uma história visual a partir deles. Isso pode ser um desafio no início, mas você pode seguir algumas regras gerais para facilitar as coisas.

Wireframe the Infographic

Wireframing an infographic permite que você trabalhe um storyboard e um layout para o design. Você pode ter uma idéia da história que você quer contar, mas quando você começar a colocar as coisas para fora, você pode bater numa parede e ter que começar de novo. Ter que reorganizar depois de já ter feito muito do design é incrivelmente frustrante. Evite isso, montando seu enredo no início para determinar que dados mostrar e como. Reserve uma hora para esboçar as coisas e certifique-se de que tudo faz sentido. Isso também ajudará a garantir que a paleta de cores que você escolher direcionará a atenção para os pontos importantes e manterá os olhos fluindo pela página.

Pense Fora da Caixa

Como você armar o infográfico com fio, você identificará quebras de seção que ajudam a contar a história. A maioria dos infográficos online tem um fluxo vertical, no qual cada seção tem um cabeçalho para distingui-la da última. Isto torna-se aborrecido rapidamente. Organizar os dados e seccionar as informações sem depender inteiramente de cabeçalhos e quebras de cor é uma boa maneira de quebrar a monotonia.

Por exemplo, ao invés de ir para um típico layout de uma coluna, você poderia usar duas colunas em certas partes. Você também poderia quebrar seções com bordas, com fundos de diferentes formas ou dar ao desenho inteiro um tema de estrada ou caminho. Aqui estão alguns layouts fora da caixa para fazer fluir os seus sucos criativos:

Tell a Story

Todas as boas histórias têm um começo, meio e fim. Os infográficos merecem o mesmo tratamento. No início da infografia, introduza o problema ou tese. A partir daí, faça o backup com dados. Finalmente, termine o infográfico com uma conclusão.

Visualize o Gancho

Tudo o infográfico bom tem um gancho ou decolagem primária que faz o espectador dizer “A-ha!” Como designer, você deve fazer deste gancho o ponto focal do desenho, se possível. Colocar o gancho no centro ou no fim do infográfico é normalmente o melhor, para que ele chame mais atenção. Dê às informações mais importantes o maior peso visual, para que os telespectadores saibam o que devem tirar. Aqui estão alguns exemplos de ganchos bem visualizados:

Coisas de limpeza com cores

A diferença que uma paleta de cores pode fazer é surpreendente, especialmente no mundo da infografia. A paleta certa pode ajudar a organizar um infográfico, evangelizar a marca, reforçar o tema e muito mais. A paleta errada pode transformar um grande tópico em uma dor de olhos, prejudicar a imagem da marca e transmitir a mensagem errada. Aqui estão algumas dicas a considerar ao escolher cores para o seu infográfico.

Make It Universal

Em Web design, é sempre importante escolher uma paleta que se encaixe no tema do site e que seja neutra o suficiente para um grupo diversificado de visitantes. Como os infográficos são principalmente compartilhados online, escolher a paleta certa para um conjunto de visitantes é igualmente importante. Você também deve considerar o que parece bom online.

Por exemplo, cores escuras dominantes e neons normalmente não traduzem bem em infográficos; neons em preto podem ser difíceis de ler, e se houver muitos dados, levar tudo isso será um desafio. Além disso, evite o branco como fundo sempre que possível. Os infográficos são frequentemente compartilhados em vários sites e blogs, a maioria dos quais com fundo branco. Se o fundo do seu infográfico também for branco, então decifrar onde ele começa e termina será difícil.

Uma paleta de três cores é fácil nos olhos

Com todos os dados que vão para um infográfico, certifique-se de que o olho do leitor flui facilmente pela página; a paleta de cores errada pode ser uma grande barreira para isso. Escolha uma paleta que não ataque os sentidos. E considere fazer isso antes de começar a projetar, pois isso o ajudará a determinar como visualizar os vários elementos.

Se escolher uma paleta de cores for difícil para você, siga a regra dos três. Escolha três cores primárias. Das três, uma deve ser a cor de fundo (geralmente a mais clara das três), e as outras duas devem quebrar as seções. Se você precisar adicionar outras cores, use tons das três cores principais. Isto irá manter a paleta coesa e calma, em vez de jarring.

Utilize as ferramentas à sua disposição

Ao escolher as cores, não tem de reinventar a roda. Uma série de grandes sites por aí o ajudará a escolher a paleta certa para o seu infográfico. O Kuler da Adobe oferece novos temas e uma base de dados pesquisável, assim como uma ferramenta fácil para ajustar a paleta que lhe interessa. Um problema com o Kuler é que todas as paletas têm cinco cores, e as cores são por vezes de famílias completamente diferentes, em vez de sombras de algumas cores primárias, por isso encontrar a paleta certa pode ser como procurar uma agulha num palheiro.

Uma outra ferramenta de selecção de cores é COLOURlovers. Esta base de dados é mais fácil de pesquisar: ela divide as paletas em diferentes temas e pode ser classificada por favoritos. Enquanto a maioria das paletas também consiste em cinco cores, as cores nem sempre têm o mesmo peso; em vez disso, a ferramenta sugere qual deve ser a dominante. Aqui estão algumas boas e más paletas para infográficos:

Pensamentos Finais

Embora estes padrões sejam importantes a considerar para a maioria dos desenhos infográficos, às vezes aparece um infográfico que quebra todas estas regras e ainda assim é imensamente bem sucedido. No final, os clientes gostam de “olhos doces” e desenhos que “estouram”! Embora tais termos sejam subjetivos (e irritantes para a maioria dos designers), todos nós conhecemos um ótimo design infográfico quando vemos um, e seus clientes também conhecem. Use estas regras para guiá-lo para o reino infográfico, mas crie suas próprias técnicas e padrões depois de ter adquirido alguma experiência.

(al)