Herographics by Pedro Ribeiro

HEROGRAPHICS

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

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

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

INTRO DUÇÃO

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-

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

con ceitu aĂ§ĂŁo

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.

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.

DESEN VOLVI MENTO CONTEĂ&#x161;DO linguagem VISUAL formato testes iniciais resultados finais

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.

Action Comics nยบ 1, 1938

Showcase nยบ 4, 1956

Green Lantern nยบ 86, 1971

Watchmen nยบ 1, 1985

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.

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

hierarquia da informação

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

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

DESEN VOLVI MENTO CONTEĂ&#x161;DO linguagem VISUAL formato testes iniciais resultados finais

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.

MOODBOARD

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.

arte de Ram贸n K. P茅rez

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

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

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

logotipo e aplicações

HEROGRAPHICS HEROGRAPHICS HEROGRAPHICS HEROGRAPHICS 33

HEROGRAPHICS margem de segurança

símbolo usado separadamente

HEROGRAPHICS variação de posicionamento

sĂmbolo aplicado em caneca

sĂmbolo aplicado em camisa

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.

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

DESEN VOLVI MENTO CONTEĂ&#x161;DO linguagem VISUAL formato testes iniciais resultados finais

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.

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

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:

vertical, temporal, quantitativo

vertical, temporal, processual

retrativo, temporal, processual

horizontal, comparativo

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

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.

DESEN VOLVI MENTO CONTEĂ&#x161;DO linguagem VISUAL formato testes iniciais resultados finais

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)

teste inicial da te com os objetos ain

tela 1

ela de abertura, nda muito pesados

teste inicial de timeline, a divisĂŁo da

tela 2

, com os anos seguindo as editoras

primeiro rascunh do Superman, ainda se

infogrรกfico

ho do infogrรกfico em elementos definidos

DESEN VOLVI MENTO CONTEĂ&#x161;DO linguagem VISUAL formato testes iniciais resultados finais

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.

tela de abertura

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.

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.

destaque direitos autorais

destaque slideshow

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.

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.

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.

linha do tempo

na Era de Ouro

linha do tempo com desta da editora

destaque foco dc

aque para os super-her贸is DC Comics

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.

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.

linha do tempo

destaque mecanismo de scroll 1

na Era de Prata

linha do tempo

destaque mecanismo de scroll 2

na Era de Prata

linha do tempo

destaque mecanismo de scroll 3

na Era de Prata

linha do tempo n

destaque navegaĂ§ĂŁo por eras 1

na Era de Bronze

linha do tempo n

destaque navegaĂ§ĂŁo por eras 2

na Era Moderna

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