Issuu on Google+

1


HEROGRAPHICS

2


R el at ór io d e G 2 | p r o jet o fin a l Infográficos abordando as origens, como contadas pela primeira vez, dos super-heróis das editoras Marvel Comics e DC Comics.

PUC-Rio, 2012.2 Graduação em Comunicação Visual Projeto Conclusão Comunicação Visual | DSG1032 Orientador: João de Souza Leite Aluno: Pedro Henrique Pegado Ribeiro

3


SUMÁRIO 1. INTRODUÇÃO .......................................................... 07 2. CONCEITUAÇÃO ....................................................... 10 3. DESENVOLVIMENTO [conteúdo] ................................. 14

Cronologia .................................................................. 15

Personagens ........................................................... 17

Dados dos personagens .......................................... 18

Hierarquia da informação ....................................... 19

Extras e curiosidades .............................................. 20

4. DESENVOLVIMENTO [linguagem visual] ........................ 22

Conceito ................................................................. 23

Moodboard ............................................................ 24

Paleta de cores ....................................................... 31

Logotipo e aplicações ............................................. 33

Tipografia ............................................................... 36

Referências ............................................................. 26

5. DESENVOLVIMENTO [formato] ................................... 38

Definição de formato .............................................. 39

Classificações e categorias ...................................... 41

4


Interface ................................................................. 45

6. DESENVOLVIMENTO [testes iniciais] ............................. 46

Layout e linguagem ................................................ 47

7. DESENVOLVIMENTO [resultados finais] ......................... 54

Tela de abertura ..................................................... 55

Tela da linha do tempo ........................................... 63

Infogrテ。fico .............................................................. 90

8. CONCLUSテグ ........................................................... 130

Para o alto e avante ............................................... 131

Agradecimentos ................................................... 132

9. BIBLIOGRAFIA ........................................................ 134

5


6


1.

INTRO DUÇÃO

7


Para o projeto final de conclusão, escolhi um tema que vem me acompanhando a muito tempo na faculdade por interesse pessoal: super-heróis. Com isso decidido, queria realizar um projeto em que eu enfrentasse novos desafios dentro no campo do Design Gráfico e, ao mesmo tempo, me fizesse colocar em prática tudo aquilo que aprendi nos 5 anos de curso que se passaram. Com toda certeza, atingi essas metas pessoais durante a realização do projeto: um site contendo a origem simplificada dos super-heróis das editoras Marvel e DC na forma de infográficos. Nomeei o projeto “Herographics” - do inglês, “herói” + “infográfico” - com a intenção de abranger um público internacional quando colocado em prática. Aproveitando o atual crescimento exponencial dos super-heróis que atinge outros públicos, principalmente graças às adaptações cinematográficas, vi a oportunidade de apresentar, através do Design Gráfico, este vasto universo para aqueles que conhecem apenas a ponta do iceberg. Por serem tão antigos e possuírem uma vasta cronologia, os heróis sofrem com alterações constantes em suas histórias que muitas vezes confundem o leitor de primeira viagem e tornam difícil o entendimento da mitologia por trás da origem de seu herói favorito. O objetivo do projeto é unir o valor histórico dos personagens a um material ilustrativo, tornando esse conteúdo acessível a fãs novos e antigos; isso, de forma dinâmica e diferente das atuais publicações das duas editoras, que são, em sua maioria, enciclo-

8


pédias extensas e quase que exclusivamente textuais, deixando de lado a riqueza gráfica dos quadrinhos. Com um formato virtual, procuro expandir a forma de acesso a essa informação e levá-la de forma inovadora ao usuário, através de peças gráficas como uma forma de cronologia ilustrada para os personagens de ambas as editoras, gerando infográficos com as datas de estreia de seus principais heróis (e, eventualmente, vilões), dados técnicos e curiosidades, entre outros, com ênfase na sua história de origem. Isso, a partir de estudos de simplificação da forma, ergonomia informacional, diagramação, identidade visual, cor etc. Com esse sistema, cria-se uma quebra na estagnação do conteúdo, servindo como um meio de consulta e redirecionamento para outros meios de informação, sempre adicionando novos materiais e renovando o interesse do usuário.

arte de Alex Ross

9


2.

con ceitu ação

10


O que define um herói? A resposta correta não são seus poderes, mas suas escolhas. O grande fator que o diferencia das demais pessoas é sua escolha por fazer o certo, seja ele um mutante, um alienígena de Krypton ou um milionário que perdeu os pais. Partindo principalmente desse conceito, de escolha, optei por elaborar um infográfico em que o usuário não se visse obrigado a seguir caminhos pré-determinados de leitura. O objetivo do infográfico é ter uma leitura não-linear, dando liberdade àquele que o acessa de encontrar qual informação mais lhe interessa. Cabe ao leitor escolher qual caminho seguir. Tendo o momento de transformação do personagem em herói como centro do infográfico, as demais informações foram hierarquizadas de acordo com seu nível de importância e peso para o desenvolvimento da estrutura do personagem, não comprometendo o entendimento por parte do usuário, independente da ordem de leitura. O objetivo do infográfico é deixar o usuário livre pra descobrir sobre seu personagem, sem obriga-lo a acessar determinada informação para prosseguir, além de apontar novas fontes de informação complementares. Além desse conceito definido como peça-chave para o formato do infográfico, outros conceitos periféricos foram definidos para serem utilizados no desenvolvimento da identidade visual e como forma complementar à estrutura principal do site.

