Aplicando Duotônicos aos Dados
A capacidade de tingir fotos em preto-e-branco com cores tem sido um marco da fotografia por décadas, e os editores de imagem modernos fazem o aquecimento e resfriamento das imagens em tons de cinza num piscar de olhos.
Este conceito de uma progressão constante de tons pode ser usado para apresentar informações também.
Essa técnica de tingimento de fotos digitais funciona bem para apresentar informações e melhorar a usabilidade.
Assim como um gradiente mostra um intervalo de cores, um monótono ou duotônico pode ser usado para mostrar um intervalo de dados.
Neste artigo, aprenderemos como aplicar cores para melhorar os infográficos.
A menos que eles estejam calculando as vendas, a maioria das pessoas não associa planilhas a fotografia de belas-artes. Mas mesmo fora do mundo da contabilidade, mesas e duotones podem se misturar. O truque é saber quando usar cores.
Tingimento Melhora uma Imagem em Escala de Cinza
Imagens digitalmente em sépia são imagens em tons de cinza cujos pixels foram ligeiramente coloridos, geralmente com bege ou azul. Laranja ou amarelo pode replicar o efeito de fotos envelhecidas, que às vezes eram tingidas com pigmento sépia. Os tons sépia (ou, mais amplamente, monótonos) podem “aquecer” ou “esfriar” uma imagem em preto-e-branco (tons de cinza) sem prejudicar a composição.
A diferença entre uma imagem em tons de cinza e uma em tons de sépia é o tom da sépia, como visto acima. Qualquer foto digital pode ser transformada em um tom sépia, embora algumas fotos funcionem melhor que outras. As imagens que dependem mais de cor (especificamente matiz) do que o contraste geralmente enfraquecem na transição para o tom.
A rosa impressionante brilha na imagem original acima, mas desaparece quando os tons se tornam uniformes. Mesmo que uma imagem possa funcionar com uma tonalidade, a tonalidade errada pode dominar a foto.
Uma tonalidade pode se tornar um truque se a cor for muito óbvia. Acima, a foto original assume um ar psicodélico quando muito azul é aplicado. O objetivo não é adicionar cor, mas adicionar "sabor".
Usar mais de uma cor em uma tonalidade é possível:
Os três tipos de matizes acima são apropriadamente nomeados. Monótonos aplicam o mesmo matiz em toda a imagem. Duotones usam uma tonalidade para sombras e outra para destaques. Tritones adicionam um terceiro matiz para tons médios.
Duotones fornecem intervalos naturais
Tabelas e gráficos de barras tradicionais funcionam em duas dimensões, mas nem todos os dados se ajustam ao formato da coluna da linha.
Um duotônico é ótimo para apresentar uma variedade de dados, pois é ele mesmo um intervalo de cores. Esteticamente falando, misturas de duas cores principais tendem a parecer que pertencem umas às outras. Mas aplicado a dados, os intervalos de cores têm outros benefícios. Primeiro porque nem todo mundo pode ver bem as cores , usando uma gama de cores escuras a claras, ajuda as pessoas com deficiências visuais para ver o efeito. Em segundo lugar, tons distintos são úteis para representar conjuntos diferentes de dados.
Os gráficos abaixo mostram os volumes de vendas de uma empresa fictícia ao longo de vários anos. Como as cores poderiam melhorá-las?
Vamos pegar gráficos um por um:
- 1998: este gráfico de barras padrão usa espaço para explicar dados. A altura e posição horizontal de cada barra nos informa como as vendas foram em cada trimestre do ano. É funcional e claro.
- 1999: A codificação por cores das barras adiciona estilo, mas não nos diz nada de novo. As cores poderiam ter sido usadas para agrupar as barras, mas como cada barra tem uma cor diferente, nada é melhorado. Podemos dizer a diferença entre cada barra com a mesma facilidade sem cor.
- 2000: Usando cores verticalmente mostra como as barras se relacionam entre si. Por exemplo, observe como o Q4 mal atinge a área vermelha, um fato facilmente ignorado nos dois primeiros gráficos.
- 2001: Este último usa um duotônico, mas não ajuda. Adicionar um efeito sem tornar os dados mais informativos não beneficia o usuário. Essa é a diferença entre um truque e um aprimoramento.
Os gráficos acima usam variação de cor em vez de barras sólidas. Ambas as versões têm o mesmo objetivo: mostrar as vendas em incrementos por trimestre. Cor leva os dados um passo adiante.
- 2002: O ponto de equilíbrio acrescenta algumas novas informações: as vendas devem ultrapassar essa linha para a empresa obter lucro. O gráfico de 2002 mostra que a empresa operou com prejuízo em apenas um trimestre.
- 2003: Uma diferença no sombreamento indica o ponto de equilíbrio. Mas está claro o suficiente?
- 2004: As áreas das barras mostrando lucro são indicadas de forma ainda mais clara aqui, mas perdemos os incrementos.
- 2005: O oposto do gráfico de 2004, este marca incrementos acima do ponto de equilíbrio, indicando claramente o lucro da empresa (se houver) em cada trimestre e ignorando o resto.
A cor é uma ferramenta poderosa para comunicação não verbal. Além da estética, pode ser usado para organizar. De que outra forma poderíamos usar as cores no último conjunto de exemplos?
- 2006: Os gradientes indicam onde cada barra atinge as marcas de US $ 20.000 e US $ 40.000. Isso é útil, mas o ponto de equilíbrio é de US $ 30.000.
- 2007: gradientes puros ficam mais escuros para mostrar vendas mais altas - até chegarmos ao ponto de equilíbrio. Como as cores acima da marca de US $ 30.000 são semelhantes à cor de fundo, elas desaparecem. O alto contraste chama a atenção para o fato de a empresa ter lucrado em apenas três trimestres.
- 2008: Inverter o gradiente na metade do eixo y é uma abordagem incomum. Isso implica que o bloco de US $ 20.000 a US $ 30.000 é significativo, mas não o ponto de equilíbrio de US $ 30.000 em si. Ao contrário dos gradientes puros para 2007, no entanto, esse gráfico indica claramente cada incremento de US $ 10.000.
- 2009: Eles dizem que algumas regras foram feitas para serem quebradas, mas este gráfico as quebra sem motivo aparente. Nenhum dos tons corresponde aos incrementos do dólar, e o ponto de equilíbrio é difícil de ver. O sombreamento funciona melhor quando informa algo ao usuário. Sombrear por si só é mera decoração.
Mais exemplos
Essa técnica não se limita a gráficos de barras.
Os dados acima compilam as classificações de estrelas dos críticos para vários filmes. Os dados brutos à esquerda são legíveis, mas inúteis; Escanear cada linha de texto para um único dado é possível, mas é difícil ver o quadro geral. Apresentar os dados em uma tabela (direita) dá ao espectador uma sensação de tudo de uma vez. Podemos pelo menos dizer claramente que há cinco críticos e sete filmes, e temos uma ideia aproximada de quem gostou do quê.
Atribuir uma cor a cada classificação de estrela revelaria mais sobre o desempenho de cada filme. Mas nem todas as cores servem.
A tabela à esquerda segue as regras, mas não o espírito da codificação por cores. É fácil diferenciar as classificações rapidamente porque cada valor tem uma cor consistente, mas não há lógica por trás das opções de cores.
A tabela à direita usa cor mais propositalmente. Tons escuros são atribuídos a classificações mais baixas e tons claros são atribuídos aos mais altos. Ele também funcionaria ao contrário, mas o efeito é o mesmo: um intervalo de tons é atribuído a um intervalo de valores.
Não só isso é mais visualmente agradável, revela tendências nos dados. Agora é fácil ver que o filme F marcou bem no geral, mas o filme B não, o crítico 2 foi mais difícil de agradar do que o crítico 4, que todos os críticos gostaram do filme F, mas não do filme D, e que discordaram do filme A. do mesmo matiz, então, pode revelar mais do que os dados por conta própria.
Monotones e duotones funcionam melhor quando a informação é organizada em camadas, níveis ou um intervalo. Por exemplo:
Fonte: Um evento à parte, Boston 2010
Escrito exclusivamente para o Webdesigner Depot de Ben Gremillion . Ben é um web designer freelancer que resolve problemas de comunicação com melhor design.
Onde mais um monotone ou duotone pode ajudar a explicar a informação? Compartilhe seus pensamentos na seção de comentários abaixo.