Nem tão rápido, nem tão devagar. Encontrando a velocidade de animação correta para uma interface.

Velocidade de Animação - Original Illustration by Google — Resized by Felippe Silveira

Hoje vamos falar sobre velocidade de animação, principalmente quando falamos em interfaces animadas para vídeos promocionais ou explicativos.

O conceito de “nem tão rápido, nem tão devagar”, é muito presente dentro do UX Motion Design e até mesmo reforçado pelo conteúdo do Material Design da Google.

Por mais que pareça fácil de entender, ele causa grandes dúvidas à muitos Motion Designers quando estão animando para interfaces.

Principalmente quando representam uma interface animada em um vídeo explicativo ou promocional.

Durante a primeira turma do nosso curso de UX Motion Design, eu encontrei alguns alunos demonstrando uma certa dificuldade em absorver o conceito da velocidade de animação.

Isso fez com que eu buscasse e estudasse mais sobre isso, assim pude trazer um conteúdo valioso.

Como tudo que rege o Motion Design, timing e spacing são primordiais.

O tempo de uma animação, sua aceleração e desaceleração são vitais para nossa percepção de que algo ali está “vivo”.

No UX Motion Design, não aplicar isso corretamente pode determina um impacto direto na percepção de performance e experiência.

Muito Devagar = Aplicativo Lento

Um das sensações principais que uma animação mais lenta cria é a ideia de que aquele aplicativo é muito lento.

Ou seja, é um aplicativo pesado, vai aparentar ser uma aplicação que faça ele perder tempo esperando executar alguma interação.

Uma velocidade de animação para interface lenta pode transmitir ainda a ideia de que aquele aplicativo não está muito bem desenvolvido.

Que falta um aprimoramento de código para que ele funcione bem, mas principalmente, isso poderá gerar certo stress no usuário ao fazê-lo esperar tempo demais em qualquer interação, por mais simples que ela seja.

Muito Rápido = Experiência Fraca

Do outro lado da moeda, podemos ter aplicativos com animações rápidas demais.

Essas por sua vez podem chegar ao ponto de serem tão rápidas que parecem ter feito um “corte na cena”.

O impacto de uma velocidade de animação muito rápida pode fazer com que o usuário não identifique uma interação, não visualize o que aconteceu ali para mudar a página de um aplicativo, e ainda fazer com que tudo pareça muito “duro” e “rígido”.

Um corte, ou animação extremamente rápida, torna as transições entre telas e elementos algo imperceptível. Isso faz também com que o usuário identifique  consciente ou inconscientemente uma falta de cuidado e preocupação com os detalhes.

Isso faz com que pareça que aquilo está ainda inacabado, que ainda falta algum detalhe a ser inserido ali.

Chegando na velocidade de animação ideal

Sabemos que a animação tem um impacto direto na experiência do usuário.

Afinal, somos naturalmente atraídos pelo movimento e quando vemos este movimento ocorrendo em um meio virtual, conseguimos trazê-lo para mais próximo de nosso mundo “real”.

A animação muito rápida faz com que não percebamos a interação que ocorre na tela. Enquanto na animação muito devagar, parece que levamos uma eternidade para que um movimento se conclua.

Pense em um usuário navegando por essa tela. Qual a velocidade de resposta necessária em cada momento? Com que velocidade ele clica em um elemento e já parte pro outro?

Tenha isso em mente na hora de animar.

Sei que a preocupação de não fazer nada rápido demais as vezes é grande, porém não existe uma regra fixa com relação à velocidade de cada animação.

Temos apenas que pensar sempre no usuário como utilizador daquela interface que estamos representando, mas também como espectador do nosso vídeo.

Ao mesmo tempo que ele pode ser informativo, ele também precisa cumprir com a representação de um usuário humano em contato com aquela interface. Por conta disso, busque entender o tempo de resposta para cada ação.

Pegue seu telefone, e comece a usar aqueles apps que te remetem a uma boa experiência.

Identifique o tempo que demora cada elemento daquela interface para se movimentar.

Procure replicar isso em seus trabalhos e veja o quanto diferente sua animação se torna.

Somente por meio da observação e análise conseguimos chegar naquilo que consideramos a velocidade e tempo ideal de um movimento.

Prototipagem de Interfaces e Layouts com UX Motion Design

prototipagem de interfaces

Prototipagem de Interfaces: O UX Motion Design possui várias aplicações e utilidades.

Seja na representação de interfaces dentro de um Explainer Video, na produção de microinterações para tocarem dentro de aplicativos, ou até mesmo servindo como um processo de prototipagem em uma empresa de UX.

Como as empresas de UX utilizam o Motion?

Como acabei de mencionar, muitas empresas de UX utilizam-se do Motion Graphics como uma maneira de prototipagem de interfaces e interações.

Durante uma determinada etapa, chega a hora de pensar e desenvolver algumas interações específicas e únicas de uma interface.

Dessa forma após diversos estudos para que se chegue nas definições ideais de interação, é hora de colocá-las em prática.

Nesse momento o Motion se mostra a maneira mais eficiente e ideal para isso.

Porque usar Motion Design como prototipagem de interfaces?

Esse processo do uso da animação na prototipagem de interfaces é bem intuitivo. Economiza grandes horas da produção de um software ou aplicativo.

Se não houvesse o motion, a única alternativa seria desenvolver todo o código do aplicativo para, só depois disso, ser possível analisar se algo ali está funcionando ou não.

Com o Motion atrelado ao UX, as empresas de UX conseguem prototipar interfaces e avaliar se algo funciona ou não.

Portanto de maneira muito mais prática e rápida do que ter que desenvolver todo o código que posteriormente poderá ser descartado.

A importância do pensamento de animação em protótipos

Pode proporcionar uma facilidade e velocidade para testes.

Animação dentro desses processos é capaz de prever qualquer possibilidade de falha.

Até mesmo visualizar novas interações que previamente não foram pensadas.