11


dualidade

secreto

valores

máscara

heroico

épico clássico

mistério

escolha

diversão

força

ação

dinâmico

super poder 12


Todos esses conceitos foram utilizados desde a criação do infográfico até a interface a os meios de navegação do site. Busquei, através da identidade visual, unir a linguagem clássica dos quadrinhos antigos - remetendo a questão da origem, do épico, das texturas - e a linguagem dinâmica atual - com a simplificação da forma e as ações dinâmicas de navegação. Ao mesmo tempo, os elementos que compõem o site e os infográficos remetem ao mistério e a dupla-identidade dos superheróis, possuindo diversos elementos que ficam escondidos e, após clique ou mouse over, se revelam. O uso de caixas de texto e elementos gráficos com pontas angulares e arredondadas remetem às páginas dos quadrinhos e seus balões, respectivamente. Isso foi integrado dentro da interface e no formato do infográfico em si. Além disso, a tipografia utilizada vem para reforçar esses conceitos, variando em casos específicos como forma de definição da identidade dos heróis e pontualmente ao longo da navegação.

13


3.

DESEN VOLVI MENTO CONTEĂšDO linguagem VISUAL formato testes iniciais resultados finais

14


CRONOLOGIA Os infográficos foram divididos através de uma interface de linha do tempo, onde foi utilizada a cronologia das Eras dos Quadrinhos. A intenção é uma base cronológica geral que facilite o entendimento das origens dos super-heróis selecionados, contextualizando-as de acordo com seu período histórico e a visão da época, que influenciaram na origem de cada um deles, além de ajudar a encontrar o herói mais facilmente. Era de Ouro: fim da década de 1930 até começo da década de 1950. Marcada pela criação e definição do arquétipo do superherói, popularizando as histórias em quadrinhos. Praticamente dominada pelo surgimento de heróis da DC. Era de Prata: a partir de 1955 até começo da década de 1970. Caracteriza-se pela reformulação de personagens da Era de Ouro e a entrada da Marvel com peso no mercado. Possuía histórias mais inocentes e otimistas, com o conceito básico de “bem vence o mal”. Era de Bronze: início da década 1970 até 1985. Surgem temáticas mais realistas com críticas sociais e culturais, trazendo ambiguidades aos heróis e modificando o cenário bem-definido do bem contra o mal pela Era de Prata. Era Moderna: atual. Intensificação das críticas sociais e culturais e do território cinza iniciado pela Era de Bronze, trazendo um enaltecimento da figura dos anti-heróis e um aumento dos quadrinhos com temáticas reflexivas.

15


Action Comics nยบ 1, 1938

Showcase nยบ 4, 1956

Green Lantern nยบ 86, 1971

Watchmen nยบ 1, 1985

16


personagens marvel Comics

DC Comics

Thor

Superman

Journey into Mystery nº 83 (1962)

Action Comics nº 1 (1938)

Para a execução do projeto, escolhi 2 heróis que representassem as duas editoras americanas. Selecionando, busquei heróis com origens bem diferentes entre si e que pertencessem a diferentes Eras, com a intenção de demonstrar a eficácia do formato do infográfico, capaz de ser adaptado às diferentes origens existentes. Representando a Marvel Comics: Thor, o Deus do Trovão. O personagem pertence a Era de Prata dos quadrinhos e possui poderes mágicos, influenciados pelas lendas nórdicas. Represetando a DC Comics: Superman, o Homem de Aço. O primeiro super-herói dos quadrinhos, que deu origem a todos os outros e foi precursor da Era de Ouro dos quadrinhos. Tem uma origem espacial, influenciada pela ficção-científica.

17


dados dos personagens Tendo como centro do infográfico o acontecimento que transformou o personagem em herói, defini uma série de dados periféricos relacionados à seu universo, construindo um modelo geral de informações presente nos infográficos de cada personagem. A hierarquia estática é acompanhada por uma hierarquia de aparição, definida pela ordem de exibição dos elementos do infográfico na interface, dando ênfase a sequencia de acontecimentos da origem. Selecionei qual seria esse conteúdo de acordo com o contexto e individualidade de cada herói, mantendo elementos variáveis de acordo com cada um, porém, em sua maioria, sempre presentes na mitologia dos super-heróis. São eles: 01) Personagem 02) Transporte 03) Poderes 04) Fraquezas 05) Curiosidades 06) Identidade secreta 07) Vilões 08) Aliados/Equipes 09) Armas/Gadgets 10) Local de atuação/Base secreta 11) Criadores 12) 1ª aparição 13) Leitura recomendada

18


hierarquia da informação

19


extras e curiosidades Como uma forma de diferencial, procurando agregar um conteúdo extra aos infográficos, cada super-herói terá um ou mais elementos com curiosidades a seu respeito, obviamente variando de acordo com cada um. Esses “extras” poderão ser relacionados ao universo cinematográfico, dados históricos, cômicos etc. Seguindo o conceito projetual adotado de mistério, segredo - relacionado à vida dupla do herói - a intenção é manter um cunho de “easter eggs”, linguagem utilizada no cinema para elementossurpresa escondidos ao longo de um filme, que remetem geralmente a algo de seu universo - principalmente nas adaptações de quadrinhos - ou simplesmente brincadeiras da produção ou do diretor. Como forma de interação entre o usuário e o infográfico, esses elementos poderão ser destravados ou descobertos, podendo ser compartilhados nas redes sociais e instigando o leitor a se aprofundar no conteúdo, caso seja sua intenção, seguindo a liberdade de navegação já mencionada e levando a informação para outras pessoas.

