Recentemente fiz um job para o Núcleo Jovem da Editora Abril. O núcleo precisava fazer uma apresentação que ia rolar na Semana Web Abril que acontece todo ano na editora. O tema principal da palestra foi News Games. Fred Di Giacomo (Jornalista) e Fabiane Zambon (Designer) foram os cabeças da apresentação. Falaram ainda sobre ARGs, jogos e infográficos online.

Com base no roteiro e nas imagens que o Fred e a Fabi me mandaram fiz um estudo de quais elementos iriam aparecer na ilustração. A ilustra serviu como base para a apresentação que foi feita em Flash, usando elementos do desenho como links.

Abaixo os esquemas e processoas da criação da ilustra e navegação do flash.

Processo/Sketches

Flash x Ilustração

Enquanto meu assistente (valeu Jow!) montava o flash eu fazia a ilustração e elementos como setas, botão fechar e etc que também foram feitos à mão.
Comecei desenhando a lápis, claro…

Ilustração - desenho a lápis

Em seguida usei canetinhas pretas de três espessuras diferentes para poder trabalhar do detalhe e nas partes que exigiam preenchimento.

Ilustração - canetinha preta

Feito a ilustra em preto, fotografei, colorizei no photoshop e enviei as duas versões para o cliente aprovar.

Ilustração colorizada no photoshop

Depois do retorno, a ilustra sofreu algumas alterações. O cliente pediu para rebaixar elementos que não faziam parte diretamente do que ia ser falado na hora e dando mais ênfase a cada fase. Com isso a apresentação ficou menos carregada mas não deixou de ter o seu aspecto jovem e ilustrativo:

Versão final com ajustes do cliente

Como forma de navegação foram utilizados Zoom-in/Zoom-out para aproximar e afastar cada momento, podendo utilizar também recursos de teclado, como as teclas 1,2,3 e 4 para as respectivas fases e dentro dos conteúdos setas do teclado para que a apresentação pudesse ser conduzida sem precisar recorrer ao mouse.

Na construção da navegação me preocupei muito com o contexto de uso. Imagine: Apresentador em pé, um pouco nervoso usando o laptop. O que poderíamos facilitar?

- Botões de hit (flash) em tamanhos maiores que a própria imagem do botão para não haver dificuldade ao apotar o mouse para determinado link.

Símbolos de controle - Te lembra algum game?

- Áreas claras e símbolos facilmente reconhecidos (fechar, avançar, voltar…). Fizemos a brincadeira de pegar os símbolos do controle do Playstation e usar para fechar, avançar (neste caso deitamos a setinha verde) e acessar. A intensão foi fazer uma alusão ao game, já que a palestra tratava disso, mas não copiar a funçao do playstation, e sim usar a forma do símbolo no contexto da internet.

- E o básico: Não pode dar erro na apresentação! Testamos tudo, de inúmeras formas para que o cliente não passasse um carão lá na hora. Já basta o nervosismo natural de uma apresentação. Funcionar 100% é básico.

E para finalizar a palestra, foi feita uma rápida animação do Chuck Norris dando uma voadora no Game Over, que tem a ver com um dos quadros do game Mortos de Lost feito pelo núcleo Jovem de internet da Abril.

Rafe e frames do Chuck Norris dando a voadora no Game Over