Junto disso, usando-se de animações para prototipagem de interfaces, UX Motion Designers são capazes de desenvolver interações mais fluidas.

Também serve como base para que desenvolvedores possam inseri-las em meio ao código.

Como sempre, a combinação de Motion + Interfaces se mostra como algo poderosíssimo e extremamente eficiente, seja para uma melhor experiência para o usuário, ou até para um desenvolvimento mais dinâmico de aplicativos.

LottieWeb e o Futuro do Bodymovin

Bodymovin agora é LottieWeb, se você acompanha a gente a um tempo, já deve ter visto falarmos sobre o Bodymovin. Porém, se você acabou de chegar aqui, provavelmente deve estar se perguntando o que significa esse tal do Bodymovin!

De fato, explicar como o Bodymovin funciona e o que ele faz é bem simples. Imagine o dia a dia de qualquer Motion Designer que desenvolve sua animação, finaliza ela e por último precisa exportar — nosso famoso render. Bem, o Bodymovin funciona exatamente nessa última etapa.

O render do After Effects se baseia em exportarmos como vídeo, sequência de imagem, ou simplesmente em áudio.

O Bodymovin entra como uma alternativa para exportamos essa animação em código. Enfim, facilitando(e muito) a vida dos Motion Designer que desenvolvem animações dentro da área do UI/UX.

Que o Bodymovin é um excelente ferramenta, isso já é claro, mas aonde que entra aí o LottieWeb?

O que é o LottieWeb?

LottieWeb, nada mais é que o nosso bom e velho Bodymovin. Não apenas uma mudança de nome, o Lottie Web representa a junção do Bodymovin com a família do Lottie, que aconteceu no fim do ano passado. Este, por sua vez, é uma biblioteca para Android e iOS que utiliza de animações exportadas pelo Bodymovin em formato JSON e renderiza elas nativamente em dispositivos mobile e na web.

O Lottie foi criado pela equipe de UX e Motion Designers do Airbnb e essa junção com o Bodymovin representa o investimento que o time do Lottie vem feito em tornar animações para mobile e web cada vez mais intuitivas e fáceis de se produzir.

O Bodymovin foi criado por uma única pessoa e lançado de forma open source para que outros pudessem também contribuir. Agora faz parte de uma equipe muito maior que vem se dedicando constantemente em trabalhar nesse propósito. Tudo isso mantendo ainda a estrutura open source e a colaboração da comunidade.

Como essa mudança afeta o futuro do UX Motion Design?

A princípio, o Bodymovin ainda possui esse nome como ferramenta e extensão dentro do After Effects. Não sei se num futuro próximo tudo será renomeado, mas por enquanto, seus desenvolvedores continuam mencionando-o como antes. Entretanto, o documento atual do Lottie incorpora o LottieWeb (Bodymovin) e se torna o novo lugar para irmos sobre qualquer coisa relacionada a ele.

Isso é apenas um passo, porém um fator mais do que positivo para o futuro dos UX Motion Designers.

Fora todos os benefícios que o Bodymovin trouxe para estes animadores, agora com a junção dele à família do Lottie, podemos esperar uma conexão cada vez maior e mais intuitiva entre o After Effects e as plataformas mobile e Web.

Fico otimista por essas ferramentas tem a crescer e agregar cada vez mais funções e possibilidades para nós UX Motion Designers.

Estamos sempre de olho nas novidades do LottieWeb (nosso querido Bodymovin) e traremos aqui cada novidade em primeira-mão!

A dificuldade de aprender e se desenvolver no mundo do UX Motion Design

UX Motion Design

UX Motion Design é o tema principal dos nossos artigos — não é a toa que levamos este nome.

Durante todo esse tempo publicando sobre Motion Design, UX, muitos nos perguntaram sobre como iniciar nesta área. Aí que mora o grande desafio. Embora seja uma área que o crescimento duplica a cada dia, iniciar no UX Motion Design pode oferecer diversas barreiras.

A complexidade de se aprender UX Motion Design e UI

O ponto inicial, que dificulta para muitos, é que pela formação de Design tradicional.

Para que você se torne um UX Motion Designer, você precisa de muito tempo e conhecimento.

Tempo para aprender e aperfeiçoar seus conhecimentos de Motion Design.

Tempo para aprender e aperfeiçoar os conhecimentos de UX/UI.

Ou seja, é preciso aprender e desenvolver cada uma dessas áreas individualmente.

Fazer a conexão entre elas quando você já tiver conhecimento o suficiente de ambos os lados.

Outra opção seria ter o foco principal em uma dessas áreas.

E finalmente buscar o conhecimento em paralelo usando a outra área de conhecimento como complemento.

Por exemplo, se você é um Motion Designer, buscar aprender mais sobre UX/UI e ver como você consegue inserir o Motion nesse contexto.

Já se você é um UX Designer, você pode ir atrás de aprender mais sobre Motion Design e ver em que pontos do seu trabalho, inserir animações estariam contribuindo para a experiência.

Do you speak English? As fontes de UX Motion Design também estão fora do Brasil.

Uma barreira muito grande que ainda existe, é a questão da língua. Por mais que Design, Motion, User Experience, etc, sejam termos maneiríssimos em inglês.

Existem muitos designers que não possuem conhecimento em inglês para que ele possa buscar fontes de fora.

Sabemos que a internet tem uma base de conteúdo em inglês que é excelente e muito vasto.

Porém, nem todos consegue ter acesso à esse conteúdo.

Aquilo que você encontra em Português, pode ter 10–100 vezes mais da mesma coisa em Inglês.

Por isso, não basta apenas buscar por estudos, tutoriais e cursos nessas áreas do Motion Design e do UI/UX.

É preciso encontrar algo que esteja em nossa língua e que seja uma referência em conteúdo.

Tutoriais de funcionam? Existem tutoriais focados em UX Motion Design?

