O processo de criação do site começou com muito estudo sobre novas tecnologias e padrões de interface, e como usá-las em nosso projeto. Com base nisto, avaliamos a utilização de SVG, imagens animadas, parallax, animações em CS3 e como implementá-las para deixar o site mais interativo e visualmente atraente.

Em nossa pesquisa achamos uma referência de parallax no site da Nike (que está fora do ar, veja no vídeo abaixo) que permitia definir uma timeline para cada elemento e como ela iria se comportar de acordo com a rolagem, o que nos levou a definir uma navegação utilizando parallax com timeline como padrão para o nosso projeto. Fizemos alguns testes iniciais, verificando frameworks e bibliotecas que nos permitissem implementar este padrão, mas acabamos utilizando uma versão personalizada da utilizada pela Nike. Com base nisto passamos ao desenvolvimento da parte visual, aos testes iniciais de viabilidade e implementação.

Execução

Como foi um projeto interno e feito de forma intercalada aos projetos dos clientes da ZW, não tínhamos um cronograma definido, o que nos deu um bom tempo para desenvolver o site,  fazendo testes, experimentações e melhorias visuais. Sempre que chegávamos a um ponto satisfatório, finalizávamos uma etapa. Na parte de interface, como nosso diretor de criação e design, Bruno Zanetti, é muito perfeccionista, tivemos cerca de cinco versões da página “Quem Somos”, várias atualizações na página “Home” e ajustes diversos em todas as páginas durante todo o processo. Sempre que víamos coisas novas, que mudavam nosso ponto de vista, atualizávamos o site. Após muitos pontos, detalhes debatidos e discutidos com toda a nossa equipe, chegamos a uma versão madura.

quem-somos-anim-blog

Por baixo do capô

Como o que mais chama atenção em nosso projeto é a experiência de navegação, preferimos mantê-la nas duas versões (desktop e mobile), fazendo otimizações específicas apenas para a versão mobile, mas mantendo a mesma experiência em todos os dispositivos. No server-side, o projeto foi todo desenvolvido em WordPress, com vários plugins para estender as funcionalidades nativas da plataforma. Utilizamos vários tipos de Custom Posts Types e campos personalizados, que nos permitiram criar toda a estrutura necessária para mostrar o nosso trabalho e implementar os detalhes de UI desejados, além de nos proporcionar uma estrutura totalmente administrável e expansível. Eu, particularmente, acho o site extraordinário, e temos recebido muitos elogios de amigos, clientes e profissionais do mercado. Não utilizamos Flash em nenhuma etapa, tudo foi feito utilizando HTML5, CSS3 e JS, e no futuro pretendemos acrescentar algo em 3D e SVG. Espero em breve colocar um post sobre as atualizações do site, e espero que vocês gostem.