Uma das questões mais comuns que cruzamos no marketing digital é: “O que estamos tentando transmitir?”. Seja para um novo website, conteúdo estratégico ou até mesmo um simples hotsite. Nós acabamos perdendo muito tempo tentando desenvolver um storytelling que seja claro, interessante e ajude a elevar a nossa marca.

Definir e criar é somente um pedaço desse quebra-cabeça. Decidir a plataforma para criarmos é tão importante quanto a idéia em si.

Um conceito que gostamos muito na GaiaNet é o parallax. Essa técnica tem se tornado cada vez mais popular entre web designers porque nos permite dar uma profundidade e movimento criando uma experiência única para o usuário. Parallax envolve objetos e layers criando movimento em diferentes direções com diferentes velocidades, utilizando CSS3 transformando propriedades de um objeto como por exemplo sua rotação e escala.

Seguem alguns exemplos que consideramos na GaiaNet espetaculares para o storytelling + parallax.

 

1. Every Last Drop

everylastdrop

 

2. NASA: Prospect
nasaprospect

 

3. The Royal British Legion

royal

 

4. Highway One

highway

5. Atlantis World’s Fair

atlantis

Considerações

Design Responsivo / Mobile Design: De todas as bibliotecas parallax que vimos, nenhuma é 100% otimizada para mobile ou design responsivo. Muitos usam porcentagem de altura e largura o que pode causar problemas quando rotacionamos um dispositivo Animações e JavaScript podem pausar ao longo do scroll do usuário, tem claro, alguns meios que deixar uma experiência mobile mais agradável, mas tenha em mente desde o início do projeto e que não será 100%.

Gráfico e Ilustrações:  Se você deicidiu usar parallax I recomendo investir tempo e recurso na parte gráfica e ilustrações. Como pode ser pelos exemplos citados a parte mais atraente é claramente colocada em primeiro lugar pelo visual utilizado.

Processo do Design: Diferente dos mockups padrões, fazer o design de um projeto em parallax é muito mais como um storytelling. Tenha certeza de passar todas as suas expectativas para seu time ou cliente para que eles possam entender por completo o seu projeto. Minha sugestão é pensar em cenas e criar um longo mockup que mostre cada uma das cenas, assim permite visualizar a sequência de cada animação e sua interatividade.