Tutoriais são uma excelente maneira de se aprender alguma ferramenta. Se você trabalhar com UX ou UI, existem diversos tutoriais na internet que irão te ensinar sobre After Effects. O mesmo acontece de maneira invertida. Também existem inúmeros tutoriais sobre UX e UI, que podem te ajudar a ter uma noção sobre “o outro lado”.

Qual o grande problema desses tutoriais? Bem, por não existir nada focado em UX Motion Design, você fica dependente de aprender algumas técnicas e ferramentas.

Tendo que descobrir por si só aquilo que pode ser útil ou não para o que você deseja fazer.

Em alguns momentos, pode ser difícil você conseguir visualizar em algum tutorial, como que aquilo pode se relacionar à algo que você quer botar em prática.

Por exemplo, muitos tutoriais vão te ensinar o básico de animação movendo um quadrado de um ponto ao outro.

Por mais que para animação isso seja uma representação básica, é muito difícil conseguir conectar isso à interfaces para quem ainda não tem esse olhar definido para o Motion Design.

Esse conteúdo em tutorial que combina o melhor dos dois mundos (UX e Motion Design) de forma a tornar o aprendizado nessa área algo mais fluido e intuitivo é muito escasso e por vezes até inexistente.

Isso faz com que você perca inúmeras horas, dias, e meses até conseguir juntar todo um material relevante que conseguirá te ensinar aquilo que você busca.

Como sair na frente no mercado de UX Motion Design

Pessoalmente, forma como aprendemos e nos desenvolvermos nesta área foi através de muitos anos de trabalho com muita tentativa e erro atuando diretamente no mercado. Principalmente na parte do UX Motion Design voltada para Vídeos Explicativos, foi aonde nos desenvolvemos a cada novo projeto e fomos buscando soluções a cada barreira encontrada.

Por mais que isso seja uma maneira muito eficiente de compreender todas as dificuldades existentes, e desenvolver soluções na prática que vão unir essas duas áreas do conhecimento em um único lugar, isso demanda muito tempo. São muitos anos de prática de mercado, e muitos anos vivenciando isso todos os dias para possuir um conhecimento digno de entrar e se destacar nesse nicho do Motion Design.

Foi pensando nisso que surgiu o projeto UX Motion Design. Não apenas transmitir nosso conhecimento na área, como estamos fazendo já à alguns meses.

Nós queremos ensinar tudo que você precisa para começar a trabalhar com UX Motion Design.

Por isso, o projeto do UX Motion Design se tornou um curso. O curso que nós mesmos gostaríamos de ter feito quando estávamos iniciando nossa carreira. Neste curso, juntamos nossas experiências e práticas de mercado para  ensinar aquilo que é necessário para já sair trabalhando.

Como funciona o Curso de UX Motion Design

O UX Motion Design é um curso voltado tanto para o Motion Designer que quer atuar nesta área, quanto para o UX/UI Designer que quer usar a animação como um novo nível de experiência e engajamento. Assim este não é simplesmente um curso de animação como existem outros por aí. Aqui, nós vamos te ensinar sobre o essencial do UX Motion Design, combinando o conhecimento dessas duas áreas.

Ao longo das aulas, não iremos ensinar simplesmente a animação, mas falaremos sobre os conceitos por trás de cada movimento e as possibilidades e aplicações deles em meio à uma interface.

Como sabemos que simplesmente acompanhar vídeos e mais vídeos de aulas não é a maneira mais produtiva de se aprender, nós fizemos do UX Motion Design uma verdadeira imersão nesta área. O curso tem uma duração de 6 semanas.

Durante esse tempo teremos lives exclusivas para debatermos assunto de UX, Motion e tirar as dúvidas que forem surgindo.

Fora isso, toda comunicação estará sendo feita através de uma comunidade exclusiva no Slack, que ficará ativa por tempo indeterminado.

Servindo como base de conhecimento da área, além de um excelente local para oportunidades de trabalho.

Somos os pioneiros no Brasil a realizar um trabalho nessa área de conhecimento.

Portanto, queremos junto à você criar uma comunidade forte e amadurecer ainda mais este mercado! Vejo você no UX Motion Design.

UX Motion Design e o Universo das Startups

Universo das Startups

O Universo das Startups – principalmente das de tecnologia – é algo surreal.

Este é um mundo recheado de ideias incríveis, de soluções que chegam para melhorar o mundo

Até mesmo de mudanças de paradigmas que podem ditar como a sociedade se comportará pelos próximos anos.

Nos Estados Unidos, o número de Startups que existem é gigantesco. No Brasil e ao redor do Mundo, isto não é muito diferente. Todos querem ser o “novo” Instagram, Airbnb, Uber, Facebook, etc.

O “desafio” das startups

Para que essas startups dêem certo, elas precisam muito mais do que boas ideias. Elas precisam criar um produto que faça com que seu público se identifique. Porém, acima de tudo, para que tudo isso funciona, elas precisam de dinheiro.

Startups passam por inúmeros processos de funding é aonde elas apresentam suas ideias para atrair investidores.

Entretanto, por mais que muitas ideias sejam brilhante, não são todas que consegue sobreviver e seguir em frente.

Isto acontece muito porque várias Startups falham no momento decisivo do pitching(apresentação da ideia). Os principais motivos são o fato da mensagem não ser clara o suficiente. Por isso os investidores não conseguem visualizar o que está sendo construído ou vê a falta de algo mais concreto.

Como o UX Motion Design pode ajudá-las

Para ajudar a combater essa objeções e fazer com que Startups(principalmente de tecnologia) consigam seguir em frente. O UX Motion Designer possui um papel fundamental.

Como Motion Designers, nossas habilidades e conhecimentos são capazes de dar vidas às brilhantes ideias que as Startups possuem. As Startups tecnológicas, estão muito ligadas à parte de softwares e aplicativos.

