3 maneiras de projetar um infográfico que se destaca da multidão
Infográficos não são novos. E, certamente, os interativos também não são - mas com o lançamento de sites de notícias recentes, como o Vox,Fivethirtyeight e O Upshot , eles estão se tornando mais populares.
E, como os espectadores veem esses infográficos em tablets, telefones e computadores de mesa, criar esses gráficos em HTML5 é o caminho a percorrer - é provável que a maneira como seus clientes e colegas de trabalho lhe pedirão para criar!
UMA mapa de fãs de beisebol por The Upshot
Aqui estão três maneiras de garantir que seus infográficos interativos baseados em HTML5 ultrapassem a desordem.
1) Pense por que você está fazendo o infográfico em primeiro lugar usando o método FIRED
Antes mesmo de pensar sobre a tecnologia, é importante pensar no gráfico do ponto de vista do espectador. Embora o HTML5 ofereça um meio totalmente novo para apresentar a história dos seus dados, ele não fornece automaticamente um propósito ou uma narrativa para a peça.
É óbvio quando um projeto foi colado no último minuto, sem qualquer consideração pela usabilidade ou qualidade. Como você evita fazer esse trabalho? Eu gosto de empregar o método "FIRED" - uma maneira fácil de lembrar de pensar criticamente antes de começar a usar os truques CSS mais recentes para criar um mapa interativo:
- Fresh - Como seu design se destacará da multidão?
- Informativo - Você está apresentando fatos precisos e intrigantes?
- Relevante - Suas informações contam uma história harmoniosa?
- Entretenimento - O espectador é atraído e animado para fazer parte de sua história?
- Diferente - O seu infográfico é novo? Já foi feito antes?
Fazer essas perguntas ajudará você a mapear os objetivos de sua página e como deseja que sua mensagem entre em ressonância com seu público. Em última análise, o produto final deve enquadrar a sua ideia de uma forma clara e palatável. Seja criativo, sim, mas também seja disciplinado. A arte gráfica é o que deve atrair o leitor, mas os dados apresentados precisam ser sucintos; não deixe o meio ultrapassar a mensagem. Um infográfico de sucesso atrai seu público para mais e é fácil de digerir.
2) Faça isso
Adobe Edge Animate é uma ferramenta de animação em HTML5 que permite adicionar movimento a gráficos da Web, permitindo que você estenda seus projetos personalizados com interatividade e movimento. Ele também se integra a outras ferramentas criativas para oferecer uma ponte perfeita entre design e HTML à medida que você cria para a web. Existem alguns ótimos modelos e amostras no página de vitrine para você começar. Se você quiser ir mais fundo e adicionar elementos como scrabbers arrastáveis clique e toque, aqui está um tutorial com recursos para você começar.
Você também pode criar gráficos interativos que aproveitam as atualizações mais recentes do navegador para CSS e HTML5 para criar alguns efeitos bem interessantes. O CSS Shapes está em seus últimos estágios de especificação; Confira (Repo do Github Aqui ).
o evolução da web infográfico.
3) dados, dados, dados
Um infográfico não é nada sem fontes de dados poderosas e as ferramentas para ilustrá-las.
As fontes de dados podem variar, seja sua própria pesquisa ou a do seu cliente. Há também uma boa lista no Quora de conjuntos de dados disponíveis publicamente que pode fornecer bons dados brutos para você jogar.
Alguns dos meus serviços de infográfico favoritos (que fornecem todos os produtos HTML5, é claro) para coletar e avaliar seus dados são:
- Piktochart - um serviço gratuito (com uma opção profissional paga) oferecendo uma ampla gama de temas personalizáveis com um utilitário de importação de dados.
- infogr.am - um serviço gratuito (com uma opção paga paga) oferecendo modelos, planilhas e outros utilitários para criar gráficos visuais.
- visualmente - uma comunidade gráfica. Embora o preço do visual.ly possa parecer um pouco íngreme (eles farão de você um infográfico baseado em um resumo criativo a partir de US $ 999), sua comunidade é um ponto de inspiração quando se deseja iniciar seu próprio projeto de infográfico.
E se você é especialmente ambicioso e quer mergulhar profundamente no campo da ciência de dados, há uma tonelada de recursos on-line sobre o assunto. Existem MOOCs assim curso de ciência de dados da Universidade de Washington.