workshop infografia - são paulo - maio/2014

?Quem somos

Quem somos

Bacharel em Midialogia Mestre em Artes Visuais Infografista especializada em Jornalismo Econômico Online

Beatriz Blanco

Bacharel em Midialogia Diretor de Arte - Supera Comunicação (SJC - SP)

Marcos Singulano

Bacharel em Midialogia Mestre em Artes Visuais Analista de Marketing Digital

Fernando Martins Collaço

01Conceitos básicos

Fisíco Inglês Thomas Young

(1773-1829)

Cores | Modo RGB

Mistura aditiva (Vermelho, verde e azul)

Mistura subtrativa (Ciano, magenta e amarelo e preto -K- )

Cores | Modo CMYK

Cores | Resumindo

É luz e é projetado: RGB É tinta e impresso: CMYK

http://color.method.ac/

Cores | Color game

http://colorschemedesigner.com/

Cores | Color scheme designer

Tipografia | Fonte serifada e não-serifada

Tipografia

Escolher a fonte certa para seu projeto pode fazer toda a diferença! Tudo depende do público que você

deseja atingir…

Tipografia | Documentário Helvetica (2007)

1957 - Max Miedinger e Eduard Hoffmann

Tipografia | I shot the serif game

http://www.tothepoint.co.uk/more/fun/shoot_the_serif/

http://www.agencyfusion.com/kill-comic-sans.html

Tipografia | Legibilidade

Diz respeito a facilidade com que uma letra pode ser distinguida de outra.

Tipografia | Legibilidade

Tipografia | Leiturabilidade

Diz respeito a facilidade com que o olho absorve a mensagem e se move ao longo da linha (é afetada

pelo tipo de letra escolhido, o corpo da letra, o espaço entre letras e palavras, o comprimento das linhas de

texto e pelo entrelinhamento).

Tipografia | Leiturabilidade

Legibilidade diz respeito a capacidade de reconhecer as letras, enquanto leiturabilidade

diz respeito a capacidade de se ler as palavras e diversas linhas de texto.

Tipografia | Kerning Game

http://type.method.ac/

Alinhamento

Padronize sempre qualquer tipo de alinhamento no seu infográfico (ou qualquer outro tipo de material).

Se for alinhado a esquerda, alinhe TUDO a esquerda. Se for alinhado a direita, alinhe

TUDO a direita.

Proximidade

O que é proximidade? !

Imagine um subtítulo distante assim do seu texto. Isso dificulta a leitura e entendimento do leitor.

Proximidade

O que é proximidade? Imagine um subtítulo distante assim do seu texto.

Isso dificulta a leitura e entendimento do leitor. !

Por isso, agrupe elementos similares. Isso diminui a confusão e deixa a mensagem mais clara e direta.

Isso é contraste

Isso não é contraste

Contraste

Contraste Contraste também pode acontecer entre

pesos diferentes de fontes iguais.

Contraste Ou pesos iguais de fontes diferentes.

Repetição

A repetição de elementos visuais é muito importante para que a pessoa entenda que ela ainda está

no mesmo lugar (um site por exemplo) ou vendo o mesmo tipo de material.

Um ótimo exemplo disso é essa apresentação.

03Uma (breve) história da Infografia

Uma (breve) história da infografia

O marco da conceituação da Infografia é de 1980.

Seus antecedentes podem ser considerados a partir do desenvolvimento de elementos visuais que

transmitiam informações através de imagens, como mapas, gráficos etc…

Victor Margolin Idade da Comunicação (Final do Século XX) !“As novas tecnologias trouxeram uma fase de grandes transformações, caracterizada pela intensidade da comunicação entre as pessoas do mundo.”

INTENSIDADE DE COMUNICAÇÃO

+VOLUME DE INFORMAÇÃO

PARA UM PÚBLICO CADA VEZ MAIS HETEROGÊNEO

E CADA VEZ MAIS CONFUSO!

Como resolver isso?

Sobrou para os jornais…