parte do escudo do Capitão América escondido em cena de Homem de Ferro (2008), à esquerda

20


Para a aplicação dessas curiosidades, foram utilizados 2 tipos de botões diferentes, relacionados aos universos Marvel e DC, que fizessem sentido para os leitores assíduos das duas editoras. Para as curiosidades escondidas nos infográficos dos super-heróis Marvel, utilizei um ícone do personagem Deadpool, evidenciando a curiosidade através do clique com os dizeres “Deadpool sabia”. O personagem é conhecido pelo humor e por ultrapassar a quarta barreira dos quadrinhos, isto é, se dirigir ao leitor. Para a DC Comics, resgatei um artifício antigo dos quadrinhos do personagem Flash, os “Fatos Flash”. Eram curiosidades presentes nos quadrinhos do herói relacionadas ao seu universo e, principalmente, sobre ciências e o funcionamento dos poderes dos inimigos. Adaptei para curiosidades individuais dos personagens, presentes em todos os infográficos dos heróis DC. Prazer, Deadpool.

“Fatos Flash” em evidência, interior de edição do Flash

21


4.

DESEN VOLVI MENTO CONTEĂšDO linguagem VISUAL formato testes iniciais resultados finais

22


conceito Para a construção da identidade visual do projeto, segui principalmente os conceitos definidos de dualidade, ação e dinamismo, levando em consideração principalmente a relação do super-herói com sua identidade secreta, a forma como leva uma vida dupla, onde uma está repleta de ação e a outra repleta de mistérios. O objetivo da conceituação são layouts dinâmicos e com surpresas, buscando uma dualidade não só relacionada com a vida dupla do herói e seus segredos, mas também considerando as duas editoras e sua rivalidade, assim como seus estilos diferentes. Isso se reflete no uso das cores e na simetria dos layouts, entre outros. Considerando o período de origem da maioria dos heróis, que abrange tanto a Era de Ouro quanto a Era de Prata, principalmente, optei por uma linguagem visual remetendo ao estilo vintage, retrô, onde busquei referências nas linguagens gráficas dos quadrinhos dessas épocas e demais publicações e impressos. Tratando da forma adotada para representação dos heróis, optei por uma linguagem de simplificação, que possibilite ao usuário uma identificação dos personagens com a menor quantidade possível de elementos. Com isso, torno a informação visual mais direta e de fácil entendimento.

23


MOODBOARD

24


25


referências Além de buscar referências com uma linguagem gráfica semelhante às primeiras revistas de super-heróis, busquei aquelas que julguei se relacionar diretamente com as palavras definidas para os conceitos-chave, independente do período temporal à que remetem, mas buscando também referências de cores, elementos gráficos interessantes e tipografia.

26


27


arte de Ram贸n K. P茅rez

28


29


30


paleta de cores A partir das cores principais das duas editoras - azul e vermelho defini a paleta dos demais elementos do site, utilizando uma variação de tons quando necessário, principalmente para facilitar a leitura e tornar a navegação agradável.

editoras

R:235 G:29 B:41 # EB1D29

logotipo

R:1 G:108 B:183 # 016CB7

R:214 G:50 B:65 # D63241

header e menu

R:247 G:198 B:2 # F7C602

R:84 G:84 B:84 # 545454

linha do tempo

R:182 G:63 B:52 # B63F34

R:71 G:106 B:172 # 476AAC

31

R:35 G:31 B:32 # 231F20

R:0 G:102 B:169 # 0066A9


era de ouro

R:197 G:163 B:99 # C5A363

era de prata

R:148 G:100 B:1 # 946401

R:132 G:132 B:132 # 848484

era de bronze

R:232 G:82 B:55 # E85237

R:103 G:103 B:103 # 676767

era moderna

R:167 G:85 B:22 # A75516

R:99 G:77 B:128 # 634D80

R:131 G:63 B:207 # 833FCF

R:155 G:124 B:196 # 9B7CC4

infogrรกficos

R:46 G:107 B:150 # 2E6B96

R:68 G:132 B:190 # 4484BE

R:182 G:63 B:52 # B63F34

R:7 G:75 B:150 # 074B96

R:115 G:121 B:121 # 737979

R:198 G:86 B:84 # C65654

R:164 G:25 B:18 # A41912

R:52 G:52 B:52 # 343434

32

R:158 G:160 B:160 # 9EA0A0


logotipo e aplicações

HEROGRAPHICS HEROGRAPHICS HEROGRAPHICS HEROGRAPHICS 33


x

HEROGRAPHICS margem de segurança

símbolo usado separadamente

HEROGRAPHICS variação de posicionamento

34


sĂ­mbolo aplicado em caneca

sĂ­mbolo aplicado em camisa

35


tipografia Para a tipografia principal do projeto, foi utilizada a fonte BEBAS NEUE: no logotipo, no menu principal do site e nas legendas do infográfico. Por ser uma fonte forte e pesada, funciona bem dentro da interface para dar destaque aos elementos, ao mesmo tempo em que reafirma a presença do logotipo na mente do leitor.