Nessa parte de funding   ou até mesmo no lançamento aberto em busca de atingir e atrair seu público. O Motion entra como protagonista na comunicação da mensagem destas empresas. Existem dois tipos de vídeos que se encaixam perfeitamente neste cenário e que são os mais procurados pelas Startups: os Explainer Videos(Vídeos Explicativos) e os vídeos How it Works(Como funciona).

Os Explainer Vídeos atuam na função de não somente mostrar o app ou software, mas também de transmitir uma mensagem atrativa e que se relacione mais com investidores ou com o público em geral. Já os vídeos How it Works, servem como uma espécie de protótipo, apresentando o funcionamento mais detalhado de uma interface, suas funções e possibilidades.

A importância de um protótipo

O protótipo serve como um contato mais físico e real de algo que ainda é conceitual — como ocorre em todas as Startups nas fases mais iniciais de desenvolvimento. Ao apresentar um protótipo, essas Startups conseguem transmitir uma ideia e representar uma experiência de forma mais engajada e paupável.

Consumidores conseguem visualizar ali a experiência que eles podem ter ao usar aquele software ou aplicativo. Do mesmo modo, investidores são capazes de analisar mais fielmente o total potencial que aquele app possui.

O UX Motion Designer consegue criar a melhor experiência de apresentação ou prototipação possível de um app e software. Seu valor está diretamente relacionado à capacidade de uma Startup seguir em frente. Sendo por adquirir investimentos, e até de se manter no mercado construindo uma relação mais próxima com seu consumidor.

O pensamento sobre as evoluções que um app pode ter

Um detalhe muito importante quando falamos de Startups, é que suas ideias e apps estão sempre em mudança e evolução. Um bom UX Motion Designer, identifica isso em seus clientes e obtem soluções criativas que prevêem tal evolução.

Algo que utilizo constantemente e que sempre fez muito sucesso entre nossos clientes.

É o fato de nunca usarmos uma versão literal da atual interface que nossos clientes possuem.

Como a evolução de interfaces e aplicativos é algo natural, sempre buscarmos modificar o app atual para uma versão mais simples e minimalista de sua interface.

Com isso, nosso foco se direciona muito mais para a experiência que a pessoa terá navegando por aquela interface, ao invés de mostrar alguns detalhes de design, tipografia, copywriting, ou qualquer outro aspecto visual.

Quando fazemos isso, nós garantimos que aquela animação produzida tenha um vida útil muito maior, levando mais tempo até que ela se torne de certa forma “obsoleta”.

Para o cliente, isto garante que o investimento feito em uma animação não irá se perder simplesmente porque um novo design de interface foi desenvolvido.

Focando mais na experiência, na usabilidade, ao invés do conteúdo visual em si, criamos um vídeo muito mais interessante e atrativo de se assistir do ponto do consumidor/investidor.

O segredo por trás do sucesso de uma animação, seja para aplicativos, interfaces, ou qualquer outro seguimento, é sempre entender os objetivos de seu cliente, e buscar soluções efetivas.

No universo das Startups, o Motion Design é algo poderosíssimo. Se conseguirmos aumentar o seu potencial e alcance para muito além do momento e escopo atual, somos capazes de garantir o sucesso e tornar realidade o lançamento para o mercado de muitas dessas empresas.

A Importância do “Toque” e “Gestos” nas Animações de UX

animação de toque e gestos

Sempre que vamos representar alguma interface e interação através de animação, nós precisamos ficar atentos a diversos detalhes. O mais importante deles é entender que não importa para que finalidade aquela interface tenha sido criada, sempre haverá um ser humano a utilizando.

Quando animamos interfaces presentes em dispositivos sensíveis a toque — como no caso de Smartphones e Tablets — o toque e os gestos que uma pessoa faz são essenciais para que essa navegação ocorra. Por isso precisamos analisar e entender melhor como nós mesmos utilizamos essas interfaces e que tipo de toques e gestos estão presentes em nosso dia a dia.

Diferentes direções para representar o toque em uma animação

Podemos representar o “toque” de diversas maneiras em uma animação. Em alguns casos, como acontece em diversos Explainer Videos, temos o Motion Designer utilizando-se de um personagem, fazendo literalmente uma mão animada tocando e arrastando os dedos por uma tela.

Porém, quando a ênfase de nossa animação está em apresentar a interface e as múltiplas interações e reações que ocorrem a partir da utilização do usuário, utilizar uma mão literal pode desvirtuar a atenção do espectador, além de atrapalhar a visualização de toda a interface. Quando precisamos representar o toque, sem que haja “distrações” ou a obstrução da interface apresentada, nós utilizamos pequenas interações gráficas que se baseiam no contato e ações dos dedos com uma tela.

Entendendo como funcionam toques e gestos em uma tela

Uma maneira de se pensar sobre como esse toque funciona, é tentar imaginar como se estivéssemos por dentro da tela do aparelho, olhando através de um vidro, e vendo o toque sendo feito. Se pararmos para observar essa situação (que você pode replicar facilmente em uma janela na sua casa), ao pressionarmos uma tela, nosso dedo fica de certa forma mais achatado, formando praticamente um círculo. Quanto mais forte o pressionarmos, maior se torna este círculo.

Se arrastamos o dedo por esse vidro, ou tela, ele irá fazer um pequeno rastro e se tornar mais “fino” até o ponto em que ele some(quando levantamos ele da tela). Brincar de analisar essas situações é uma experiência incrível e ajuda a reforçar algo que sempre digo sobre observar o mundo ao nosso redor e como nós interagimos com ele.

Representando o toque de maneira gráfica

Entendendo esse princípio e a associação do toque de nossos dedos com uma tela, é possível trabalharmos infinitas representações para essas interações. Uma das maneiras mais básicas e efetivas, é utilizarmos o elemento gráfico que identificamos ao pressionar um vidro — o círculo.

Seja este círculo dando um Scale, mudando de opacidade, ou qualquer outro tipo de interação, a presença do círculo para representar uma simples interação de toque é mega efetiva. Você pode conferir nesses dois exemplos abaixo como o simples fato de adicionar estes círculos animados para representar o toque já nos transmite uma ideia muito mais completa do que está ocasionando a ação que aqueles menus estão fazendo.