Filtrar +

Selecionar +

Organizar

PAPEL DOS JORNAIS

Linguagem verbal

Linguagem Não-verbal

Linguagem verbal

Linguagem Não-verbal <

Os infográficos teriam surgido nos jornais diários para atender a

demanda por entendimento que se acentuou no final do século XX

Informação

Design Ilustração

Infografia

Linguagem verbal

Linguagem Não-verbal =

Infografia é a arte de tornar claro aquilo que é complexo.

+Alberto Cairo Juan Antonio Giner

1) Um infográfico é por definição uma apresentação visual de fatos e dados. Por esse motivo, nenhum infográfico pode ser produzido sem informações confiáveis;

!2) Nenhum infográfico deve incluir elementos que não sejam

baseados em fatos conhecidos ou evidências disponíveis; !3) Nenhum infográfico deve ser apresentado como verdadeiro

quando for fictício ou se apoiar em pressupostos não verificados;

4) Nenhum infográfico deve ser publicado sem que sejam identificadas suas fontes de informação; !5) Profissionais envolvidos na produção de infográficos devem se recusar a produzir qualquer apresentação visual que inclua elementos fictícios ou projetados para torná-lo “apelativo” ou “espetacular”. Editores não devem considerar pedir gráficos que não sejam baseados em evidências disponíveis. !6) Infográficos não são ilustrações ou arte. Infográficos são jornalismo visual e devem se orientar pelos mesmos padrões éticos que se aplicam a outras áreas da atividade.

04Etapas de um infográfico

Etapas de um infográfico

Briefing

Planejamento

Edição de Texto

Layout

Edição de Arte

Finalização

Briefing: quando fazer um infográfico?

Infográficos estão em moda atualmente, mas isso não quer dizer

que são sempre uma boa ideia. Existem situações em que eles são

ideais, outras que que simplesmente não funcionam.

Você deve fazer um infográfico se: !• A informação com que está lidando é muito visual

e é mais fácil de ser compreendida quando ilustrada;

• Está com dados numéricos que isoladamente não são muito chamativos, mas dizem muito quando comparados entre si;

• Precisa apresentar muita informação curta sobre um determinado tema de forma impactante;

• Está lidando com dados geográficos ou espaciais que precisam ser visualizados para que a mensagem faça sentido.

Você não deve fazer um infográfico se: !• Estiver usando uma tabela enorme e não puder eliminar

nenhum dado;

• Os dados numéricos não podem ser comparados entre si;

• As ilustrações servirem apenas como “enfeite” e não trazem informações novas;

• Estiver trabalhando com um grande volume de informações geográficas ou espaciais, impossíveis de serem visualizadas de forma clara em um mapa;

• For usar muitos dados curtos sem conexão entre si, tornando impossível construir uma identidade visual unificada para seu trabalho.

• Estiver trabalhando com muito texto.

Planejamento: que tipo de infográfico devo fazer?

Após fazer o briefing das suas informações, é importante olhar para os dados e refletir sobre o tipo de infográfico ideal para o material que tem

em mãos. Muitos designers se entusiasmam com modismos ou com referências visuais que

encontram na internet e acabam criando gráficos pouco eficientes.

Planejamento: que tipo de infográfico devo fazer?

Quais ferramentas devo usar

para fazer meu infográfico? Depende do tipo de infográfico que você deseja fazer. Para dados

numéricos e ilustrações em estilo pictograma programas de ilustração vetorial como o Illustrator ou o Inkscape funcionam bem. Existem

ferramentas DIY que permitem gerar mapas e outros tipos de gráficos simples e interativos para embedar em páginas html.

Ilustrações mais elaboradas podem pedir o uso de softwares mais voltados para a edição de imagens, como o Photoshop ou Illustrator, ou

opções open source como o Inkscape e o Gimp.

O Illustrator possui ferramentas para geração de gráficos, que podem ser editados depois nos próprios programas. É possível copiar e colar tabelas do Excel ou da web, o que facilita bastante o trabalho. No Inkscape essa