bebas neue abcdefghijklmnopqrstuvxwyz áéíóãõ!@#$%&*/“ Para a tipografia auxiliar, foram usadas duas fontes: FUTURA STD e NEXA. A primeira pode ser encontrada nas caixas de texto do infográfico e em legendas, assim como na timeline. Por ser uma fonte clássica e que funciona bem em pequenas massas de texto, se mostrou ideal para as necessidades da interface, sendo adaptada de acordo com sua espessura. Já a fonte NEXA surge em pequenos detalhes, funcionando como uma variação na hierarquia de certas legendas específicas dentro do infográfico, por ser mais horizontal. Além disso, todo herói possui uma tipografia própria para sinalizar um local importante em sua trajetória, escolhida de acordo com a identidade e contexto de cada um. Mais detalhes à frente no relatório, no capítulo sobre os resultados individuais.

36


Futura Std (book) abcdefghijklmnopqrstuvx wyzABCDEFGHIJKLMNOPQ RSTUVWXYZ áéíóãõ!@#$%&*/“ Futura Std (heavy) abcdefghijklmnopqrstuvxw yzABCDEFGHIJKLMNOPQRS TUVWXYZ áéíóãõ!@#$%&*/“ Nexa Bold abcdefghijklmnopqrstuvxwy zABCDEFGHIJKLMNOPQRST UVWXYZ áéíóãõ!@#$%&*/“

37


5.

DESEN VOLVI MENTO CONTEĂšDO linguagem VISUAL formato testes iniciais resultados finais

38


definição de formato Adotei para o projeto o formato virtual, de web site, tendo como objetivo ser acessível a maior quantidade possível de pessoas, aumentando seu alcance e possibilitando uma fácil disseminação por meio das redes sociais. Por outro lado, o usuário terá a opção de imprimir uma versão física. Isso permite que os fãs possam selecionar e imprimir apenas os infográficos referentes a seus heróis preferidos ou aqueles que acharem mais interessantes, seguindo, novamente o conceito de escolha. O ponto decisivo para a escolha do formato foi a possibilidade de diferencial e dinamismo desse tipo de mídia, que proporciona uma variedade maior de oportunidades, visto a grande quantidade de conteúdo possível de ser inserido. Graças a grande quantidade de material de base, o site poderá sempre ser acrescentado de novos infográficos, gerando ciclicidade de conteúdo e se tornando uma espécie de enciclopédia virtual gráfica. A intenção do formato é sempre ter material sendo adicionado, fazendo com que os usuários retornem, com a atualização de infográficos já adcionados e acrescentando novos; o que seria inviável no formato impresso. Além disso, ele também serve de redirecionamento para outros sites e meios de informação, agindo como um ponto de encontro das principais informações e fontes sobre os heróis. Sempre que um infográfico for atualizado, ele gera uma nova versão, possibilitando ao usuário escolher da mais resumida a mais completa, a partir do momento que forem disponíveis.

39


Outro recurso disponível é a possibilidade de interação do usuário através das mídias sociais, podendo compatilhar dados do infográfico na rede e trazer novos leitores interessados. O site foi dividido em 3 telas de navegação básicas: a tela principal com os menus e as últimas informações adicionadas ao site; a tela secundária, com a timeline das Eras dos Quadrinhos e a divisão principal dos anos; e os infográficos individuais de cada herói, que possuem um formato padrão variando de acordo com o personagem e seu conteúdo. Além disso, quando o projeto for colocado em prática, o formato será adaptável para portáteis, tais como iPads e iPhones.

quadrinhos para iPhone e iPad

40


classificações e categorias A partir da pesquisa de referências, defini classificações e divisões para os tipos de infográficos, buscando uma maneira de melhor entender o formato que se adequaria ao projeto. Para tanto, fiz uma seleção de referências que acredito se encaixarem na linguagem que procuro e/ou com formatos diferenciados e interessantes. Categorias segundo conteúdo: • Quantitativos; • Temporais; • Geográficos; • Processuais; • Qualitativos/comparativos. Categorias segundo ordem de leitura: • Vertical/horizontal (lineares); • Expansivo/retrativo (não-lineares). A seguir, alguns exemplos:

41


vertical, temporal, quantitativo

vertical, temporal, processual

42


retrativo, temporal, processual

horizontal, comparativo

43


De acordo com esse levantamento, optei por 2 formatos que estão sendo utilizados, um para a divisão geral da cronologia Marvel e DC e outro para cada herói. Optei por um formato vertical para a linha do tempo, buscando uma linearidade de leitura e dividindo a cronologia pelas já mencionadas Eras dos Quadrinhos. Isso facilita o usuário a encontrar a informação que procura ou seguir a história dos quadrinhos ano por ano, de ambas as editoras ou da que preferir, apenas. Para o formato individual, de cada herói, sigo um modelo expansivo, tendo como centro o momento de origem do personagem, cercado por informações secundárias, já exemplificado.

quadro de Amazing Fantasy nº 15, estreia do Homem-Aranha

44


