Princípios em movimento

Em páginas de marketing, recursos para redes sociais, vídeos de marca e apresentações, o movimento é o que dá vida às ideias. Ele permite que o design se desenrole no tempo, com ritmo, som e sequências que direcionam a atenção e dão forma ao significado.

Pedimos para três designers de movimento do Figma — Chad Colby, Ben Hill e Gilles Desmadrille — explicarem os princípios do movimento, como expandir as possibilidades ao contar histórias e como a IA está mudando o trabalho deles.

Anja L.

Qual é a maior diferença entre design gráfico e design de movimento?

Ben H.

No design gráfico, tudo é comunicado em momentos congelados no tempo. O movimento remove essa restrição, introduzindo ritmo, andamento, transformação e caráter. Os fundamentos continuam iguais, centrados em clareza e intenção.

Gilles D.

Pensamos mais em múltiplos quadros. Em vez de tentar condensar cada elemento da história na mesmo imagem, dividimos, para facilitar a compreensão: primeiro isto, depois aquilo.

Chad C.

A questão mesmo é como usar o elemento tempo em movimento para contar uma história ou comunicar uma ideia. Como usar suavização e timing para evocar um sentimento ou transmitir o que está tentando dizer? Há uma conexão profunda também na sincronização do som. Quando você pensa em música, na estrutura das batidas, é tudo questão de timing, assim como no movimento.

Ben H.

Sempre me impressiona como o som e a imagem se juntam e criam algo maior do que a soma de suas partes. Seu cérebro faz conexões que você não poderia ter planejado. Isso é muito básico no meu jeito de fazer as coisas: deixo um pouco para o acaso e deixo a mente aberta para esses acidentes felizes.

Anja L.

Que referências você usa para definir como algo deve se mover?

Gilles D.

Acho que o principal é entender a física. A raiz do movimento é a forma como as coisas se mexem no mundo real. Digamos que você esteja tentando animar ou criar um prompt para uma bola que quica. Ela começa muito rápido, salta e desacelera ao atingir o ponto mais alto. Aí ela cai outra vez e cada salto fica menor. É muito importante conseguir registrar essa sensação.

Ben H.

Se você está se inspirando só em outros trabalhos de movimento, vai acabar caindo nas tendências esperadas (não dá para fazer tudo com bolas quicando e retângulos). Se você se inspirar nos movimentos da natureza, nos dispositivos de narrativa e em truques de edição do cinema, ou mesmo nas formas gestuais da arte e do design, vai se destacar.

Gilles D.

Afinal, as pessoas reconhecem quando um movimento é “bom”, mesmo que não consigam explicar o porquê. O design é mais subjetivo. A relação do movimento com o mundo real faz essa distinção.

Anja L.

Como você transforma o que vê no mundo real em sensações de movimento?

Gilles D.

Acho que o principal é o easing, ou suavização, que é como descrevemos o tempo e como as coisas se acomodam no lugar. Outra é o match cut, onde você vai de uma cena para outra, mas as conecta através do mesmo movimento. Você pode ir de lento, para rápido, para lento novamente, e fazer um corte brusco no ponto mais rápido, e acaba parecendo uma transição sem emendas. Transições são muito importantes para nossa compreensão do movimento. Elas são essenciais para conectar pontos de uma história, ajudando tudo a parecer coeso e unificado. Por exemplo, muitos dos nossos vídeos de lançamento mostram vários casos de uso para um recurso, mas precisam parecer uma experiência contínua, então usamos transições e cortes bem posicionados para manter o impulso e o ritmo, engajando visualizador durante todo o vídeo.

Ben H.

Falamos muito sobre o ritmo do movimento e como a comunicação acontece — qual é o arco da história ou o grande momento de crescendo que cria o verdadeiro impacto? Depois, entramos nas questões mais específicas, como curvas de keyframe, taxas de quadros e expressões (trechos de JavaScript) para ajustar todos os detalhes do movimento.

Chad C.

Quando apresentamos nosso trabalho para um grupo maior, usamos muitos efeitos sonoros para vender a ideia em movimento. Já participei de chamadas em que explicamos "Isto vai mover-se da esquerda para a direita", mas ninguém entende até que alguém sonoriza: "Vai fazer, 'Whoop!'"

Anja L.

Onde você acha que estão as maiores oportunidades para integrar melhor o movimento com outros fluxos de trabalho de design?

Chad C.

A ideia de poder estar na tela de trabalho, trabalhando em um design e testando animações, vendo o que funciona e o que não funciona em tempo real, é uma grande mudança. Antes, era preciso alternar diferentes ferramentas e plataformas. Agora, pode ficar tudo na tela de trabalho colaborativa, onde podemos apresentar e desenvolver ideias mais rápido, melhorando a colaboração entre design e animação.

Ben H.

A animação transmite a ideia. Ele explica o que as palavras não conseguem, e as marcas sabem — é por isso que cresce cada vez mais o interesse em bons trabalhos de animação. Ao mesmo tempo, é muito demorado, então as equipes de movimento têm dificuldade para acompanhar o ritmo do design e testar da mesma maneira. Mas trabalhar em um único software para design e animação é muito empolgante. Será interessante ver que portas se abrem.

Gilles D.

O que me anima é que muitas pessoas vão descobrir ou se apaixonar pela animação, pessoas que não se aproximariam dessa área antes. Foi o que aconteceu comigo. Eu não sabia que queria ser designer de movimento, mas brinquei com algumas ferramentas e percebi que era muito mais legal do que trabalhar em um único quadro.

Chad C.

A animação sempre pareceu mágica para as pessoas, em parte porque há menos designers de movimento do que outros designers. Agora, em vez de esperar por um designer de animação, mais pessoas podem contribuir mais cedo e transmitir ideias por essa hierarquia com rapidez.

Anja L.

Como você achar que as coisas vão evoluir com a IA? O que te entusiasma? Alguma coisa te deixa receoso?

Chad C.

No After Effects, para dar movimento muitas vezes era preciso adicionar expressões e scripts para controlar propriedade e construir sistemas, então essencialmente o que você fazia era programar. Quando eu estava começando, a maioria dos animadores não sabia programar, então usávamos uma planilha de expressões que copiávamos e colávamos em projetos. Agora isso mudou, com os prompts de movimento. Você pode esboçar ideias rapidamente, como um movimento lento, rápido ou saltitante, sem deixar de resolver o lado técnico. Quando o produto está definido e tem código de suporte, você pode reutilizá-lo em qualquer lugar. É um avanço imenso.

Ben H.

Muitas gente vai acabar fazendo animações chamativas só por fazer, mas outras vão usar o recurso de forma mais cuidadosa para se comunicar e orientar os usuários. Habilidade, arte, intenção e contenção são os fatores que vão fazer a diferença.

Chad C.

Saber controlar tempo e da intenção será essencial — entender que o tempo é sua nova ferramenta, um novo elemento com o qual você pode criar. Se você só adiciona movimento, sem evocar nem dizer nada, é basicamente a mesma coisa que adicionar um filtro em cima de um design.

Gilles D.

Vai ser muito fácil criar movimentos razoáveis, mas sem entender alguns princípios, será difícil criar um movimentos ótimos. As pessoas fazem isso há muito tempo. Algumas coisas já são usadas há 100 anos, por bons motivos. Com o progresso das tecnologias, será importante manter esses princípios básicos. Eles mantêm a humanidade do trabalho.

This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.