ferramenta não existe, mas você pode colar gráficos gerados pelo LibreOffice Writer e trabalhar em cima deles.

05Tipos de Infográficos

Forma x Função

Priorize sempre a função: ao lado temos um belo infográfico, porém é extremamente difícil decifrar o que ele está dizendo.

Design bem sucedido é aliar forma e função com excelência. Sendo assim, fuja de modismos ou ilustrações bonititinhas que não servem aos dados com que você está lidando.

Forma x Função

Barras e colunas Funciona muito bem por ser de rápida visualização e compreensão. É fácil calcular quando uma coluna é aproximadamente o dobro, a metade ou um terço da que está desenhada ao seu lado, por exemplo.

Tipos de infográficos

Barras e colunas Muitas vezes não utilizamos barras ou colunas por considerá-las óbvias e sem graça, mas elas são formas muito úteis e claras de representar dados e não devem ser abandonadas! Um bom trabalho de design pode tornar as barras visualmente muito atraentes. Experimentar e buscar referências é essencial para usá-las de forma proveitosa.

Barras e colunasseccionadas Tem todas as vantagens das barras e colunas, mas devem ser utilizadas para representar partes de um todo. Ou seja: para representar valores que, juntos, formam um conjunto.

Barras e colunasseccionadas Como o objetivo desse tipo de gráfico é mostrar a proporção entre cada um dos itens do conjunto em relação ao todo, é importante que, ao mesmo tempo que exista contraste entre as partes.

Linhas

Linhas Gráficos de linhas são ideais para mostrar variação de um dado em relação a outro (geralmente, em relação ao tempo).

!O maior cuidado que devemos tomar em relação a gráficos de linhas é quando trabalhamos com valores muito próximos: as linhas podem ficar emboladas e confusas.

Área Gráficos de área são semelhantes a gráficos de linha, com a diferença da área de preenchimento abaixo das linhas. Pode ser utilizado de forma semelhante aos gráficos de linha, e permite mais incrementos gráficos que este formato.

Bolha Embora visualmente interessante, é preciso tomar muito cuidado com esse tipo de gráfico, porque o círculo é uma forma geométrica que não é simples de ser compreendida em relação às suas proporções.

Veja por exemplo esses dois círculos. O segundo representa metade do valor numérico indicado pelo primeiro. Você consegue perceber isso apenas observando os dois círculos?

!Dificilmente né? Isso porque o círculo não tem uma área fácil de der calculada automaticamente. Isso torna o formato de bolhas péssimo para fazer comparações entre valores numéricos.

Bolha Por outro lado, bolhas são muito interessantes para demonstrar concentração no espaço. Se utilizadas em mapas, por exemplo, é fácil visualizar em que áreas em um mapa existe maiores índices da variável utilizada no gráfico. Distribuição é um outro tipo de informação que se adapta bem a gráficos de bolhas.

Pizza Gráficos de pizza são, de forma semelhante aos gráficos de barra fracionada, ideais para dados que demonstram partes de um todo. São mais utilizados para dados percentuais que somam 100%.

Pizza Existem variações do gráfico de pizza que utilizam arcos, geralmente meios círculos. Esse formato é atrativo e pode ser utilizado, desde que se tome cuidado em reduzir os valores proporcionalmente ao arco que você está utilizado.

Passo a passo Infográficos de passo a passo são comuns em informações em que a representação visual é importante para o entendimento de um processo que envolve etapas. Instruções de montagens, receitas culinárias e esquematizações de fatos acontecidos são informações que se encaixam bem em um infográfico do tipo passo a passo.

Passo a passo Riscos:

!1- Abusar do uso de texto. Como geralmente infográficos de passo a passo envolvem textos explicativos, é preciso cuidado.

!2- Banalizar a ilustração, com trabalhos sem informação e desconectados do texto.