interface Toda a interface do site e dos infográficos foi elaborada considerando uma resolução de tela de 1600x900 pixels. Graças a responsividade possível com a linguagem HTML 5, o formato do site é adaptável para outras resoluções, como será demonstrado a frente. Optei por trabalhar com uma resolução alta considerando o público-alvo do projeto e a grande maioria de monitores com resolução widescreen presentes no mercado. Buscando uma interface amigável, foi utilizado um header fixo, que está sempre disponível para o usuário em todas as telas do site, ajudando-o a encontrar o que procura. Considerando a barra de rolagem do browser e a principal forma de navegação do infográfico - em full screen - foi utilizado um grid que excede as medidas de 1600x900 para o infográfico em si, que não é prejudicado por ser possível o uso de zoom e movimentação da tela. Nos resultados finais, a interface será detalhada.

45


6.

DESEN VOLVI MENTO CONTEĂšDO linguagem VISUAL formato testes iniciais resultados finais

46


layout e linguagem Para a tela de abertura do site, defini que um slideshow com uma imagem impactante fosse a principal forma de atrair o visitante. Ao mesmo tempo em que as últimas atualizações do site fossem adicionadas, a identidade do site e seu objetivo deveriam ser claros na primeira tela. Com isso, os primeiros testes realizados foram importantes para definir a hierarquia desses elementos e os pesos. Além disso, essa etapa também foi decisiva para a definição dos elementos presentes no site, tais como o uso de texturas e o tipo de traço das ilustrações, ícones, botões etc. Na segunda tela da interface, contendo a timeline da Era dos Quadrinhos, o importante foi definir a simetria e a divisão dos anos desde o começo, ficando claro para o usuário a possibilidade de escolha e seleção entre os heróis das duas editoras, mantendo a mesma hierarquia para as duas.

simplificação da forma (Thor)

47


teste inicial da te com os objetos ain

48


tela 1

ela de abertura, nda muito pesados

49


teste inicial de timeline, a divisĂŁo da

50


tela 2

, com os anos seguindo as editoras

51


primeiro rascunh do Superman, ainda se

52


infogrรกfico

ho do infogrรกfico em elementos definidos

53


7.

DESEN VOLVI MENTO CONTEĂšDO linguagem VISUAL formato testes iniciais resultados finais

54


tela de abertura Porta de entrada do site, a tela de abertura precisava ter um destaque imediato, que chamasse a atenção do visitante. Optei por cores saturadas da paleta, remetendo ao universo vibrante dos super-heróis, sem exagero para não transformar isso num elemento negativo. Ao mesmo tempo, o uso da tipografia forte do logotipo direciona o leitor e logo ressalta o objetivo do site e o caminho a ser tomado para prosseguir. O uso de um slideshow contendo as últimas atualizações do site também serve para chamar atenção, deixando claro a linguagem e facilitando o acesso às novidades e infográficos adicionados recentemente. No header, ficam claras as opções do menu e que o site está conectado às redes sociais; forma de aumentar a interação do usuário com a marca e expandir as possibilidades de divulgação e troca de informações. A seguir, a tela de abertura ampliada e destaques da navegação e seu funcionamento.

55


56


tela de abertura

57


destaque galerias

Foram desenvolvidos sub-menus em dropdown para as categorias secundárias do site, como demonstrado na imagem. O uso das galerias está ligado a rede social Pinterest, fazendo com que todos os infográficos tenham suas imagens em resolução maior encontradas na conta do Herographics do site. Além disso, diversas galerias podem ser criadas como visto no exemplo: capas marcantes, deshistas que ficaram reconhecidos por desenhar muito tempo determinado personagem ou quadrinhos específicos das histórias que marcaram um período.

58


destaque extras

Para o menu extras, foram pensadas diferentes maneiras de integrar o site Herographics a outras causas relacionadas ao seu contexto, mesmo que indiretamente. No menu “Seja um herói”, o usuário seria levado a uma página com dicas de projetos humanitários, como o http://www.wecanbeheroes.org/ ou o http://www.powertheworld.org. Já no menu “Ajude um herói”, ele poderia encontrar projetos de crowdfunding sobre quadrinhos para ajudar a financiar. Em “Imprimir herographic”, o usuário é levado a uma pagina com os infograficos separados em thumbnails, podendo escolher quais gostaria de imprimir no formato 12x18, em alta.

59


destaque direitos autorais

destaque slideshow

60


destaque redes sociais

No header do site encontram-se os links para as redes sociais, ativadando a cor azul através do mouse over. Utiliza-se o Facebook, o Twitter e o Google+ para atualizações e uma relação amigável com o usuário, gerando proximidade e mantendo o interesse no site, além de demonstrar periodicidade de novos conteúdos. O YouTube seria usado para upload de vídeos com curiosidades dos personagens, além de redirecionar para trechos de filmes, séries de TV e animações. Já o Pinterest, como mencionado, funcionaria como um banco de dados das imagens dos infográficos em resolução maior.

61


destaque transição

Para a transição entre a tela de abertura e a timeline, optei por um recurso dinâmico de virada de página, imediatamente remetendo a leitura dos quadrinhos. Assim que lê as instruções, o usuário se depara com uma mudança de cor na ponta da página, gerando curiosidade e levando ao conceito de splash page dos quadrinhos, onde a virada de página vem acompanhada de uma surpresa.

62


tela da linha do tempo Ao adentrar a linha do tempo, o usuário encontra os heróis divididos entre as duas editoras, tendo a possibilidade de escolher ver ambas ou apenas uma. Caso ele selecione pelo botão abaixo dos logotipos, a tela da editora escolhida entra com uma animação de slide, contendo uma breve descrição sobre ela. O fundo da linha do tempo representa a Era atual da navegação, que segue o uso da técnica parallax através da descida do scroll do mouse. À medida que o usuário desce, mais perto do presente ele chega, podendo se guiar pela âncora esquerda, através das Eras, ou pela âncora direita, pelos anos da Era em que se encontra.

