O documento apresenta um roteiro para um workshop sobre infografia multimédia, abordando sua evolução histórica, conceitos-chave e casos de sucesso. O roteiro inclui uma sessão prática de produção criativa de infografias para web.

1. Workshop AC/UFP
f
Infografia
Multimédia
Eduardo Zilles Borba – ezb@ezb.com.br
Universidade Fernando Pessoa
Agência de Comunicação da UFP
Porto, Portugal - 25/05/2010

2. Roteiro do workshop
1. A evolução da infografia
2. Conceitos de infografia multimédia
3. Casos de sucesso
4. Projecto prático
- briefing, brainstorm, produção criativa, aprovação, publicação
- exemplos prácticos de metodologia
- dicas de links para web
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 2

3. 1. Introdução
Infografia multimédia
Introdução
O ser humano recebe informação através
dos sentidos (Cairo, 2008):
80,0% Visão
14,0% Audição
3,5% Olfacto
1,5% Tacto
1,0% Gosto/Paladar
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 3

4. 1. Evolução da infografia
Dos primatas aos cibernautas
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br)

5. 1. Evolução da infografia
Dos primatas aos cibernautas
Sobre a infografia…
“A infografia não somente mostra e descreve feitos, mas sim
descobre conexões, padrões não evidentes na primeira vista
que, se não fossem representados, permaneceriam
desconhecidos para o leitor…
… a visualização da informação/infografia facilita a análise. A
dimensão estética deve ser relegada a um segundo plano, e
é uma consequência (um afeto secundário) da qualidade da
informação”. (Cairo, 2008, p.29).
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 5

6. 1. Evolução da infografia
Dos primatas aos cibernautas
3000 a.C. até Séc.XV Séc.XVI ao XX Anos 80
394 d.C
Pré-
Pré- Rev. Esquemas,
Info
História Egípcios Dados e
Imprensa Jornalismo
Gráficos
- Pinturas - Sinais - Prensa de Gutemberg - Da Vinci (esquemas) - USA Today
- Formas - Símbolos - Impressão de texto - Playfair (gráficos) (complementares,
- Objectos - Signos em Grande escala. - Beck (metro) meteorologia…)
(Ex: Bíblia).
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 6

7. 1. Evolução da infografia
Dos primatas aos cibernautas
Era Digital
1995 – Surge a Internet (web) com novas características para
a mensagem (Schultz, 1999). A comunicação desperta
para um novo paradigma - da massa e do átomo para
o indivíduo e o digital (Negroponte, 1995; Levy, 1999).
Multimedialidade
Interactividade
Hipertextualidade
Ubiquidade
Velocidade de actualização
Memória
Personalização
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 7

8. 1. Evolução da infografia
Dos primatas aos cibernautas
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 8

9. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br)

10. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
Infografia online é…
uma unidade informativa, na maioria dos casos
apresentada em sequência sucessiva, que se elabora
para publicações digitais não estritamente linguísticas,
realizada mediante elementos icônicos (estáticos ou
dinâmicos) com apoio de diversas unidades sensoriais:
vídeo, áudio, texto, foto/imagem, ilustração, animação.
(Valero Sancho, 2004)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 10

11. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
Características
da infografia na Internet
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 11

12. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
1 - MULTIMÉDIA
É a combinação, controlada por computador, de textos, gráficos,
imagens, vídeos, áudios, animações e qualquer outro meio
pelo qual a informação possa ser representada, armazenada,
transmitida e processada sob a forma digital, em que existe
pelo menos um tipo de media estática (texto, gráfico, imagem) e
um media dinâmico (vídeo, áudio, animação). (Gouveia, 2009)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 12

13. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
MULTIMÉDIA
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 13

14. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
2 - INTERACTIVIDADE
É a característica do sistema multimédia que permite ao
utilizador final controlar como e quando os elementos de
informação são apresentados. (Gouveia, 2009)
Interacção entre Homem/Humano e máquina/computador
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 14

15. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
INTERACTIVIDADE
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 15

16. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
3 - HIPERTEXTUAL
É o texto em formato digital ao qual agrega-se outros conjuntos de
agrega-
informação na forma de blocos cujo acesso se dá através de
referências específicas denominadas hiperlinks. (Wikipedia.com, 2010)
No caso dos infográficos feitos para a web, ao passo que cada
elemento – vídeo, foto, áudio, texto… - deve ser compreensível
de maneira isolada, todos têm de manter coerência entre si e
contribuir para uma unidade comunicativa. (Salaverría, 2001)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 16

17. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
HIPERTEXTUAL
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 17

18. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
4 – UBÍQUA / GLOBAL
Capacidade da informação estar disponível em qualquer local
e a qualquer momento (sentido de omnipresença).
(sentido omnipresença).
“A Internet se entranha na pele da cultura”.
(Kerckhove, 1995)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 18

19. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
UBÍQUA/GLOBAL
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 19

20. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
5 – VELOCIDADE DE ACTUALIZAÇÃO
Uma das principais características da mensagem na
Internet é a sua velocidade e simplicidade para
actualização de conteúdos (tempo real).
(tempo real).
(Virilio, 1995)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 20

21. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
TEMPO REAL
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 21

22. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
6 – MEMÓRIA
A capacidade de armazenar a informação abre um
novo horizonte para a criação de base de dados
extensas – até mesmo “infinitas”. (Negroponte, 1995)
“infinitas”.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 22

23. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
MEMÓRIA
x
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 23

24. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
7 – PERSONALIZAÇÃO
A mensagem é centralizada no indivíduo.
indivíduo.
Igualmente, é personalizada a EXPERIÊNCIA da pessoa
com uma interface multimédia.
A informação não é apenas emitida e recebida.
Existe um elevado grau de feedback que
prolonga o fim da mensagem.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 24

25. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
PERSONALIZAÇÃO
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 25

26. 2. Infografia Multimédia
Principais conceitos da infografia na cibercultura
Narrativas
Linear / Sequencial Não-
Não-linear / Relacional
- narrativa com início, meio e - narrativa livre e construída
fim. O indivíduo intervem para pelo indivíduo através de
“avançar” a peça. hiperligações
Autónomo Complemento
- infográfico independente de - actua como um elemento para
qualquer notícia. Apresenta aprofundar a informação de uma
toda a informação necessária. peça principal.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 26

27. 3. Exemplos de infografias multimédia
Casos de Sucesso
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br)

28. 3. Exemplos de infografia multimédia
Casos de sucesso
Estadão (Brasil)
- Alta interactividade
- Boa multimedialidade
- Relacional e espacial
- Não-linear
Não-
- Cartografia (ambiental, real)
Link:
http://www.estadao.com.br/brasilia50.shtm
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 28

29. 3. Exemplos de infografia multimédia
Casos de sucesso
Veja (Brasil)
- Alta interactividade
- Boa multimedialidade
- Relacional
- Não-linear
Não-
- Cartografia (simbólica/mapa)
- Acção “antes e depois”
Link:
http://veja.abril.com.br/complementos-
materias/mapa-flora-sp/info-popup.shtml
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 29

30. 3. Exemplos de infografia multimédia
Casos de sucesso
JN (Portugal)
- Boa interactividade
- Baixa multimedialidade
- Relacional
- Não-linear
Não-
- Mini-site (hiperlink para pg’s)
Mini-
- Informativo
Link:
http://veja.abril.com.br/complementos-
materias/mapa-flora-sp/info-popup.shtml
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 30

31. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br)

32. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
Alterações
Pedido Brainstorm Produção
Aprovação Publicação
Briefing Esboços Criativa
Publicar quando não há cliente.
Exemplos: projecto pessoal,
jornal online(infog.coordenada pelo
editor de arte e/ou editor-chefe)
editor-
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 32

33. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
1. Pedido do cliente / Briefing
CLIENTE EDITOR / DIR.CRIATIVO
- o que quer? - lead (quem, onde, quando,
- qual o objectivo? porque, quando, como…)
- público-alvo?
público- - texto ou briefing da
- qual a verba? história, facto, notícia.
- deadline - deadline (dia, semana…)
QUEM PRODUZ O CONTEÚDO EQUIPE MULTIDISCIPLINAR NA
(TEXTO/FOTO)? CLIENTE,EQUIPA REDACÇÃO DO JORNAL (REPÓRTER,
DA AGÊNCIA, DESIGNER FREELANCER ILUSTRADOR, FOTÓGRAFO…)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 33

34. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
2. Brainstorm & Esboços
Brainstorm multidisciplinar (equipa) / pesquisa e estudo
Estipular conceito do infográfico (ideia central)
Desenhar esboços do projecto:
- arquitectura dos conteúdos
- plano de navegação e usabilidade
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 34

35. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
3. Produção criativa
Conteúdo (redacção, dados, índices, números…)
Design Gráfico (ilustração, ícones, símbolos, signos…)
Design de Interacção (hiperlinks, menu, animação, programação-
programação-
action script, testes do produto digital…)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 35

36. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
4. Aprovação
Reunião com cliente para apresentar a peça.
Sugestões, alterações, acréscimos de conteúdos.
Algumas vezes, em casos de logotipos, pode-se
pode-
apresentar mais que uma proposta. Contudo, na
infografia isto não ocorre regularmente pelo elevado
grau de pormenores.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 36

37. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
5. Publicação
Após aprovado, publicar a peça multimédia
(integrar ao site, gravar em CD/DVD, servidor ASP/PHP)
Testes de publicação, já na versão beta, com o cliente ou
indivíduos neutros.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 37

38. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
Alterações
Pedido Brainstorm Produção
Aprovação Publicação
Briefing Esboços Criativa
Publicar quando não há cliente.
Exemplos: projecto pessoal,
jornal online(infog.coordenada pelo
editor de arte e/ou editor-chefe)
editor-
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 38

39. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
Exercício 1
Cliente: 1970 Viagens (Agência de Viagens e Turismo)
O que precisava: um incentivo para divulgar promoções
no site de uma forma visual e interactiva
Peça: infográfico – Mundo Interactivo
Meio: animação flash integrada na página inicial do site
da 1970 Viagens através de um banner destacado com
hiperlink para aceder ao infográfico.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 39

40. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
ESBOÇO
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 40

41. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
ESBOÇO
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 41

42. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
ESBOÇO
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 42

43. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
PRODUÇÃO CRIATIVA
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 43

44. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
APROVADO/PUBLICADO
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 44

45. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
Exercício 2 (com os participantes)
Cliente: jornal diário
O que precisava: um infográfico especial sobre o Estoril
Open de Ténis. Dados a ressaltar: história, tenistas
participantes e os vencedores das últimas edições.
Peça: infográfico – Estoril Open de Ténis
Meio: animação flash para actuar como um complemento
da reportagem principal no site do jornal.
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 45

46. 4. Dicas para criar uma infografia
Uma metodologia para desenvolver infográficos digitais
Dicas de links na web
www.coolinfographics.com
www.albertocairo.com
www.flowingdata.com
www.datavis.tumblr.com
http://infographics.apa.at
http://homer.uc3m.es/audiovisuales/miscelanea/conferenci
as/20071217_VC_Leganes.wmv (workshop A.Cairo)
Workshop AC/UFP – Infografia Multimédia - Eduardo Zilles Borba (ezb@ezb.com.br) 46

47. Muito obrigado
pela participação!
Eduardo Zilles Borba
ezb@ezb.com.br
www.ezb.com.br
twitter.com/ezillesborba
f
Workshop AC/UFP - Universidade Fernando Pessoa - Porto, Portugal – 25/05/2010.
47