Trabalhando com Motion Graphics em Websites

Tem sido cada vez mais comum e necessário para uma marca reforçar sua comunicação utilizando Motion Graphics. Seja em um vídeo, em uma página de internet ou aplicativo de celular, o valor agregado pode não ser apenas visual, mas também funcional.

No CSS3 para web, temos cada vez mais o suporte nativo dos navegadores a recursos que facilitam a criação de gráficos em movimentos, além de um desempenho cada vez mais fluido.

Quando utilizada para exibir e destacar seus itens de forma criativa, otimizando o projeto em seu visual e em sua usabilidade, a combinação

Neste primeiro exemplo, um site de locação de ônibus com design retro de uma empresa da Estônia chamada Timeless, mostra como um design limpo, bem estruturado e utilizando elementos em movimento podem dar o foco ideal ao seu conteúdo de forma criativa:

Neste segundo exemplo, o site da estilista francesa Julia Cristobal, com o mesmo conceito de um design limpo e elementos em movimento suaves:

Neste terceiro exemplo, o site de da mais antiga vinícola de Porto, a Kopke. Seu site une um design vintage a um storytelling mostrando toda a tradição da vinícola com elementos em movimento e até mesmo vídeos em meio ao seu conteúdo. Uma música de fundo da ainda mais vida e temática, tornando o acesso ao site uma verdadeira experiência:

Criatividade controlada

Apesar de ser um ótimo recurso, desenvolver para web utilizando Motion Graphics exige alguns cuidados. Os principais são: evitar exageros e verificar o suporte de navegadores. Mesmo com um amplo suporte atualmente, o CSS3 disponibiliza recursos que não são suportados por todos os navegadores. Deve-se sempre ter uma base de informações sobre quais tipos de dispositivos que acessarão o site que está sendo desenvolvido ou buscar soluções que atendam sem mais problemas as restrições, para que não haja erros de exibição ou de performance.