63


linha do tempo

64


linha do tempo

na Era de Ouro

65


linha do tempo com desta da editora

66


destaque foco dc

aque para os super-her贸is DC Comics

67


destaque âncora de eras

Acima, destaque da âncora de Eras, onde o usuário pode se guiar e, caso não tenha certeza sobre o exato espaço de tempo, basta passar o mouse para obter a informação, que surge em slide por trás da âncora. Além disso, um ícone de dúvidas esclarece o funcionamento das Eras dos Quadrinhos e da âncora em si, caso seja ncessário. Todos os mecanismos da âncora são ativados através de mouse over, sem interferir na linha do tempo quando não utilizada, já que é retrátil.

68


destaque âncora de anos

Se a divisão por Eras não for suficiente e o usuário já tiver certeza absoluta do ano que quer visitar, ele pode navegar mais rapidamente pela âncora dos anos, à direita da linha do tempo. Além de balancear a simetria do layout, funciona como mais uma forma de escolha para o leitor do site, facilitando a navegação para aqueles que tem certeza do seu destino.

69


linha do tempo

70


destaque mecanismo de scroll 1

na Era de Prata

71


linha do tempo

72


destaque mecanismo de scroll 2

na Era de Prata

73


linha do tempo

74


destaque mecanismo de scroll 3

na Era de Prata

75


linha do tempo n

76


destaque navegação por eras 1

na Era de Bronze

77


linha do tempo n

78


destaque navegação por eras 2

na Era Moderna

79


ap贸s clique no her贸i surge anima莽茫o em

80


destaque transição para tela do infográfico

ou no botão circular, m círculo crescente

81


ap贸s clique no her贸i surge anima莽茫o em

82


destaque transição para tela do infográfico

ou no botão circular, m círculo crescente

83


ap贸s clique no her贸i surge anima莽茫o em

84


destaque transição para tela do infográfico

ou no botão circular, m círculo crescente

85


ap贸s clique no her贸i surge anima莽茫o em

86


destaque transição para tela do infográfico

ou no botão circular, m círculo crescente

87


ap贸s clique no her贸i surge anima莽茫o em

88


destaque transição para tela do infográfico

ou no botão circular, m círculo crescente

89


infográfico [grid] Para a construção do infográfico foi utilizado um sistema de grid em quadrante, onde 4 pontos-chave da origem do herói ditaram a disposição dos demais elementos. Seguindo a composição expansiva, o herói se encontra no centro do infográfico, fazendo com que as informações a seu redor possam ser lidas sem uma ordem específica, com esceção dos pontos-chave. Após entender a origem do herói, o usuário pode naveger pelo infográfico ou parar com a informação que tem, dependendo de seu interesse. Ele pode procurar as curiosidades escondidas, ler sobre as equipes em que o herói atua ou atuou e quando surgiram, saber sobre os criadores e muitas outras informações. Apesar de manter um formato de infográfico expansivo, foi importante hierarquizar as informações para ajudar na leitura do usuário, sem deixa-lo perdido. Por isso, uma ordem de exibição dos elementos ajuda a guiar o olhar do visitante para os acontecimentos, enquanto que um sistema de mouse over destaca o quadrante ao qual aquela informação pertence.

90


91


infogrรกfico [superman]

92


versão em alta resolução em anexo

93


94


ordem de aparição dos elementos, herói

95


96


ordem de aparição dos elementos, setor 1

97


98


ordem de aparição dos elementos, setor 2

99


100


ordem de aparição dos elementos, setor 3

101


102


ordem de aparição dos elementos, setor 4

103


104


MOUSE OVER POR SETOR, fullscreen

105


recomendações de leitura

Todos os infográficos possuem um header próprio, que contém uma breve descrição sobre seus criadores, a edição em que fez sua primeira aparição e recomendações de leitura. Acima, em destaque as recomendações de leitura do Superman, com título, ano de publicação e autores. Ao lado, seus criadores e sua primeira aparição em destaque, com exemplo de mouse over sobre a edição #1 da Action Comics, que redireciona o leitor para uma resolução ampliada na galeria do herói no site Pinterest, como explicado anteriormente e demonstrado no exemplo a seguir.

106


autores e primeira aparição

mouse over sobre Action Comics #1

107


pรกgina para a qual o l

108


destaque integração com pinterest 1

leitor é redirecionado

109


galerias do Herogra

110


destaque integração com pinterest 2

aphics no Pinterest

111


destaque superpoderes

Nos boxes de destaque encontram-se informações sobre os poderes do herói, as equipes das quais fez ou faz parte e sua galeria de vilões. Acima, destaque para os superpoderes e o funcionamento do mouse over. Para esta parte, simulei uma parceria com o site Comic Vine, que já possui um banco de dados com os poderes de vários heróis. Com isso, traria mais visibilidade para o Herographics e abriria portas através da parceria, tendo mais um meio de expansão da rede do site.

112


destaque equipes

No box das equipes, informações sobre a primeira aparição nos quadrinhos, o ano, seus criadores e a possibilidade de acesso das capas e outras imagens através da galeria do Pinterest, assim como na primeira edição do herói.

113


destaque idioma e sub-menu

