Precisava ser feito uma ilustra no estilo que eu havia feito para a revista Nova Escola. O assunto do Super Radar é educação a distância em que fala de um serviço que pretende combater o baixo número de professores de matemática no Reino Unido aproveitando a mão de obra qualificada da Índia, ex-colônia que é famosa pela excelência de seus profissionais de exatas.

Quem me pautou foi o designer Raphael Galassi que trabalha na Super.

Antes de ilustrar fui em busca de referências visuais, junto a um esboço que o Rapha me mandou para compor a ilustra:

Ilustra original:

Efeito de giz na lousa:

Ilustra na revista:

Ilustração Marco Moreira
Direção de arte Raphael Galassi
Texto Felipe Van Deursen

Veja tudo o que foi publicado sobre o meu trabalho por aí

Como a base da imagem seria uma lousa, a ilustração precisava ter uma característica bem manual, onde o que deveria ser fotografado ou simulado seria a escrita a giz e como não tenho nenhuma lousa em casa e não tenho tanta destreza para escrever letras miúdas com a tablet, preferi usar a minha técnica preferida. O desenho com minhas canetas na folha de papel.

Primeiramente fiz alguns rafes no ilustrator. Isso mesmo, quando o job é uma ilustra à mão, eu costumo fazer os esboços da diagramacão no computador, pois é muito mais simples de alterar antes do cliente aprovar e partir para o desenho à mão.

Preparando a área de trabalho…

Work in progress…

Feito!

Pesquisa de imagens

Aplicaçao da ilustra na imagem

Final:

Já nas bancas!

Ilustração Marco Moreira
Direção de arte Manuela Novais
Reportagem Maíra Kubík Mano

Comecei então a fazer alguns estudos e testes para que o resultado ficasse de acordo com o briefing que a diretora de arte da revista me passou.

E como se tratava de um desenho com tipografia, busquei uma imagem de um livro aberto na web e apliquei um efeito desfocado para simplificar a forma e começar a montar a estrutura das palavras por cima:

Então fiz alguns testes:

Até chegar no resultado final:

Que foi aplicado na capa:

Direção de Arte: Manuela Novais
Ilustração: Marco Moreira

Este ano fomos indicados na categoria Digital como “Melhor uso do meio” com o Game CSI já postado aqui. Deveria existir uma categoria “game” ou “entretenimento” né, mas como não há, inscrevemos o game nesta categoria.

http://super.abril.com.br/infograficos/info_405177.shtml
Em 2007 fomos indicados com o Infográfico Turbulência em Aviões também na categoria digital como “vídeo” (mas porque raios vídeo???)
Pois é, tínhamos um info super legal que ganhou até Bronze no Malofiej 2007, mas não havia uma categoria específica para a inscrição no Prêmio Abril, por isso acabou ficando aí mesmo.

http://super.abril.com.br/infograficos/info_432780.shtml

Uma coisa que eu não entendo ainda na empresa é o por que a direção ainda não criou uma categoria “Infografia on-line” no prêmio. Poxa, tem tantos infos bacanas que a Abril já fez na Super, História, Mundo Estranho e outras marcas na casa que merece seus devidos reconhecimentos!!
Acredito ser mais um motivo de não termos levado a o “troféu arvorezinha”, pois não estávamos inseridos na categoria correta. (Fica aqui o meu apelo)

Aliás, cortaram as árvores no último prêmio (e pela raiz!), ou seja, a arvorezinha prateada, símbolo cobiçado e de tradição em todos os prêmios agora será fornecida apenas uma unidade por redação e os indicados então, nem mini árvore terão mais (este é o meu caso)..rs, mas a empresa deve ter os seus motivos, não é?

Bom, independente das deficiências na estrutura do evento em si, estou muito satisfeito com o resultado e o reconhecimento desses trabalhos.

A encomenda de uma versão do logo do Guia do Estudante em 3D para o site surgiu depois de eu ter feito uma adaptação no logo da Mundo Estranho.

Acima alguns estudos que fiz até chegar a versão final que eles escolheram.

O logo foi feito na ferramenta de 3D do Illustrator e finalizado em photoshop.

Trabalhei neste conjunto de infográficos por um período em que o Infografista Espanhol Alberto Cairo estava dando consultoria na empresa.
Foi uma experiência única entrar de cabeça no mundo da infografia e saber de fato qual é a função de um infográfico, como informar de maneira eficiente e qual é o objetivo de cada peça.

Minha participação foi na navegação e produção dos infos com a consutoria do Alberto Cairo.

Na imagem acima listei os 5 infográficos que fizemos, que são eles:

1) Cidade Política (fora do ar)
2) O que diferencia os humanos dos animais
3) Os maiores lagos do mundo
4) Arco e flecha
5) Esgrima

Infográficos são caracterizados pela informação textual e imagens que complementam e ajudam a tornar a informação inteligível. Um info pode se estático ou animado, impresso ou digital, linear ou interativo…
Diversos portais, jornais e revistas no mundo usam a infografia para explicar como coisas funcionam, como aconteceu tal notícia, para mostrar de forma agradável e criativa as estatísticas de uma campanha política por exemplo, ao invéz de disponibilizar gráficos de pizza ou tabelas enfadonhas.

Se quiser saber e ver mais (muito mais!) sobre infografia, acesse meu delicious.

Como era de se esperar e como faz parte da minha metodologia de trabalho neste projeto também comecei pelo wireframe. As informações já estavam bem organizadas, então a única coisa que fiz foi planificá-las para ter uma noção macro do site e então partir para a criação dos layouts no photoshop.

A idéia era fazer um visual jovem, a ver com os estudos, por isso decidi fazer algo que talvéz não seja tão inovador em termos de design, mas que o público se identificasse, que fosse extremamente funcional e fácil de encontrar as informações.

Em questão de legibilidade, optei por um layout com cores chapadas e desaturadas, que não fossem agressivas ao olho do internauta que visita o hotsite, além de fazer o fundo do texto também com o intuito de tornar uma leitura agradável, saindo do tradicional contraste fundo branco, fonte preta.

Mais uma vez eu contei com o Elton Prado, um parceiro que dá vida aos meus projetos, tornando-os navegaveis e indexaveis, tendo em mente sempre o foco no usuário, sempre se preocupando na função aliado ao visual.

Como o site já está fora do ar, você pode ver o layout no meu Flickr

O infográfico “Os piores discos de todos os tempos” saiu primeiramente da revista Mundo Estranho edição 74 e foi adaptado para internet, como diversos outros infos que são feitos na redação.

Na dupla da revista, legumes de diversos ângulos atingem os artistas. Me baseando nesta idéia, na versão online o usuário pode atirar tomates, ovos e etc para ver curiosidades e ouvir trechos dos piores discos da história.

Abaixo as imagens do legumes em movimento que foram animadas no info.

Logo na abertura do info você poderá ver uma instrução básica e rápida de como navegar.

Fiz o layout e conceito de navegação, mas deixei a programação com o parceirasso Elton Prado, programador do site da Superinteressante que sempre colabora com muito empenho em várias de minhas pirações “flashmaníacas”. Valeu Elton!

Veja o info

Comparando as estátuas

Este infográfico surgiu a partir da versão impressa que saiu na revista Mundo Estranho edição 71

O conceito de criação foi simples: Ser intuitivo e possibilitar uma experiência ao usuário. Experiência pode ter um sentido de experimentação descuidada e irresponsável, por isso, ao invés de ficar testando o usuário e correr o risco dele não ter paciência e sair, adicionei um botão de acesso às “dicas de navegação” que você pode ver no canto superior direito, aí você não deixará de passar por nenhum lugar no info.

Muitos infográficos que vemos são em geral super lineares. Sim, é fácil de entender e óbvio de navegar, mas é sem sal, não te fornece essa tal experiência que falo, não surpreende. Claro, cada caso é um caso. Existem infos que não tem como não ser linear, porém, como estamos acostumados com o impresso (livros e revistas) onde lemos uma página após a outra, é realmente difícil de pensarmos o “não linear”.

Nesse infográfico o usuário faz as escolhas, não é obrigado a passar por cada fase da informação. Aqui ele escolhe a cor de fundo, se quer linhas ou não, se quer ver informações das estátuas ou simplesmente compará-las visualmente. Neste caso um info linear poderia ser feito porém o usuário talvez não teria opções de troca de fundos e imagens por exemplo.

Outra coisa importante a se falar é sobre legendas e afins, que diferente do impresso, não precisa ficar tudo exposto. Na web a gente pode usar mouse over e clicar, lembra?
É evidente que você lembra, mas as vezes nós esquecemos dos princípios básicos da internet.
No info eu usei um “alt” para legendar os ícones que representam altura, localização, ano e material. Depois de visto a primeira vez talvez o usuário aprenda e passe a visualizar automaticamente as informações das demais estátuas.

Ah! foram feitos rafes antes da concepção gráfica, claro:

Veja o Info

Essa é uma versão digital da matéria que saiu na revista mundo estranho.

Veja o info