Mapas É um formato bem auto explicativo: use para informações geográficas. Mapas dificilmente são utilizados sozinhos: geralmente eles são combinados a outros tipos de gráficos (principalmente o gráfico de bolhas).

Combinação de Formatos Não é preciso ficar engessado em um único formato para construir um infográfico. Pelo contrário: combinar tipos de representação tornará seu trabalho mais atraente e instigante para seu público. Abuse, seja criativo com os dados que chegarem até você. A única preocupação que deve manter em mente é com a simplicidade na leitura dos seus dados: certifique-se de que eles são facilmente compreendidos em uma primeira “passada de olhos” em seu trabalho.

Infográficos em formatos diferenciados Alguns formatos alternativos e bastante criativos têm ganhado popularidade nos últimos tempos. Os mais representativos são os gráficos em linha do tempo, gráficos em estilo mapa de metrô e tabelas periódicas.

Infográficos em formatos diferenciados Esses formatos são divertidos e muitas vezes rendem resultados inteligentes e informativos. Mas é preciso atenção para que o formato sirva aos seus dados e não o contrário. Ao ficarmos muito empolgados com um determinado tipo de formato, muitas vezes acabamos “forçando” os dados para que eles se encaixem em nosso modelo preferido. Isso não é uma boa ideia e pode gerar resultados muito insatisfatórios.

Infográficos em formatos diferenciados Quando for se apropriar de alguma forma de infográfico já existente, como no caso do mapa de metrô e da tabela periódica, procure construir uma analogia entre a função original daquele infográfico com a função que você tentará dar a ele com sua ressignificação. Senão, a apropriação fica sem sentido, vira apenas um recurso de distração.

Interativos Interatividade é um conceito extremamente popularizado em tempos de Web 2.0. Porém, ele é constantemente mal compreendido. Convencionou-se chamar de interatividade qualquer recurso que responda a uma ação do usuário, como a sequência clique-abre janela. Isso não é interatividade e sim reatividade. A verdadeira interatividade envolve o ciclo interação -PROCESSAMENTO- resposta.

Interativos A maioria dos infográficos interativos disponíveis na web é na verdade reativa. Para um bom infográfico online oferecer uma experiência realmente interativa para seu usuário, é importante que o foco do mesmo esteja justamente no processamento do ciclo de resposta descrito acima. Forneça para seu leitor recursos para interagir de forma real com o infográfico: deixe que ele escolha quais dados quer comparar, consiga recortar informações para visualizar de forma mais detalhada, oculte ou mostre as variáveis de acordo com a própria vontade. Incentivar e diferenciar a participação do usuário é o que tornará o seu infográfico uma experiência realmente interativa.

Diagramas de Venn Como na matemática são uma opção interessante

para retratar conjutos e suas interações. O infografista pode brincar com as formas geométricas, sem ficar

restrito ao tradicional círculo. !

http://www.pinterest.com/pin/177470041540155383/

Vimos que os Infográficos atuam como uma síntese de dados para uma nova forma de consumo, uma forma mais

acelerada, imediata e fragmentada

Infográficos Animados

Essa forma de consumo já foi dividida em dois processos distintos, o Lean Back e o Lean Forward e essas duas

denominações nada mais são do que modos de consumo de conteúdos

Lean Back

Lean Forward

Os usos de Infográficos Animados

Lean Back Lean Forward

Vendo notícias e redes sociais no celular

Lendo reportagens extensas em grandes portais

de notícias

Fazendo uma pesquisa acadêmica

Estudando o material de uma reunião com um tablet

Para entendermos melhor o processo da Infografia Animada, vamos considerar as características já citadas, mas adicionar algumas outras.

Nosso pontapé inicial é pensar em nossos produtos enquanto pequenos filmes ou curta-metragens

Vamos separar as características em três grupos para melhor compreensão e didática: Estrutura Geral, Elementos Componentes e

Plataformas de Veiculação

Estrutura Geral

Síntese e Narrativa