Em todo o site há a possibilidade de mudança de idioma, do inglês para português e vice-versa, indicada pelo escudo do personagem Capitão América, no topo, à direita. Abaixo do header do personagem, existe um sub-menu que controla o zoom, tela cheia e a ativação de uma música tema, curiosidade que pode ser incluída dependendo do herói. Além disso, há o botão de teletransporte, que, ao ser acionado, leva o visitante para um outro infográfico randômico dentro do site, proporcionando uma surpresa a cada clique.

114


destaque compartilhamento

Ao lado de cada box de informações, existe uma barra de compartilhamento de redes sociais, possibilitando ao usuário curtir ou passar adiante informações pontuais dentro do infográfico. No rodapé do infográfico, uma segunda leva de compartilhamento nas redes está disponível, dessa vez referente ao infográfico como um todo. Para a aplicação do infográfico, está sendo estudado meios de pontuação para os usuários, que funcionariam para destravar conteúdos ou participar de promoções do site, entre outros.

115


curiosidades da DC ficam escondidas nos botões com o símbolo do personagem Flash, que acionam um átomo através do mouse over

116


destaque curiosidades “fatos flash”

quando clicado, a curiosidade é ativada, rebaixando o resto do infográfico e possibilitando o compartilhamento nas redes

117


jor-el

lara-el

superboy

jonathan kent

supergirl

Jor-El e Lara-El, nos quadrinhos

martha kent

krypto

Martha Kent, nos quadrinhos 118


Ă­cones dos aliados

pete ross

perry white

lana lang

lois lane

Lois Lane, nos quadrinhos

jimmy olsen

Jimmy Olsen, nos quadrinhos 119


lex luthor

general zod

bizarro

Lex Luthor, nos quadrinhos

Bizarro, nos quadrinhos 120


Ă­cones dos inimigos

brainiac

apocalypse

Brainiac, nos quadrinhos

Apocalypse, nos quadrinhos 121


infogrรกfico [thor]

122


versão em alta resolução em anexo

123


curiosidades da Marvel ficam escondidas nos botões com o símbolo do personagem Deadpool, que acionam um átomo através do mouse over

124


destaque curiosidades “deadpool sabia”

quando clicado, a curiosidade é ativada, rebaixando o resto do infográfico e possibilitando o compartilhamento nas redes

125


donald blake

jane foster

sif

bill raio-beta

Bill Raio-Beta, nos quadrinhos

Odin, nos quadrinhos 126

odin


Ă­cones dos aliados

balder

fandral

heimdall

hogun

Balder, nos quadrinhos

volstagg

Hogun, nos quadrinhos 127


loki

encantor

hela

Loki, nos quadrinhos

Hela, nos quadrinhos 128


Ă­cones dos inimigos

homens de pedra

executor

destruidor

Destruidor, nos quadrinhos

Executor, nos quadrinhos 129


8.

con clu s達o

130


para o alto e avante 5 anos de faculdade que convergem em um ponto do espaço e tempo. Todos os desafios enfrenteados ao longo de todos os projetos, e não apenas nesse, culminaram no resultado final descrito neste relatório. Foram 5 anos de muitas descobertas e aprendizados, pessoais e profissionais, que me possibilitaram passar pela incrível experiência que foi (e continuará sendo) o projeto Herographics. Por nunca ter feito um trabalho específico para web antes e nem ter desenvolvido nenhuma espécie tão complexa de infográfico nos anos que se passaram, esse projeto foi o teste máximo de minhas habilidades postas em prática, não só para meus professores, mas para mim mesmo. Aprendi muito e tirei dos meus heróis - fictícios e reais - a força para seguir em frente, apoiado pelos familiares, amigos, namorada e professores. Fiquei muito feliz com o resultado e com todo o processo do projeto, o qual pretendo executar de fato agora que um novo mundo surge fora das paredes da universidade. Termino o projeto de cabeça erguida, mais do que realizado e me sentindo apto a encarar o mundo que tanto temi durante alguns anos. Como diria o maior dos super-heróis: PARA O ALTO E AVANTE!

131


agradecimentos Gostaria de agradecer a todos que passaram pela minha vida acadêmica e me ajudaram a crescer de alguma forma, dentro ou fora da faculdade. Os nomes são muitos e alguns talvez não se encontrem na lista que vem a seguir, mas a gratidão nos nomes lembrados se estende, também, àqueles cujas ações moldaram onde cheguei. Ao professor João de Souza Leite, meu orientador e incentivador ao longo do projeto, que pude encontrar em 3 diferentes épocas da faculdade - começo, meio e conclusão - e, sem dúvida, só engrandesceu minha passagem pela PUC, amadurecendo meu olhar sobre o Design Gráfico de formas diferentes, em épocas diferentes. Ao professor Guilherme Toledo, que exigiu ao máximo de mim durante meu Projeto 4 e me ensinou a sempre exigir o máximo de mim, assim como ele fez. Sem dúvida, o período em que o tive como professor foi um divisor de águas na faculdade. A professora Nathalia Cavalcante, que me ensinou a ensinar, dando a oportunidade de ser seu monitor e ver o Design por outro ângulo. Aos professores Roberta Portas, Amador Perez, Alberto Cipiniuk e Lígia Saramago, que fizeram a diferença através do seu jeito de ensinar, se destacando com suas metodologias. A toda equipe da CUCA Design, que me ajudou com opiniões e dicas ao longo do projeto, além de todo apoio e amizade que

