Entre em Contato
contato@uxmotiondesign.com
Voltar

UX Motion não é Apenas Animar uma Interface, é Preciso Entender Seus Conceitos

Algo comum dentro do Design, principalmente na área do Motion, é o das pessoas começarem a executar — já pegar o software e colocar algo pra animar — antes mesmo de entender aquilo que elas estão fazendo. Sou suspeito pra falar pois a mais de 10 anos atrás, quando comecei a me aventurar na animação, a única regra era fuçar o software até descobrir como criar alguma coisa ali que me parecesse “legal”. Não havia nada mais gratificante nisso e eu entendo perfeitamente a sensação de muitos que estão começando, quando começam a inserir os seus primeiros Keyframes com aquela curva de animação bem feita.

Parte desse “salto”, antes de um conhecimento sobre seus princípios, direto para a ferramenta(e muita das vezes até mesmo da prática em si) se dá ao fato de que em nossa área não é mandatório um currículo acadêmico ou coisa do tipo. Isso faz com que muitos entrem por se interessarem no assunto, não necessariamente para se profissionalizarem com a animação. Porém, para aqueles que já começaram a ter o gostinho de ver algo que criou tomando vida, pensar em viver fazendo animação acaba se tornando inevitável.

Diferentes metodologias de ensino

Quando a animação e o Motion Design deixam de ser um hobby, a busca por conhecimento e profissionalização se torna algo que devemos levar a sério. Nessa busca, é possível identificar duas metodologias: a Replicação e o Desenvolvimento do Pensamento Crítico. Explico melhor sobre cada um delas logo abaixo:

Replicação

É a maneira de aprendermos replicando algo. A partir de alguma criação prévia, conseguimos criar algo de maneira idêntica, e nesse processo aprendemos técnicas e ferramentas que nos permitem chegar em um resultado similar.

Quando falamos de desenho, este seria o caso de um desenhista hiper-realista. Ele já possui seu modelo final, e através de muito treino da técnica e das ferramentas necessárias, ele consegue criar algo que se assemelha ao máximo à referência inicial. Seu trabalho se destaca pela “perfeição” do desenho em comparação ao mundo real.

No caso do UX Motion Design, seria a questão de replicarmos movimentos, interações e animações de interface, usando nossa ferramenta (o After Effects) da melhor maneira possível para replicarmos aquele resultado em nosso trabalho.

Desenvolvimento do pensamento crítico

Este está muito ligado à proposta de uma Universidade, que se baseia na transmissão dos conceitos e linhas de pensamentos — independente de que área seja — antes de ser tomada qualquer “ação” — ou iniciar o trabalho em si. Aqui, o pensar tem um peso à ponto de definir o que a ação será feita, antes que coloquemos a mão em qualquer ferramenta. Essa metodologia exige um trabalho de conceitualização — a famosa pré-produção — tão forte quanto a execução em si.

Voltando pra referência do desenho, aqui, ao invés do desenhista hiper-realista, temos o ilustrador — que por suas vezes pode até ser minimalista. Ele usará de muito menos traços, as vezes menos “complexidade” técnica para representar alguma coisa, porém seus trabalhos se destacam por serem criações únicas e por sua aplicação atingir no ponto exato aquilo que busca ser transmitido.

Fazendo agora o paralelo ao UXMD é onde temos o UX Motion Designer que cria aquele detalhe único e exclusivo para um app ou software que acaba por definir como a experiência do usuário é vivenciada. Vide por exemplo as microinterações do Facebook, Uber e até mesmo no Mailchimp que já mencionamos aqui anteriormente.

Não é apenas um movimento “bonitinho”

O Design, de um modo geral, se difere da arte a partir do momento que toda criação possui uma finalidade. Quando trazemos pro Motion (Design), esse fundamento continua por se manter. No UX Motion Design, então, a finalidade e função estão presentes a todo momento.

Ou seja, não é apenas pra fazer algo “bonitinho”, igual vimos em algum lugar, ou como pensamos que possa ser simplesmente “legal”. A grande beleza do Design, principalmente do UXMD está em aplicar as animações de forma criativa, ao mesmo tempo que conectamos o usuário àquela experiência.

Como falamos anteriormente com relação à certas animações de UX Motion Design que vemos por aí — que acabam por ter um cunho somente artístico e não funcional — a aplicação da funcionalidade está embassada nos princípios do UX Motion Design.

Princípios por detrás de elementos que precisam ser aprofundados antes de animar

Existem diversos princípios que precisamos ter em mente em qualquer animação que fazemos dentro do UXMD. Muitos deles já foram falados aqui ao longo de nossos artigos, enquanto outros aprofundamos bastante em nossos cursos. Entretanto, vou reforçar e apresentar 3 deles para que tenhamos desde já uma pequena base de referência para qualquer projeto relacionado ao UX Motion Design que façamos no futuro.

Nem tão rápido nem tão devagar

Possuimos um artigo inteiro focando nesse princípio, e não é a toa que ele é um dos fundamentais em nosso trabalho. O conceito por si só é fácil de entender mas nem sempre de se executar. O que precisamos ficar atento aqui é de fazermos animações que não sejam rápidas demais a ponto do usuário não conseguir identificar o que está rolando de mudança, ou as vezes nem ver a animação. E também, que não sejam devagar demais a ponto de fazer o usuário ficar esperando, ou até mesmo achar que algo travou naquele app.

Feedback

Aplicado em quase tudo que utilizamos mas principalmente presente nos botões, o Feedback nada mais é que a resposta visual ao toque do usuário ou ao processamento de algum informação no background de um app. Uma animação de botão sendo pressionado capaz de trazer uma dimensão fora do 2D de nossas telas, e junto disso, uma resposta ao nosso toque, mostra que aquilo o usuário teve a intenção de interagir, foi de fato ativado.

Até mesmo uma barra de loading possui o princípio do feedback já que se trata de uma maneira de mostrar progresso em algo que está sendo carregado no “fundo” de app.

Continuidade

Elementos semelhantes devem possuir a mesma animação para que se crie uma continuidade e maior imersão em uma interface. Se possuímos alguns botões em nosso app ou site, eles devem se comportar da mesma maneira quando pressionados, a não ser que algum deles exerça uma função além da função básica de um botão. Transições, menus, rolagens, etc, vários elementos dentro de um mesmo “universo”, se comportam da mesma maneira.

A falha de continuidade pode causar uma quebra na experiência, a partir do momento que o usuário se questiona se o que ele está fazendo está “no caminho certo”, já que cada nova tela, nova interação, parece ter vindo de lugares diferentes.

Pensar antes de fazer, e não o contrário

Como em toda área do design, nosso trabalho não é apenas a execução, mas sim o planejamento e estruturação de qualquer projeto, para que ele cumpra os objetivos dele. Animar por animar é dizer que tanto faz para quem estamos criando, o resultando vai ser sempre o mesmo.

A nossa força como criativos está na nossa capacidade de pensar além do padrão. Buscar conhecimento através de um lugar que desenvolva teu pensamento e planejamento é a melhor maneira de crescer profissionalmente.

Está interessado em aprofundar mais no UXMD? Conheça a nossa Formação em UX Motion, o primeiro, maior, e mais completo curso sobre UX Motion Design do Brasil.

Felippe Silveira
Felippe Silveira
Co-Fundador do UX Motion Design, da MOWE Studio (Estados Unidos) e Mestre em Motion Design pela BAU School of Design (Espanha) encarregado de projetos de Motion para clientes como: Google, Adobe, Pepsico, Pfizer, Zeplin, entre outros.