Sempre que pensamos em uma narrativa, seja ela em qual plataforma for, pensamos em 03 atos, os quais apresentam o fato, mostram seu desenvolvimento e apresentam uma mensagem/transformação efetiva

Tal como vimos na parte sobre Infográficos Estáticos, saber editar o conteúdo é muito importante e em um

vídeo, onde temos pouco tempo, essa síntese se faz vital

Duração

Temos que lembrar dos passos anteriores, onde falamos sobre o processo de consumo de informações: os

Infográficos animados se situam majoritariamente em que tipo de consumo? A duração de um Infográfico é uma regra?

Elementos Componentes

Transição dos Elementos

É importante, tal como nos Estáticos, demonstrar que existe uma unidade entre os elementos e essa unidade é mantida por

meio de uma transição fluída e quase imperceptível.

Tempo de LeituraO tempo de leitura das informações é um ponto vital, pois

determina a apreensão da atenção do espectador. Ele também envolve a síntese de informação.

MúsicaA música é também um aspecto importante dos Infográficos, ou seja, ela também transmite informação e pode reter a atenção

dos espectadores

Voz OverUm recurso narrativo muito utilizado e que pode ser

muito útil quando falamos de Infográficos mais elaborados, é o da voz over, ou seja, um narrador que

conduz a atenção do espectador.

Legibilidade e leiturabilidadeEsses dois princípios anteriores também valem para os Infográficos Animados, ou seja, a escolha de uma fonte adequada e que permita uma leitura rápida

é muito importante

Contraste

De nada adianta fazer um Infográfico lindo se ele não permite a leitura. Aqui novamente temos o mesmo princípio dos

Infográficos Estáticos

EquilíbrioEquilíbrio dos elementos em quadro também é outro

princípio válido e que pode ser muito bem trabalhado nas imagens em movimento

Movimentos de ObjetosUma das características dos elementos que temos que tomar cuidado é o movimento dos objetos. Sempre que

temos uma tela e algum objeto em movimento, nosso olhar instintivamente foca nele, o que pode ser um problema

HibridizaçãoO uso de imagens gravadas e de animações realizadas através de software gera produtos muito interessantes e que podem

deixar os Infográficos mais atraentes

Plataformas de Veiculação

Youtube

Plataforma de vídeos mais popular e de caráter comercial

Possibilidade de criação de canais que agregam gostos pessoais ou comerciais

Alguns dados: 04 bilhões de vídeos vistos/dia, 800 milhões de visitantes únicos/mês, + de 50% dos vídeos foram curtidos ou

comentados

Fonte: Youpix

Atua como uma rede social de

vídeos que não possuem caráter

comercial

Forte presença como uma rede

de contatos profissionais com

leve tendência para animação e vídeos autorais

Aceita uma quantidade maior

de formatos, inovou com HD e possui mais de 2

milhões de usuários

Agora eu sei os elementos interessantes de se trabalhar e os cuidados que devo ter, mas...será que eu preciso de um

Infográfico Animado?

A Infografia Animada pressupõe uma planejamento de distribuição online consistente, seja através de um canal digital da marca ou através de uma peça específica lançada

em HUBs de conteúdo

Existe muita confusão entre infográficos e textos ilustrados. Muito volume de texto com ilustrações e

gráficos pontuais “boiando” no meio do conteúdo não deveriam ser classificados como infografia, e sim

como diagramação de texto.

Se você optou por fazer um infográfico, é porque a representação visual pareceu mais adequada que a textual. Portanto, concentre-se em fazer com que o

texto trabalhe junto com as ilustrações e gráficos, sem se sobrepor. Escreva o que for importante para ser

escrito, e nada mais do que isso.

Edição de texto: corte o quanto puder

Após planejar exatamente quais serão os tipos de gráfico usados em seu projeto, chega a hora de planejar como eles vão se encaixar no layout.

Nesse momento, é importante resgatar aquela narrativa que você imaginou na fase do briefing.