132


me foi concedido: Rafael Maciel, Natalia Franciss, William Valle, Sergio Valeriani, Leo Mendes, Barbara Formagio, Juliana Fajardo, Paulo André, Cynthia Homsi, Camila Mamede, Rodrigo Mamede, Fernanda Carvalho, Guilherme Howat, Marcela Félix, Nobuhiro Sudo, Paula Várzea, Renata Quevedo e Cláudio Vinício. Ao amigo, hoje professor, Karl Georges, que me incentivou quando precisei e me direcionou a um novo caminho nos desenhos, que abriu muitas portas. Aos amigos que tiveram algum destaque entre os demais ao longo dessa árdua jornada: Thiago Lehmann, Julia Maline, Deborah Piragibe, Brunno Micheli, Guilherme Santos, Valter Bispo, Thiago Marques, Tássia Assis, Lucas Vintena, Gabriel Victor, Lucas Marques, Arides Luna, Bruno Arauto, Thiago Vale, Lipe Diaz, Anderson Mahanski, Lucas Carnaval, Gustavo Barcellos, Sergio Naiki, Augusto Linck, Ana Paula Chamum, Fábio Barreto, Karla Borges, Zé, Tiago Saraiva, Caio Junger, Rogério Farner. A minha namorada, que esteve ao meu lado, me apoiando (e aguentando) nos momentos mais difíceis dos últimos 2 anos. Sou grato por toda força que ela me deu, acreditando em mim sempre. Por último, mas não menos importante, a toda minha família, que me permitiu chegar até aqui, me apoiando sempre, entendendo os momentos de dificuldade e me ajudando a supera-los. Em especial, ao meu amado pai, que faz de tudo pela família, um verdadeiro herói.

133


9.

bibli ogra fia

134


LIVROS SAMARA, Timothy. Guia de Design Editorial. São Paulo: Bookman, 2005 SAMARA, Timothy. GRID: Construção e Desconstrução. São Paulo: Cosac Naify, 2007 TUFTE, Edward R. Envisioning Information. Connecticut: Graphics Press, 1990 EISNER, Will. Quadrinhos e Arte Sequencial. São Paulo: Martins Fontes, 2010 MCCLOUD, Scott. Desenhando Quadrinhos. São Paulo: M. Books, 2008 MCCLOUD, Scott. Desvendando os Quadrinhos. São Paulo: M. Books, 2005 DOWSETT, Elizabeth. Marvel Chronicle. Nova York: DK Publishing, 2008 DOUGALL, Alastair. The DC Comics Encyclopedia. Grã-Bretanha: DK Publishing, 2008 REVISTAS Coleção DC 75 Anos, ed. Panini Comics PÁGINAS DA INTERNET http://www.coverbrowser.com/ http://datavisualization.ch/ http://killerinfographics.submitinfographics.com/ http://ftgraphicworld.ft.com/ http://www.comics-db.com/ http://en.wikipedia.org/wiki/QR_code http://www.youtube.com/watch?v=-3D5FwwtNVM&feature=youtu.be

135


http://grouek.com/ctrlpaper/ http://www.twistedfork.me/ http://thedeepestsite.com/ http://www.comicvine.com/ http://abduzeedo.com/super-abc-matt-cowan http://www.behance.net/gallery/SnowQbe-Twiidee/3853917 http://g1.globo.com/platb/o-perfil-do-facebook/ http://blog.gameanalytics.com/blog/visualizing-data-how-we-do-it.html http://www.behance.net/gallery/Pattern-Matters-Tangible-Paper-Infographic/3411991 http://www.flickr.com/photos/juanpablobravo/7154643828/sizes/o/in/photostream/ http://abduzeedo.com/amazing-jan-nagras-365-project http://abduzeedo.com/comic-book-artist-jack-kirby http://filipecapra.blogspot.com.br/2012/05/deixe-sua-dica-de-ufcfs.html http://abduzeedo.com/ui-design-avengers-jayse http://holykaw.alltop.com/from-the-desk-of-don-draper-infographic?tu3=1 http://ed.ted.com/lessons/david-mccandless-the-beauty-of-data-visualization http://maleev.com/wp/?page_id=127 http://www.myfonts.com/fonts/adobe/futura/ http://sixmorevodka.com/portfolio/# http://www.atlassian.com/time-wasting-at-work-infographic http://janploch.de/ http://www.axure.com/?gclid=CJe5i9aJgbMCFQsGnQodq1YA8A http://www.uniridethailand.com/ http://www.behance.net/gallery/Ruberr-UI-Website-Data-Visual/5070911 http://www.sweetrobot.co.uk/ http://boksquiz.org/ http://jayse.tv/v2/?portfolio=avengers-helicarrier-glass-screens http://www.nemostudio.fr/

136


http://www.thefwa.com/site/here-at-home http://www.dkngstudios.com/2011/11/07/william-james-murray-art-print/ http://www.coverbrowser.com/ http://marvel.wikia.com/Earth-616 http://look-at-this-photograph.com/ MESTRADO PUC-Rio, Dissertação de Mestrado, Departamento de Artes e Design, Programa de Pós-Graduação em Design: Marcos Balster Fiore Correia, A Comunicação de Dados Estatísticos por intermédio de Infográficos: Uma Abordagem Ergonômica

137


138


Herographics