animação de toque e gestos
Dropdown Menu — Design e Animação por Felippe Silveira
animação de toque e gestos
Fold/Unfold Menu — Animação por Felippe Silveira

Além do simples toque

Igual mencionamos no simples toque, o fato de pressionarmos e arrastarmos algo, ou de usarmos mais de um dedo para interagir com alguma interface, pode ser também representado por este mesmo círculo. Porém, ao invés de simplesmente aparecer e já sair de cena, nestes casos, o círculo se mantém mais presente, durante todo o momento que seria o dedo em contato com a tela. A diferença de pressão aplicada pode ser representada desde um ajuste no tamanho do círculo, uma mudança de cor, ou até mesmo de opacidade.

animação de toque e gestos
Zooming and Panning UX Interaction — Animação por Felippe Silveira

No exemplo ao lado, eu mostro como representaríamos a navegação e interação de uma pessoa com uma foto em um Smartphone. Mesmo que não haja interface visual definida, é possível absorver as ações necessárias e possibilidades ao navegar por esta foto em um celular, simplesmente pelas interações de toque.

Estes exemplos servem para dar uma ideia das possibilidades que temos de representar um toque humano sem que para fazer isso a gente precise ser literal e inserir uma mão em nossas composições. Os exemplos mostrados se utilizam de um círculo para mostrar o toque, bem de acordo com a experiência que fizemos do dedo no vidro. Entretanto, ele pode ser representado de infinitas maneiras. Basta explorar estas possibilidades e descobrir por si só, como tornar esse detalhe da navegação mais presente e intuitivo, para que o espectador consiga entender ali que aquele movimento representa os dedos dele tocando e interagindo com o que ele está vendo.

Por último deixarei um projeto meu que possui diferentes tipo de interações em uma interface, e como o simples fato de adicionar uma animação de toque, faz com que o entendimento de cada ação ali presente seja mais clara.

 

Olhe ao seu redor, pegue seu celular, comece a usá-lo, observe que tipos de gestos e toques você faz. Analise como você interage, e também a velocidade com que essas interações acontecem.

Replique tudo isso em suas animações e perceba o quanto mais natural e humano sua interfaces animadas irão parecer.

 

Bodymovin, Lottie, e as Possibilidades do Motion Além do Formato de Vídeo

O mundo do UX Motion Design te possibilita trabalhar em diferentes formatos. Se você for trabalhar mais diretamente com Explainer Video(vídeo explicativo) ou vídeos How it Works(como funciona), o arquivo final será o clássico .mov ou .mp4 em que estamos acostumados a trabalhar.

A coisa complica quando pensamos em exportar nossas animações para outros formatos, como a web, softwares, e apps. Como já falamos anteriormente, até pouco tempo atrás, para um Motion Designer criar animações para esses meios, ele dependia de um programador, ou dele mesmo saber programar. Mais recentemente, com o desenvolvimento e evolução constante do Bodymovin e do Lottie, o Motion Designer consegue criar animações para Apps e para a Web de forma muito mais intuitiva.

O que é o Bodymovin?

Você já deve ter lido várias vezes comentarmos sobre o Bodymovin e até agora ainda não entendeu direito o que ele é, né? A realidade é que o Bodymovin é bem simples. Ele é uma extensão pro After Effects que cria diversas opções novas de render, voltadas para a parte de web e apps, que os renders nativos do After Effects não possibilitam.

Uma maneira fácil de entender o que ele faz, seria pensar sobre o render comum que costumamos fazer, aonde configuramos as especificações, e podemos ali gerar diferentes arquivos como sequência PNG, vídeo .MOV, .MP4, entre outros. O Bodymovin exerce essa mesma função, só que ao invés dos formatos de vídeo e imagem, ele vai gerar para nós, arquivos em código.

Como ele expande as possibilidades de animação?

Por mais que ele parece algo bem simples (e na realidade ele é), o Bodymovin cria um novo universo de possibilidade para Motion Designers e desenvolvedores. Ao invés de termos o programador precisando aprender animação, ou o motion designer precisando aprender programação, agora, os dois conseguem trabalhar lado a lado de forma flúida, usando o potencial máximo do conhecimento de cada um.

Não é atoa que as animações para web e apps no geral sempre foram muito duras e rígidas, pois faltava ali um conhecimento que só quem se dedica ao Motion Design era capaz de ter. Agora, com a possibilidade de exportar as animações em código, o Motion Designer consegue focar naquilo que ele faz de melhor. As animações são mais fluidas e complexas, e os programadores conseguem incorporar isso no código sem maiores dificuldades.

O que é o Lottie

O Lottie, desenvolvido pela equipe de Motion Design do Airbnb, transporta aquilo que o Bodymovin consegue exportar em código, para o mundo mobile(de dispositivos móveis). O Lottie funciona como essa ponte que conecta os sistemas Android e iOS com o After Effects e aquilo que ele exporta através do Bodymovin.

A grande vantagem do Lottie associado ao Bodymovin, é que uma mesma animação exportada, funciona nas diferentes plataformas, sem que precise saber converter algum arquivo ou reprogramá-lo para que ele funcione exatamente igual no Android e no iOS.

O que teremos para o futuro?

Como eu falei, essas ferramentas trouxeram novas possibilidades para os Motion Designers, mas principalmente elas são forte aliadas à experiência que os usuários de apps e plataformas web começarão a ter a partir disso. Conforme formos tendo cada vez mais Motion Designers focados nessa área, começaremos a ver uma revolução nos aplicativos e plataformas que usamos todos os dias.

O Motion Design já esta, e estará cada vez mais presente em nossas vidas.