A ordem de leitura é um dos aspectos mais importantes do infográfico e deve receber atenção especial. Sem esse cuidado, você corre o risco de

criar uma apresentação de dados desconexos que o leitor terá dificuldade em acompanhar até o final.

Layout: como dispor meus dados?

Outras dicas extremamente importantes na fase do layout são:

Agrupe dados que devem ser comparados de forma que o leitor não precise ficar deslocando o olhar de um ponto para o outro para fazer

as comparações. Mantenha as relações de proporção para não causar confusão na leitura.

Não tenha medo de “quebrar” a informação: melhor ter vários gráficos legíveis do que um ilegível. Se for preciso fazer recortes, faça. Se for

preciso cortar, corte.

Layout: como dispor meus dados?

A roda de visualização Um método interessante para determinar o quão legível e simples de entender

está seu infográfico é a ferramenta que Alberto Cairo chama de “roda de visualização. Ela não é um método formal e deve ser usado apenas para fins de

planejamento, mas ajuda a dar uma ideia de como está seu infográfico.

Criei meu layout: ele está muito “difícil”?

06Edição de arte: bonito e legível

Agrupe dados que devem ser comparados de forma que o leitor não precise ficar deslocando o olhar de um ponto para o outro para fazer as comparações.

Edição de arte: bonito e legível

Mantenha as relações de proporção para não causar confusão na leitura.

Outras dicas importantes para montar seu infográfico

Faça ilustrações informativas. Fuja de figuras decorativas: é importante que toda ilustração acrescente uma nova informação ao infográfico.

Não exagere nas cores e tipografia. Um infográfico pode conter muitas informações, e se você exagerar nas cores e nos tipos de fontes, dificilmente conseguirá um resultado coeso.

Não tenha medo de “quebrar” a informação: melhor ter vários gráficos legíveis do que um ilegível. Se for preciso fazer recortes, faça. Se for preciso cortar, corte.

Após seguir as recomendações de um bom design, fazer uma edição cuidadosa e montar o infográfico de acordo com o tipo de informação apresentada, reflita se o resultado final está coeso e tem uma boa unidade visual.

Finalização: meu infográfico está legível?

O arquivo final: o que considerar

Fechar o arquivo exige cuidado também: estude bem o formato mais adequado para a circulação do seu infográfico. Perda de qualidade de imagem pode comprometer muito a legibilidade do seu trabalho.

Antes de começar um arquivo pense que no fechamento, ele será veiculado de alguma forma. Se seu infográfico for veiculado em uma revista, site, material publicitário ou apresentação, tome cuidado em manter a linguagem visual que utilizar não conflitar

com o veículo para o qual você está produzindo.

Por fim, mantenha em mente a pergunta: eu dedicaria meu tempo a ler esse infográfico? Ele parece intimidador? Eu

consigo entendê-lo? Se colocar no lugar do leitor é essencial para produzir infográficos verdadeiramente informativos.

Todos os pictogramas usados são de propriedade e autoria dos usuários do The Noun Project (www.thenounproject.com)

biablancoelric@gmail.comBeatriz Blanco

marcos.singulano@gmail.comMarcos Singulano

ferdinandomc@gmail.comFernando Collaço

workshop infografia - são paulo - maio/2014

precise car

edio de arte

preciso fazer

outro para

criei meu

legibilidade

linguagem

agrupe dados

Design

workshop plan estratégico e inovação - idm - maio 2013

workshop infraestrutura -telecomunicações · workshop...

infografia - Índices de desemprego

infografia para designers

workshop sobre gestão das receitas do petróleo luanda, 16...

análise da infografia jornalística

129145445 infografia infografia na era da multimidia

infografia guia2014

workshop de infografia

infografia - kick it out

slide games infografia

infografia para designers

infografia del caucho

infografia infoportugal

infografia - base produtiva distrital

workshop tecna pucrs // gestão por projetos em rede (maio...

infografia em meio digital

infografia proteoblood - folleto es

infografia - blazesports

infografia 3 2010