Visualização de dados em Web Design: 12 exemplos impressionantes
Dados, dados, em todo lugar. Mas o que você faz com isso? Hoje, coletamos 12 exemplos impressionantes de visualizações de dados no design de sites para impulsionar seu pensamento sobre como trabalhar com dados.
Vivemos um tempo em que a capacidade de mostrar dados de maneiras novas e interessantes pode ser um grande trunfo para o designer.
Se você tem uma coleção enorme de números ou apenas as informações que deseja exibir, esse estilo de design pode ser uma ótima ferramenta no seu kit.
Explore o Envato Elements
1. História da NFL
Com décadas de dados abrangendo 32 equipes, há muitas informações disponíveis sobre jogos na NFL. O FiveThirtyEight resumiu tudo em uma série de gráficos interativos que você pode ver por equipe para ver os fluxos e refluxos da história do futebol.
A melhor coisa sobre essa visualização de dados é que é super simples. As linhas mostram vitórias e derrotas. Porém, com cliques e pausas, os dados ganham vida: você pode obter pontuações, datas e registros de todos os jogos sobrepostos em um mapa das médias de toda a liga. (Para que você possa ver se sua equipe está à frente ou atrás do grupo.)
2. Autocidade
Selfies são mais do que apenas um divertido conjunto de fotos. O Selfiecity usa visualizações rich media para reunir milhares de fotos e encontrar informações demográficas sobre as pessoas que as tiram.
O legal desse conjunto de dados é que, embora seja totalmente visual - milhares de fotos - você pode começar a ver padrões, como o estilo de selfie que as pessoas tomam em lugares diferentes, sejam mulheres ou homens, tirando mais fotos e as idades das selfies - tomadores. Embora existam algumas estatísticas e números aqui, esses dados são plotados usando fotos em uma grade gigante.
3. Maior vocabulário do Hip Hop
Este projeto do ThePudding mostra que os dados nem sempre precisam ser numerados. Ele analisa o número de palavras únicas usadas nas letras de hip hop e plota os maiores vocabulários pelo número de palavras com imagens do artista.
Eis como funciona: “Ele compara o número de palavras únicas usadas por alguns dos artistas mais famosos do hip hop (isto é, um exemplo de uma visão quantitativa do lirismo, uma vez proposta por Tahir Hemphill). Eu usei as primeiras 35.000 letras de cada artista. Dessa forma, artistas prolíficos, como Jay-Z, podem ser comparados a artistas mais recentes, como Drake. ”
O design simples em preto e branco do gráfico plotado é visualmente interessante e facilita a visualização de quais artistas estão à frente do grupo. (Ou você pode usar as ferramentas mais interativas e procurar artistas específicos.) Você também pode classificar por época, sendo os anos 2000 os mais liricamente robustos.
4. Ano da Shopify em Revisão
Apimente um conjunto de dados anuais com um site com base em tornar tudo visual. O 2016 in Review da Shopify é uma coleção de dados de relatórios anuais em um pacote fácil de ler.
O site rola em blocos parecidos com páginas com fatos e informações por toda parte. A visualização do estilo da linha do tempo se move mais profundamente nos links com gráficos e outros gráficos numéricos. Este site mostra que, mesmo com muitos números, você pode criar algo impressionante e moderno.
5. Rotinas diárias de pessoas famosas e criativas
Não se iluda pensando que os gráficos de barras ou linhas são chatos. Este incrível conjunto de linhas mostra dados interessantes que mostram como algum criativo famoso passou seus dias. (E há bastante comida e tempo de lazer lá.)
O que faz essa visualização de dados funcionar é em cores. Cada linha significa alguma coisa. Cada cor contrasta fortemente com as cores ao seu redor, para que todas as informações sejam fáceis de ver e entender.
6. Caindo na brecha
Essa visualização interativa de dados da BBC é brilhante. Um conjunto de alterações de pontos animados na ação de rolagem mostra rapidamente informações complexas.
As animações e a ideia por trás deste infográfico interativo são bem planejadas e executadas.
7. Todo Eclipse Solar Total Acontecendo
Essa visualização de dados combina um pouco de magia, animação e dados científicos para fornecer informações personalizadas sobre quando (e se) você pode ver um eclipse solar.
Começa com o seu ano de nascimento para um relatório personalizado. Aqui está o meu (observe que a coleta de dados é de 2017): “Se você nasceu em 1980, você tem (ou terá) 37 anos este ano. Se você vive até os 100 anos, haverá mais 43 eclipses solares totais em todo o mundo em sua vida. Muitos estarão na América do Sul. Um só eclipsará sobre a água.
Os dados se expandem ainda mais para explicações de como um eclipse funciona e os caminhos para o evento de 2017.
8. Mapa de Ventos
Onde está o vento soprando?
Este mapa mostra as velocidades e médias de vento para os Estados Unidos em tempo real. Os dados meteorológicos são transportados para um mapa preto e branco simples, que mostra os padrões de vento em movimento em todo o país. (Eu tenho que admitir, apenas assistir a animação é bastante viciante ... e reconfortante.)
9. Como todos os membros chegaram ao Congresso
O mapeamento de dados é uma experiência exaustiva e altamente informativa. Este mapa interativo de dados mostra o caminho de cada congressista e congressista nos EUA.
Você pode acompanhar a educação, o emprego e outras experiências políticas. (É incrível o número de caminhos semelhantes que existem.) Mergulhe nos dados mais profundamente, observando os caminhos individuais dos políticos.
10. Maiores violações e invasões de dados do mundo
Se você está procurando dados com boa aparência, Information is Beautiful é um bom ponto de partida. Este gráfico circular representa violações de dados de 30.000 registros ou mais de 2008 até o presente.
Os tamanhos dos círculos representam o tamanho de uma violação e é fácil ver onde suas informações foram capturadas em um hack de dados. Passe o mouse sobre qualquer círculo para saber mais sobre a violação. O design do estilo da linha do tempo também mostra outra coisa - o grande aumento de violações anualmente.
11. Por que seu smartphone está causando a síndrome do "pescoço do texto"
Algumas das melhores visualizações de dados combinam fatos e uma história para fornecer uma imagem mais completa das informações. Esse é o caso deste guia para "pescoço de texto".
Pequenos gráficos de dados - usando fatos e números - combinam-se com dados animados que mostram mudanças de postura para mostrar (não contar) exatamente o que está acontecendo nesse fenômeno que começou com o número de casos de "pescoço de texto". É uma ótima maneira de explicar visualmente algo que pode não fazer muito sentido de outra maneira.
12. Guia ilustrado de 2.339 mortes em 'Game of Thrones'
Use ilustrações para fazer uma visualização de dados atraente também. O Washington Post documentou todas as mortes no popular show "Game of Thrones", com um guia ilustrado.
Ilustrações e codificação de ícones mostram mortes instantaneamente com ações de clique que entram em mais detalhes. Além disso, tudo é organizado por temporada (e local e tipo de personagem, se você estiver interessado). Para provar que isso é mais do que divertido, existe uma metodologia completa de como funciona e o que "conta" como morte.
Conclusão
O uso de visualizações de dados está praticamente em todo lugar. Estamos vivendo uma era baseada em dados, onde as pessoas são atraídas por informações e conhecimentos.
Ser capaz de reunir grandes quantidades de dados em um design utilizável é uma habilidade valiosa que pode ajudá-lo em vários projetos. E se você ainda não foi solicitado a fazer isso, é provável que em breve.