Atualmente, tanto o Bodymovin quanto o Lottie possuem limitações, o que é normal quando pensamos na relação da experiência do usuário. Afinal, para que as animações funcionem bem em uma interface, elas precisam acima de tudo ter uma boa performance. De nada adianta criarmos uma animação se ela for deixar um aplicativo pesado ou se ela não tocar no framerate em que ela foi planejada.

Conforme a tecnologia e essas ferramentas evoluem, vamos ver uma possibilidade cada vez maior do que podemos criar em termos de animação. Com isso, a interação entre o After Effects e estas novas plataformas, será muito mais natural. Nos resta ficar de olho, absorver essas novas possibilidades e crescer conforme esta tecnologia também cresce.

O Bodymovin e o Lottie são grandes aliados do UX Motion Designer, e não existe época melhor do que a em que estamos vivendo para se focar nesse nicho.

Como Aplicar o Pensamento de Motion Design Dentro do UX

Quando falamos de UX Motion Design, estamos relacionando duas grande áreas do design, o Motion, e o UX — a experiência do usuário. Cada uma dessas áreas do design possui inúmeros conceitos e princípios que são únicos entre eles. Quando juntamos o Motion e o UX, o que fazemos é utilizar dos princípios e aplicações do Motion Design para aprimorarmos a experiência do usuário.

Criar animações para interfaces é diferente de criar animações para outros meios. Neste artigo, vamos falar mais a fundo sobre como aplicar o pensamento do Motion dentro do UX, e o que você precisa ter em mente quando estiver animando para estas plataformas.

Animar Interface = Animar elementos e gráficos

Sempre que recebo alguma interface para ser animada, a primeira coisa que faço é visualizar cada elemento daquela interface como um elemento gráfico isolado. Isto significa não pensar na interface como um todo, mas identificar os detalhes que ela possui e trabalhar em cima disso.

Quando identificamos que, por exemplo, uma imagem de perfil pode ser representada por um círculo ou um quadrado, conseguimos atribuir animações de elementos já conhecidos à esta nova proposta. Isto serve principalmente para o Motion Designer que se sente perdido em meio à uma interface cheia de elementos.

Observar o mundo real

Outro ponto importante — não só em animação para UX — é observar o “mundo real”. Isso é algo que eu menciono sempre que converso com outros Motion Designers que estão preocupados em aprimorar suas animações. A forma como as coisas se movimentam e funcionam no mundo físico estão inteiramente ligados com aquilo que vamos representar de forma digital.

No caso de interfaces, isto não é diferente. O botão, o switch, o slider, e vários outros elementos destas interfaces, possuem referências com o mundo físico. Se você quer entender como animar um botão corretamente, simplesmente pegue seu controle remoto e pressione algum botão (sei que controle remoto pode ser algo muito confuso pra muita gente, mas relaxe, qualquer botão que você apertar já será o suficiente ???? ). O mesmo se aplica a diversos outros elementos.

Muita das vezes essas referências pode ser até mesmo digitais. Em muitos projectos de UX Motion Design, recebemos interfaces de páginas Desktop (versão de computador) para serem animadas. Quando isso acontece, é quase certo que precisaremos usar um cursor de mouse pra mostrar a interatividade. Qual seria então a melhor maneira de entender como podemos animar isto? Exato! Pegar um mouse, um computador e mover o cursos pela tela.

Nunca deixa de prestar atenção naquilo que te rodeia. Seja no mundo físico ou no mundo digital, referências estão por toda parte.

Aplicar princípios porém sem exageros

Para quem já estudou mais a fundo os princípios básicos de animação, deve estar familiarizado com questão como exagero, overshoot, stretch & squash, e muitos outros termos. Todos esses princípios podem funcionar dentro do UX Motion Design, porém existe uma linha muito fina entre o que é exagero e o que é funcional.

Quando estamos replicando alguma interface de forma animada, estamos representando ali uma experiência que as pessoas terão ao usar aquele app. Se exageramos muito nos movimentos, podemos criar transições, por exemplo, que sejam demoradas, e isso vai dar a ideia de que aquele aplicativo ou software é lento, e isso pode afastar ao invés de atrair as pessoas.

Os princípios de animação servem para guiar nosso trabalho como Motion Designers. Entretanto, devemos sempre saber adaptar àquilo que estamos produzindo.

Não adicionar movimento apenas por adicionar, pensar no que ele representa

Por último, algo muito importante de se ter em mente é de não apenas adicionar qualquer tipo de movimento. Uma animação não precisa ter inúmeras coisas acontecendo para que ela funcione. Dentro da área do User Experience, o Motion Design exerce uma função muito essencial. Ele serve como um feedback da ação do usuário e também ajuda a aprimorar a experiência como um todo daquele aplicativo.

Quando animamos por exemplo um botão, temos que pensar no que acontecerá quando uma pessoa aperta ele. Neste exemplo, muita das vezes quando se aperta um botão ele “afunda” para representar o toque acontecendo. Esse “afundar” pode acontecer de diversas maneiras: podemos alterar as suas sombras para mudar a sensação de profundidade, podemos reduzir a sua escala, entre vários outros métodos.

Qualquer animação que pensamos para determinada função, tem que corresponder com o que ela representa. Falando de outra maneira, não é preciso “enfeitar” algo para que ele se torne bom.

Muita das vezes as animações mais simples são as melhores para adquirirmos um bom resultado.

 

Animação Feita por Programadores vs Animação Feita por Motion Designers

 

Fazer animações para TV, Internet, Cinema, ou qualquer plataforma em formato de vídeo é algo muito comum para todos os Motion Designers. Abrimos o After Effects, colocamos nossos Keyframes, ajustamos o Graph Editor, mandamos fazer o render e… voilá! Está pronta e exportada a animação para estas mídias.

Porém, existe uma outra galera que por muito tempo também animou, em um processo que não é nem um pouco simples, e sim, muito desafiador. Estou falando dos programadores e o trabalho deles de animar para a Web e aplicativos.

O desafio de se animar pra web e apps em código

