Quando falamos de UX Motion, existem muitas questões que ainda parecem muito abertas. Primeiramente, se pensarmos no universo do UI/UX Design, notamos o quão novo tudo ainda é. Agora, pensar que dentro desse novo universo existe uma área ainda mais nova, é comum que muitas dúvidas aconteçam e a principal delas é a de que software usar para as animações de interface.
Diferente das outras áreas do Design, a área de UI/UX não possui ainda um software que possa ser considerado padrão. Somente na parte de Design de Interfaces podemos listar os mais comuns como sendo o Sketch, Figma e Adobe XD, se formos para a parte de prototipagem encontramos o Invision, Principle, Protopie, Framer, as próprias funções de animação do Sketch e Figma… e por fim, o After Effects.
Claro que falando na parte de prototipagem, os softwares listados anteriormente surgiram exatamente com o foco nesta demanda, e por decorrer da necessidade dos designers de UI/UX em desenvolverem protótipos, seja para testes internos ou para apresentações para clientes.
Mas ok, ainda não respondemos à principal pergunta: Por que o After Effects?
A função do After Effects na Indústria do Motion
Primeiro, precisamos entender a função do After Effects na indústria de Motion e vídeo. Esta ferramenta surgiu lá atrás em 1993, e até hoje vem se atualizando, crescendo e ficando cada vez mais completa. Inicialmente muito utilizado para composições, efeitos visuais e um motion voltado para o vídeo. Conforme ele foi se tornando mais acessível e cada vez melhor, o Motion Design como conhecemos hoje(vídeos 100% animados), começou a tomar conta e dominar o After Effects, não apenas na parte de criação, mas com implementações através de Plugins e Scripts.
Muitos softwares voltados para o Motion Design surgiram desde então(e ainda surgem) mas nenhum deles ainda foi capaz de tirar o After do seu posto. Um dos grandes fatores para isso está nas infinitas possibilidades de animação que existem ali dentro, e esse é um dos principais pontos pelo qual o After é a base do UX Motion.
Por se tratar de um software que faz com excelência diversos tipos de animações — simples e complexas — quando pensamos em animação para interfaces, as possibilidades de criarmos algo dentro deste programa se tornam praticamente infinitas.
As outras ferramentas de animação, como as próprias presentes junto ao Sketch e Figma, são praticamente complementos de um software voltado para o Design. Já o After é voltado para a animação e mesmo assim ainda possui diversos complementos para incrementar ainda mais esta área.
E quanto à Prototipagem?
Quando falamos de protótipos, o Invision, o Principle e o ProtoPie(como exemplos), se mostram bem comuns dentro do universo UI/UX pela sua possibilidade de interação direto a partir do mouse e toques. Esta parte realmente é onde (ainda) não é possível ser realizado dentro do After.
Entretanto, a prototipagem no After Effects consegue possibilitar uma variação de ações e reações de elementos de interface, que o próprio Invision ou Principle não conseguem resolver, ou que seriam complexos e trabalhosos demais para serem desenvolvidos.
Um dos grandes poderes do After é associar de um lado uma qualidade de saída de animação superior, à uma prototipagem dinâmica capaz de se tornar uma própria apresentação.
Muita das vezes, a possibilidade de ter na mão(ou na tela) algo que você possa clicar para demonstrar certas ações pode não ser a mais interessante para apresentações. O After Effects nos permite usar a força de apresentações e vídeos explicativos, associados à nossas animações de interfaces, envolvendo mockups estáticos ou até em movimento, e outros elementos gráficos presentes em vídeos.
“Ok, mas ainda não estou convencido”. Não se preocupe que agora vem a melhor parte:
Saída Direto em Código
Sempre que falamos de animações e protótipos, sempre vemos uma discussão com relação às coisas que são basicamente impossíveis de se replicar em CSS, código, etc. Em como o programador iria “sofrer” e perder bastante tempo para conseguir replicar algo assim (e cá entre nós, no fundo, nós sabemos que mesmo ele replicando, nem sempre fica tão bom quanto o que planejamos).
Algo que começou a surgir no final de 2016 e veio para definir o After Effects como ferramenta principal e essencial para o UX Motion, foram as suas extensões — Bodymovin e Lottie — que possibilitaram uma exportação de dentro do After Effects para código. Isso quando surgiu foi algo incrível, e até hoje surpreende muitos que tomam conhecimento pela primeira vez. Imagina só o poder que é juntar Motion Designers em seu software mais potente e principal de animação, conseguindo desenvolver animações que irão tocar na Web e em Apps Mobile, do mesmo jeito que eles desenvolveram. Exportando tudo com um simples toque! Isso é praticamente mágico.
Através dessas Extensões (que vem crescendo e evoluindo desde então) a relação After Effects e Web/Apps, Motion Designers e UI/UX, Animação e Código, se tornaram bem mais estreitas, fazendo parte hoje em dia de uma única vertente: o UX Motion Design.
Parte dessa “nova realidade” vem se reforçando com o tempo através da evolução das integrações do After Effects e as ferramentas de desenvolvimento de interfaces. Hoje em dia empresas, e a própria desenvolvedora de softwares, vêm trabalho para integrar cada vez mais esses programas com o After Effects. Adobe XD, Figma e Sketch, todos já possuem formas de integração que permitem exportar destes programas para dentro do After. Reconhecendo assim o programa para qual as interfaces seguem caminho e ganham vida.
Além disso, a principal maneira de enriquecer e se ter animações melhores nos softwares de prototipagem é usando animações vinda do After Effects. O próprio ProtoPie, Framer Web, Webflow, entre outros, utilizam de animações exportadas em código do After Effects para enriquecer e tornar melhor a experiência de suas prototipagens.
Mesmo com todos esses pontos, muita coisa ainda está para aproximar cada vez mais o After Effects do universo UI/UX. O UX Motion Design é bem mais completo do que simplesmente aprender o After e sair animando interfaces. Existem princípios e conceitos exclusivos dessa área e que utilizamos a cada dia. Porém aprender esta ferramenta também já é um primeiro passo. 😉