Quando falamos de web, aplicativos, celulares, etc, o processo de animação não é tão simples assim. Enquanto a interface do After Effects pode parecer algo de outro mundo para quem abre o software pela primeira vez, não demora muito tempo para que você se habitue e veja que o After pode ser bastante “amigável”.

A forma como o After Effects funciona acaba se tornando bem intuitiva para os Motion Designers. Sabemos exatamente o resultado que vamos alcançar ao clicar nos botões corretos e temos ali em nossa frente já um feedback visual imediato do que estamos fazendo. Porém, com as opções de exportação limitadas à formatos de vídeo e sequência de imagens, isso se torna inviável para plataformas web e de aplicativos.

Isto acontece porque todas estas plataformas trabalham muito com a questão da velocidade e desempenho de suas interfaces. É necessário que tudo ali apareça para o usuário de forma rápida e prazerosa.

Se precisássemos carregar um vídeo toda vez que entrássemos em uma página da Web, nossa experiência seria péssima e provavelmente evitaríamos usar muitas destas páginas.

É aí que entra a animação feita em programação. Diferente do After Effects, ao invés de termos o Motion Designer atuando e desenvolvendo aquilo que eles mais tem conhecimento, agora temos o programador criando (ou tentando replicar alguma animação) usando apenas código.

Os Diferentes mundos de programação e Animação

Animação e programação são dois mundos distintos, principalmente se teu foco é o design. A linguagem de programação é como aprender uma nova língua, e a resposta àquilo que você está fazendo, nem sempre é de imediato — é necessário “finalizar” todo o código para se ver a animação acontecendo.

O grande problema aí, é que para o Motion Designer, ter que aprender a programar para criar animações para aplicativos ou web, é uma tarefa muito árdua. Muitas horas, muitas semanas e muitos meses dedicando-se a entender como a programação funciona e principalmente como replicar a animação dentro do código.

Para o programador, replicar ou criar uma animação de qualidade, depende muito da presença de um Motion Designer para ajudá-lo a definir timings corretos e todas as acelerações e desacelerações necessárias. Em grandes empresas, essas duas equipes trabalham em conjunto e possibilitam que isso aconteça. Entretanto, em empresas menores e até mesmo para estúdios e freelancers Motion Designers, conseguir um programador que entenda de animação para que se possa dar a direção correta, era basicamente impossível, além de gerar um custo maior de produção.

A dificuldade de se ver boas animações na Web

Como muitas das vezes os programadores eram os responsáveis pelas animações, sem o suporte de um Motion Designer como grandes empresas costumam ter, todo o conhecimento sobre animação tinha que partir dele mesmo. Animadores e Motion Designers sabem que esta área é uma daquelas em que podemos passar toda nossa vida aprimorando nossa técnica, e ela nunca será perfeita. Como na programação, animação é um mundo por si só e é necessário bastante dedicação e conhecimento para que comecemos a criar animações boas.

Desse modo, os programadores necessitavam ter um conhecimento em uma área que não era o foco deles e com isso as animações normalmente costumam ser bem fracas.

Cheguei a ver em alguns sites até mesmo uma base dos princípios de animação, como o uso de overshoots por exemplo, porém muito mal aplicados por faltar conhecimento.

Não vejo esse ponto como uma falha dos programadores. Reconheço que esta não é a principal área deles e que eles não precisam ter todo o conhecimento que os Motion Designers tem. Porém, sempre me intrigou como os Motion Designers conseguiriam atuar nesta parte de forma que fosse mais intuitiva com o dia-a-dia deles.

Novas possibilidades para a animação na Web

Nos últimos anos, vimos uma demanda cada vez maior de ferramentas que auxiliassem Motion Designers a produzir para estas mídias. Recentemente chegou no mercado um script Open Source, que possibilitou que isso acontecesse de forma mais intuitiva — o Bodymovin. Outros scripts, plugins e softwares também existem/existiram, mas o Bodymovin tem recebido bastante destaque, principalmente por ser Open Source.

Com ele, é possível renderizar direto do After para código, o que torna a vida tanto do programador como do Motion Designer muito mais fácil quando se quer exportar uma animação para a web. Junto do Bodymovin, uma equipe de Motion do Airbnb desenvolveu o Lottie que utiliza do Bodymovin para exportar animações para celular.

Estas duas ferramentas estão sendo muito bem aceita pela comunidade de Motion que produz animação para UI e UX, além de atraírem bastante os olhares de desenvolvedores para que elas se aprimorem cada vez mais. Acredito que em pouco tempo, teremos esse processo de animação para web cada vez mais sútil e fácil, da mesma maneira como produzimos animações para o formato de vídeo.

Parte do futuro da animação está nas interfaces, e é buscando todo esse conhecimento por agora que vamos conseguir nos preparar e ser mais capacitados para as necessidades do futuro.

Identificando um Nicho e se Tornando um Especialista dentro do Motion Design

O Universo do Motion Design é imenso. Você pode trabalhar em 2D, 3D, frame a frame, com personagem, interfaces, tipografia, para TV, Cinema, Internet… Enfim, chega a beirar o infinito. Para muitos que estão começando (e até para aqueles que já estão á um tempo na área) definir um foco ou um nicho de trabalho parece ser um tarefa quase impossível.

Muitos de nós temos a famosa “síndrome de Super-Homem” que faz com que a gente acredite que somos capaz de fazer tudo — e fazer isso bem. Porém, estamos muito enganados se pensamos assim. Como em toda área profissional — até mesmo fora do design — se você quer ter destaque e trabalhar melhor e com melhores clientes, a solução é encontrar seu nicho de trabalho e focar nisso.

Porque tentar atingir “todo mundo” é uma péssima decisão e desvaloriza o seu trabalho

O grande problema em tentar atingir “todo mundo” é que isso desvaloriza seu trabalho. Por mais que não pareça tão óbvio assim, o famoso “faz tudo” não é visto como nenhum título de nobreza, mas como uma forma de buscar um trabalho normalmente mais rápido e mais barato do que os especialistas.

Quando as pessoas buscam um profissional mais generalista, eles estão muita das vezes vendo isto como um commodity ao invés de um investimento. Ou seja, elas vão naquele que sabe um pouco de tudo pois ele vai conseguir resolver algo rápido e essa pessoa não vai gastar muito. Quando algo se torna um commodity isso significa uma despesa, e como com todas as despesas que possuímos, queremos sempre reduzir gastos. Porém, quando investimos, o pensamento é o contrário. A ideia é que quanto mais dinheiro você investe em algo, maior será seu retorno com isso.

Como definir um nicho afeta como os clientes te vêem

O que define muitos Motion Designer e profissionais de sucesso em seu meio, é o quanto eles são vistos como especialistas naquilo que fazem.

Ser visto como especialista te trás um outro status, te põe numa posição de maior destaque e ao mesmo tempo valoriza seu trabalho.

Isso não é apenas algo conceitual, é comprovado na prática. Basta pensar numa situação aonde um cliente esteja querendo contratar, por exemplo, um Motion Designer para fazer um Explainer Video para ele. Digamos que ele se depara em meio à dois profissionais:

  • Um deles é um Motion Designer que faz tudo e apresenta isso tudo no seu portfolio (tipografia cinética, animação de logo, comercial de TV, Explainer Video, animação de interface, animação de personagem, intro pra canal do Youtube, etc).
  • O outro é especializado apenas em Explainer Video e seu portfolio apresenta trabalhos voltados exatamente para essa área.

A princípio podemos pensar que aquele que tem uma variedade de projetos tem um conhecimento melhor. Porém o bom cliente busca aquele que entenda do que ele está precisando. Se aquele profissional só trabalha com Explainer Video, é evidente que ele terá um conhecimento muito maior do que aquele que faz de tudo um pouco. (Por mais que possa ser o contrário, pelo o fato de um se apresentar como especialista naquilo, entende-se que o conhecimento dele é maior.) Para o cliente que quer investir em sua empresa, ele vai buscar a solução de menor risco — o especialista.

Ainda é possível irmos mais além. O profissional de Explainer Video podia por exemplo ter um foco na área de contabilidade por exemplo. Com isso, qualquer empresa da área que estivesse procurando por um serviço de Explainer Video, estaria mais do que disposta a pagar algumas vezes mais por este profissional que entende exatamente do que eles fazem.

Como identificar seu Nicho

Por mais compreensível que seja o entendimento da importância de se ter um nicho de trabalho se você quer crescer e se destacar, isso pode ser uma das tarefas mais difíceis que existe. A definição de um nicho é um misto de gosto, experiência, e mercado.

Primeiro de tudo você precisa se conhecer e entender o que dentro da área do Motion Design te agrada e o que você tem paixão por fazer — este é um bom começo. Sei que isso vai fazer com você ainda tenha um leque enorme de opções. Aliás, se estamos nesta área é porque nós realmente gostamos do que fazemos.

Além de encontrar algo que você goste, é preciso avaliar a sua experiência naquilo. Eu posso gostar muito de Animação de Logo e também de Animação de Personagem, porém se eu nunca animei um personagem e já possuo anos de experiência desenvolvendo logos animadas, além de outros projetos, vale muito mais a pena focar de início naquilo que sou mais experiente.

Por último, o mercado também diz muita coisa. Não adianta ter o gosto e a experiência de algo, se o mercado te diz o contrário. Tente observar o que tem crescido bastante, para onde que a tecnologia está se movendo, e principalmente, o que os clientes estão solicitando mais frequentemente.

A combinação dos três te dá um nicho bem poderoso onde você pode focar seus conhecimentos, o que você divulga em seu trabalho e também o tipo de clientes com os quais você trabalha.

Focar em algo não significa abandonar todo resto

O maior medo de quem pensa na questão do foco, é que isso vai fazer com que ele tenha que abandonar várias outras coisas que ele também gosta de fazer. Porém, isto não é verdade. O Nicho serve para definir aquilo do qual você fala, divulga e como você se apresenta. Nada impede de buscar outras áreas e experimentar outros nichos quando você já possui um.

O segredo está naquilo que você divulga.

Por mais que você possa não querer, as pessoas irão te rotular. Aquilo que você divulga em seu trabalho e rede social é aquilo pelo qual as pessoas vão ter conhecimento sobre você. Se você só divulga meme na internet, você será conhecido como “o cara do meme”, isso é inevitável. O mesmo acontece com o seu trabalho. Por mais que você possa estar fazendo inúmeras coisas, defina um foco e faça com que o trabalho que você divulga, se relacione com esse foco.

Ninguém melhor do que você para definir sobre o que as pessoas irão comentar a respeito de você.

A oportunidade do UX Motion Design como nicho

Algo que tem crescido muito ultimamente é a área do UX Motion Designer. Muitas empresas de tecnologia tem montado equipes internas de Motion só pra trabalhar em suas interfaces. Novas ferramentas possibilitaram Motion Designers a exportarem seus trabalhos diretamente para a Web e Apps. O aumento diário na quantidade de aplicativos e novas interfaces, acabou criando um novo território de trabalho para os animadores.

O UX Motion Design é relativamente novo, porém é um nicho que vejo muito futuro, principalmente com o avanço da tecnologia. Em poucos anos, veremos um aumento maior de empresas buscando Motion Designer especializados nesta Experiência do Usuário. A melhor maneira de estar à frente nesse meio, é começar desde já a abrir os olhos para as possibilidades de se focar nessa área e de desenvolver um repertório de trabalhos envolvendo UX e Motion.

Observe o seu redor. Observe como as pessoas se comportam. Identifique onde o Motion Design atua e onde ele pode atuar. Busca por essas oportunidades e se torne um especialista naquela área. Está uma das melhores maneiras de se crescer profissionalmente.