Sabe aquela animação que tem por trás
da tela do seu aplicativo
ou aquela transição entre uma tela e outra?
Nós estamos falando aqui do Motion Design.
O assunto desse podcast vai mostrar para você
quais são as principais técnicas, ferramentas,
frameworks, estratégias,
e, é claro, o papel do desenvolvedor
e da Inteligência Artificial em tudo isso.
Eu sou Gustavo Torrente, e hoje estou aqui
com grandes especialistas em motion.
Estamos aqui com Eder Bronson, César Molina,
que hoje vão falar tudo sobre o que você precisa saber
sobre esse tal de Motion Design.
Tudo bom, César?
Tudo bom.
Muito obrigado pelo convite.
Meu nome é César,
eu trabalho na área de comunicação e educação
já faz quase dez anos.
Na verdade, educação, faz algo em torno de oito anos,
e na parte de comunicação, uns 20.
Faz tempo.
No momento, eu estou trabalhando mais também como designer instrucional,
utilizando motion e outros recursos audiovisuais.
Muito bom.
Eder, seja muito bem-vindo.
Obrigado.
Como ele já disse, meu nome é Eder,
sou professor de Design Digital da FIAP,
dou aula de UX Motion,
dou aula também de Design Gráfico.
Tenho uma trajetória aí de mais ou menos
15 anos em design.
Venho do jornalismo,
fiz uma transição de carreira onde eu fui para a tecnologia,
mas, na tecnologia, eu resgatei o meu lado designer,
e agora eu estou oferecendo um pouco do meu conhecimento
para os meus queridos alunos na FIAP,
e estou muito feliz com isso.
Que incrível, gente!
Vamos começar aqui a nossa conversa colocando os pingos nos is.
Então, César, o que é, na sua visão,
esse tal de Motion Design,
e como ele ajuda na experiência do usuário,
principalmente aqueles que vão navegar por aplicativos?
Bom, na verdade, isso aí nasceu
há muito tempo atrás com o cinema.
Ele foi pensado mais para a parte de cinema e animações.
Só que, trazendo pouco para o nosso contexto,
ele cresceu nesse ambiente mais de aplicativos,
principalmente com o desenvolvimento dos Tablets
e Smartphones.
Então, o Motion Design, para aplicativos mobile,
tem uma função ali de primeiro...
Pegando essas referências do Designer Gráfico,
da animação e algumas técnicas cinematográficas,
inclusive reaproveitando os nomes que a gente utiliza nessa área,
eles tendem a criar animações
para tornar...
Mais dinâmica a experiência.
Eu acho que essa é a palavra fundamental,
que a gente ouve bastante,
inclusive na área de criação ultimamente,
a palavra experiência.
Então torna esse processo mais fluído.
E tem até um termo que eu li esse dia,
que eu acho muito engraçado,
que é reduzir a carga cognitiva do usuário,
ou seja, você fazer com que o usuário fique muito mais à vontade
e muito mais calmo,
de repente, não frustrado,
que são outros temas que eu tenho lido bastante,
na hora de utilizar um aplicativo, por exemplo.
Então é tornar a experiência mais fluida, mais simples.
Que aquele app não seja um labirinto,
que ele bata o olho e já saiba o que vai fazer
sem ter que pensar muito,
sem ter que gastar poder de processamento, né?
Exatamente. A parte estética é fundamental,
mas o essencial mesmo
é fazer a coisa mais fluida, mais intuitiva.
Eu costumo dizer que, na verdade,
o usuário é o navegador, é o navegante,
e a gente, por mexer com essa parte técnica,
tende a achar que somos o capitão do barco.
E, na verdade, não.
Na verdade, o capitão do barco é o próprio usuário.
Ele que é responsável pela sua navegação.
O nosso trabalho é ser o cursor da água,
é fornecer a linha e o movimento
que vai guiar os passos desse navegante
na nossa interface digital.
Então...
O Motion Design, que, na verdade,
é uma junção de Motion Graphics com UX Motion,
é o Motion Graphics
aplicado ao UX Motion...
Essa animação de elementos visuais,
elementos técnicos,
que a gente joga para a interface digital
para criar isso que ele disse, que é uma navegação mais fluida...
Mais constante,
mais tranquila, né, uma...
- Intuitiva. - Intuitiva.
Então a gente é responsável por guiar...
É muito mais que estética.
Ele falou isso, é muito mais que estética.
É uma noção de percepção do usuário.
Então o nosso objetivo
é com conduzir o usuário pela interface digital.
Como a gente vai fazer essa animação,
é uma mera questão técnica.
Então eu acho que é importante dizer isso,
porque às vezes as pessoas acham que a técnica resolve tudo.
"Ah, eu preciso aprender um determinado software
e eu vou me tornar esse profissional."
Não.
O Motion Design é muito mais que técnica.
Ele é uma noção da cognição do usuário,
da relação com a interface.
Perfeito, perfeito.
É aquela história, eu não estou criando a aplicação para mim.
Eu estou criando aquela aplicação para o usuário.
É com a cabeça dele que eu tenho que pensar,
quais são os passos que ele vai tomar, onde ele vai clicar,
se ele digitar alguma coisa errada,
qual é o feedback visual que eu posso fornecer para ele.
- É quase um exercício de empatia. - É verdade.
Se colocar no lugar do outro
e ter essa sensibilidade.
Porque não deixa de ser um artista o motion designer, concorda?
É um artista aplicado.
E para ser artista tem que ter sensibilidade
de se colocar no lugar do outro.
Incrível.
É isso que a gente faz.
Muito boas as definições.
E de que forma, César, essas animações
vão facilitar a vida e o dia a dia do usuário?
Ou seja, como você consegue hoje, no seu dia a dia,
colocar em prática esse conhecimento do Motion Design
e tornar interfaces que antes eram complexas,
muito mais intuitivas?
Então, a gente tem alguns recursos.
Por exemplo, a gente tem essa questão dos feedbacks,
das microinterações, que vão servir ali para reforçar
determinado comportamento, e muitas vezes para guiar.
Então, por exemplo, a gente às vezes pega uma interface ali
na mão de uma pessoa que não está muito acostumada
a lidar com aplicativos, internet de maneira geral,
e a coloca, de repente, na frente de um story,
de uma propaganda que ela está assistindo,
de repente ela gostou do conteúdo e querer saber mais.
Você tem ali o velho e conhecido Call to Action, que é o botão,
mas às vezes ele é colocado de uma maneira...
Por exemplo, às vezes, dependendo do aplicativo,
são muitos recursos.
Se a gente for colocar um recurso para cada botão...
Me desculpe, ao contrário.
Um botão para cada recurso,
parece ser uma tela de botões.
Então a gente começa a dar algumas orientações.
Por exemplo, coloca uma animação,
como setinhas apontando para cima.
A pessoa vai saber que se ela quiser acessar aquela pasta,
arrasta para cima, arrasta para o lado.
Então você tem ali alguns aplicativos
que, quando você instala,
vem como se fossem minis tutoriais.
Para quem está vendo aquele estudante...
Você que instalou o Adobe no seu computador pela primeira vez,
sabe que, toda vez que abre um software...
É irritante, né?
Mas toda vez que abre um software da Adobe...
Eu pulo.
Então, mas ultimamente parece que eles
não estão deixando nem isso né?
- É, força você... - É, força você assistir.
Então ele tem ali um tutorial.
Se você quer ir para o menu tal, você arrasta para cá,
você quer acessar a página, você arrasta para cima.
Então...
Esse feedback, muitas vezes, de você clicar no botão...
Isso aconteceu comigo esses dias.
Foi num aplicativo inclusive.
Eu preenchi um cadastro enorme,
extremamente mal feito, que você tem que...
Você não pode digitar.
Você tem que... Sabe?
Universidade, são todas as universidades do mundo.
Se vira, acha.
Você não pode digitar.
E a hora que você acabou de digitar,
você vai lá para baixo e some da sua tela
todo o formulário que você preencheu
e fica só o botão de enviar.
Qual é o básico da nossa área?
Quando você aperta esse botão, o que tem que acontecer?
Tem que ter uma micro interação.
O botão muda de cor, ele treme,
ele muda, aparece como enviado.
Isso é o básico na nossa área.
O botão não fazia isso.
Ele simplesmente não mudava,
o formulário tinha sido enviado,
o formulário tinha sido assim...
Ele carregava.
Só que tem um macete especial desse aplicativo.
Você apertava mais de uma vez
porque você achava que não tinha apertado,
ele zerava o seu formulário
e você tinha que começar de novo.
A nossa área trabalha muito
na parte de direcionamento, mas também de reforço,
de você sanar, no usuário,
se a ação que ele executou
foi para algum lugar.
Reduzir as interrupções.
Não existe nada mais desconfortável do que você clicar num botão
e você não saber se o seu arquivo subiu
ou se você recebeu o arquivo de alguma maneira.
Então, esse feedback que ele está fazendo, que é o feedback visual,
é uma micro animação que é realizada
através de uma interação
num pequeno ícone, num pequeno botão,
que dá a resposta ao usuário
de que aquela ação foi efetiva.
Tranquiliza.
Exatamente.
O nosso papel é deixar os usuários mais tranquilos.
A vida já é muito difícil, né?
Ao acessar o meu site, eu te garanto que, tranquilo, você vai ficar.
A vida já difícil, o seu aplicativo vai dificultar mais?
Se as telas, que a gente tem que lidar
o tempo inteiro com elas,
forem dificultar a nossa vida, então a gente está ferrado.
No começo estava difícil, no final, parecia que eu estava no começo.
É por aí mesmo.
Então a nossa função é essa.
É o que eles chamam também de "visual cue",
que seria uma dica visual.
essa parte de...
Animações, quando arrasta, cliques.
São recursos que a gente acaba utilizando.
Além de transições, que a gente vai comentar um pouco.
São os três principais, né,
transições, micro interações...
E os feedbacks visuais.
Feedback visual, interações, são recursos então que...
Fundamentais.
Fundamentais, que o Motion Design...
E sabe o que acontece?
Nos primórdios da internet, não tinha essa preocupação.
A preocupação era: tem que funcionar.
E aí o que você falou?
Você vai selecionar lá a cidade.
Você seleciona o estado de São Paulo,
tem mais de 500 cidades,
e aí a sua cidade é a capital, é São Paulo,
que está lá embaixo e aí tem que percorrer.
Todo mundo sabe que a primeira cidade é Adamantina,
porque todo o formulário que você vai preencher...
- Que não tem esses recursos... - É mesmo, né?
Você sabe que Adamantina é a primeira da lista.
Agora você imagina, por exemplo, que você quer colocar uma cidade
lá no seu formulário
e você clica na setinha para baixo e não abrem as cidades.
Já é uma sensação de desconforto.
Exato.
E você falou desde os primórdios, não é verdade?
Provavelmente, a gente deve estar falando
com uma faixa etária aqui, enfim.
Quem tiver mais ou menos a nossa idade
vai lembrar dos sites da década de 1990.
Até tem lugares, sites,
que arquivam essas interfaces.
Tem, Web Archiving, "web.archiving.org".
Obrigado por lembrar.
Eu estava aqui matutando.
Pô, se você pega um site da década de 1990,
experiência do usuário...
Meu Deus!
Era o terror na terra.
E a gente desbravou aquilo tudo, né?
Apanhou para fazer.
"Ah, então é assim que funciona."
Teve alguém que falou assim: "Meu Deus, isso aqui está terrível.
Eu vou ajudar o pessoal a navegar melhor",
Essa pessoa merece ser glorificada.
Eu acho que isso que você trouxe
é muito da cultura e da experiência que nós tivemos no passado,
de hoje não ter essa paciência
de querer assistir o tutorial
que, de repente, outra geração ou outra cultura tem.
Eu vejo que os americanos têm muito dessa cultura.
Quando eles compram uma TV, por exemplo,
de abrir a caixa, pegar o manual, ficar lendo o manual,
para depois...
Aqui não, aqui a gente já pega a TV, coloca na tomada,
pega o controle remoto, e vou aprender a mexer.
"Ah, tem uma folhinha aqui explicando".
Na melhor das hipóteses,
o cara vê uma unboxing, vê um review.
Para falar bem a verdade, quando eu pego uma coisa
e não estou conseguindo programar,
não tem dúvida, YouTube.
É uma cultura imediatista, vai um pouco além de geração.
Você está vendo que até...
Ele falou assim: "A gente largou
o panfletinho do manual
para a gente procurar o tutorial de como montar
num site,
porque o YouTube é um site, o Facebook é um site.
E a intuitividade deles faz com que...
É muito mais intuitivo eu procurar numa plataforma como essa
do que eu ler um manual...
- Com 500 folhas. - Que é mal diagramado.
- Exato - Nossa, muito mal diagramado.
E aí você fica naquela confusão...
- Faço isso, faço aquilo... - E você acha na internet, né?
Por exemplo, como prosetar o relógio na TV tal, tal, tal.
Tem, incrível como tem.
Então é muito mais fácil, muito mais prático, né?
É o que eu falei, é a cultura do imediatismo.
A gente tem que ter coisas que forneçam respostas rápidas,
até para coisas que a gente...
Não tem como ser mais rápido que isso, né?
A gente chegou num estado que a gente pergunta para o AR?:
"Como eu programo essa TV?".
E o AR me responde: "Ainda não chegamos lá".
Mas o aplicativo é uma coisa que, cada vez mais,
tem que ser responsivo, tem que ser rápido.
Ninguém vai aturar ficar no aplicativo de...
Eu já fiz, abandonar o aplicativo de comida
porque o negócio ou é lerdo
ou mete uma animação que não tem nada a ver,
e, consequentemente...
O celular ruim na época, o carregamento não ia e...
E existe uma pesquisa, que inclusive...
Eu não vou lembrar a fonte da pesquisa.
Por favor, se vocês tiverem acesso em casa,
pesquisem isso.
Mas existe uma média de...
Usuários que largam um site
se o site demorar 3 segundos para abrir.
A otimização é um processo fundamental também.
Não basta você ter uma animação,
um Motion Design bem bacana,
se ele não tiver otimizado
para que o site carregue bem, para que o site flua bem,
para que ele não fique cheio de travamentos.
Boa!
Eu quero pegar um gancho que o César trouxe
de múltiplas animações e tudo mais.
Vocês, que são profissionais que hoje estão na área,
atuam no dia a dia com Motion Design,
eu vejo que às vezes o excesso de animações e transições
pode dificultar a vida do usuário.
Não adianta ter um aplicativo que gira, pula, estoura,
sendo que ele não cumpre com as funcionalidades básicas.
Eder, na sua opinião,
como a gente consegue alcançar um equilíbrio
entre essas transições e animações
e a usabilidade final para o nosso usuário?
A análise de otimização do site...
Se o site está rendendo bem,
é a primeira coisa que se tem que fazer, identificar...
Esse excesso de animações
através de uma percepção sensível
que o motion designer tem que ter.
Em tudo, em qualquer trabalho...
No caso de interface digitais, porque a gente está falando de animação.
Um monte de animação não vai ser legal.
Se você pegar para fazer um panfleto,
se utilizar o mesmo estilo
ou o mesmo objeto várias vezes,
ele vai cair num problema
que é um dos fundamentos do design,
que é a repetição.
Então eu acho que a gente tem que controlar essa questão de repetição.
A gente tem que ter o bom senso e a sensibilidade
de tornar a página fluida.
E esse processo exige o conhecimento do usuário.
Então, assim, quando você conhece
como é o comportamento visual
diante de uma interface de usuário,
você vai adquirindo automaticamente
e imperceptivelmente
essa sensibilidade.
E é design.
Design tem um objetivo de frente de arte que é subjetiva.
Então, se você tem um objetivo,
você tem que cumprir com esse objetivo.
O excesso de animação vai cumprir o objetivo?
Depende de qual a proposta da interface.
Se ele não estiver cumprindo esse objetivo, então tira.
É preciso ter essa sensibilidade,
esse bom senso de saber avaliar qual é a proposta
e qual o objetivo da animação.
Com um bom briefing, você vai à lugares maravilhosos.
Sensacional!
César, nós falamos aqui nesse bate-papo
sobre micro interações.
Traz para nós aí alguns exemplos.
Eu percebo que a micro interação
é aquela coisa que às vezes o usuário não percebe,
ele não dá valor,
mas aquilo faz uma diferença enorme
na sua experiência e na usabilidade.
Traz alguns outros exemplos de micro interações
para o pessoal que está assistindo a gente associar...
"Hum, isso aqui é uma micro interação".
Por exemplo, quando você vai preencher uma rede social
fora do seu computador, fora do seu celular...
Essa é bem famosa.
A gente está acostumado a salvar
sem ter mais que ficar decorando,
ou a gente mete a impressão digital e acessa.
Às vezes a gente tem que acessar o site fora, em outro lugar,
a sua rede social... "Qual a sua senha do Facebook?".
- Eu não tenho a menor ideia. - Não faço ideia
Aí você vai tentar entrar com a sua senha e não funciona.
O que acontece normalmente com o campo?
A hora que você digita e erra,
ele tende a ficar na cor vermelha,
mas, além disso...
A gente até vai comentar sobre isso, em relação à acessibilidade.
Só ficar na cor vermelha não ajuda.
Ele dá uma tremidinha.
Isso é uma coisa que acontece...
Não vou dizer em todas, né,
mas eu acho que a maioria dos aplicativos que a gente utiliza,
quando você erra alguma informação, ele tende a tremer.
Quando você preenche, de repente, o seu CEP errado,
você colocou seis dígitos,
o que normalmente tende a acontecer
é ele não te deixa ir para frente.
De repente ele vai subir a página
e vai mostrar o erro com uma cor diferente,
onde que você errou.
Então, essas interações, desde movimento,
desde a alteração de cor, ou os dois juntos,
preferencialmente os dois juntos,
vai mostrar uma espécie de reforço quando você acerta,
ou ao contrário, quando você erra, que é o caso aqui.
São coisas que realmente tendem a...
Reforçar,
para que você não faça mais ou você preste atenção,
ou para que, de repente, quando você dá um like...
É uma coisa até um pouco mais recente.
Você dá um like ou você dá um coraçãozinho, dá um parabéns...
Ainda existe isso no Facebook,
de você colocar parabéns, tem serpentina?
Sim.
Então, isso é um reforço, é uma interação,
que causa ali uma conexão emocional.
Porque, assim...
A parte do motion
pega um pouquinho de referência...
Atenção! Um pouquinho, tá?
De referência dos doze passos, doze fundamentos da animação,
que é um livro que surgiu lá na década de 1980,
que foram observações feitas principalmente com produções da Disney.
Então não é alguém que veio da regra.
É alguém que achou elementos em comum.
E que vai influenciar de alguma forma
os doze fundamentos do UX.
Qual a diferença de um e de outro?
Da animação, é para criar uma conexão emocional,
do UX para criar uma...
Ele tem um sentido mais...
- Como eu posso dizer? - Experiência.
Experiência.
Então você vai juntar um com o outro, entendeu?
Fique mais no UX, tá?
Mas a questão da animação
para te trazer uma conexão emocional é fundamental.
A experiência é muito boa, mas quando você sente ali
que tem uma...
A questão de você dar like ou um coração
e ter toda uma animação, uma alimentação,
um feedback,
torna a sua experiência muito mais emocional,
que é importante também.
É bom que o aplicativo funcione,
mas essa conexão emocional também é fundamental.
Essas micro interações geralmente trazem um pouquinho dos dois.
Sem dúvida, sem dúvida.
Vamos fazer agora uma viagem no tempo
e voltar lá para 2009.
2009 foi um ano em que começou
a surgir os primeiros aplicativos
após o lançamento de AppStore, Google Play,
a antiga Play Store.
Era uma época que tinha diversos Smartphones,
um leque com Windows Phone,
BlackBerry, iOS,
Android, entre outros.
Voltando agora para os dias de hoje,
nós temos a grande concentração
entre usuários Android e iOS.
Eder, muda alguma coisa de Android para iOS
quando o assunto é motion, ou é tudo a mesma coisa?
Eu acho que tem muito a ver com as diretrizes do design.
Eu sou péssimo com nome, mas, por exemplo,
o Android usa muito o Material Design do Google.
Tem essas...
Essas diferenças que são muito estéticas, de estilo.
Por exemplo, o Material Design é mais flat.
Você se lembra qual é o nome do material...
Perdão por não lembrar.
Capaz que eu lembre no meio.
Mas o UX também usa um estilo de...
Um Guidelines?
Alguma coisa assim.
Human Interface Guidelines.
Eu acho que eles têm menos de flat.
Eles mexem mais com sombreamento
e profundidade através de luzes.
Então tem essa diferença de diretrizes,
e de softwares que você vai usar, né, de ferramentas que você vai usar.
Então você pode usar...
No Android, você pode usar Lottie, você pode usar o After Effects,
para converter as suas animações em JSON...
Em Flutter.
Assim, tem várias ferramentas
que diferenciam,
que são utilizadas em cada sistema.
Tem suas diferenças,
mas o fundamento é o mesmo.
O fundamental é o mesmo,
desde que a gente consiga respeitar ali
o Guidelines, né?
Traduzindo para o pessoal de casa,
é um conjunto de boas práticas que cada sistema operacional usa.
E vale destacar também
que são fundamentais muitas vezes
para o aplicativo ser aceito na loja.
Porque, às vezes, se você coloca lá um botão que foge da proposta
ou um botão menor,
o que a Apple, o que o Google, pensam?
"O meu usuário vai ter dificuldade de clicar nesse botão".
E aí, o que ele vai falar?
"Ah, esse aplicativo é ruim"?
Ele vai falar: "Esse iPhone não presta".
Então eles são bem preocupados com essa questão.
Nos projetos que você já tocou, César,
você sentiu muita diferença de iOS para Android
na hora de pensar em motion?
É que normalmente, Gustavo,
o iOS tem uma questão com a sobreposição
e de arrastar para o lado.
Eles também têm uma questão
em relação a você não começar o movimento muito perto da borda.
É uma recomendação que eles dão.
Não é bem uma recomendação.
Não pode, tá?
E no Android, ele é um pouco mais...
Eu não sei como é hoje em dia,
mas se tinha uma certa cultura
de que o iOS era um pouquinho mais chatinho.
Só que, assim, como você falou,
a gente está muito mais em Android e iOS hoje.
As diferenças de tamanho de tela
são muito menores no iOS do que no Android.
No Android, você tem uma variedade imensa de tamanhos,
e você tem que trabalhar em cima disso.
E a questão das transições é assim:
"Ah, mas a transição no iOS é mais suave".
É o que ele falou.
Eu acho que é muito mais uma questão de...
É tão sutil, tão sutil,
que às vezes torna imperceptível para o usuário.
Então é mais uma questão de detalhe técnico mesmo.
E a questão do design como um todo,
se você comparar o WhatsApp em um e em outro,
é uma diferença do tipo...
Ah, um detalhe.
O iOS tinha uma preferência no modo de transição,
que é o de expandir,
também chamado...
Eu vou tentar traduzir aqui.
É obscurecer, se não me engano.
Onde você aplica ali...
Clica em uma determinada tela,
ela expande,
só que, o que está atrás, não desaparece,
que é para te manter o senso de direção,
para você não ficar perdido.
Só que, assim, o Android também está fazendo isso.
Então, voltando para o WhatsApp,
a única diferença que eu vi, visualmente falando,
o WhatsApp de um para o outro,
é que, em cima do Android, tem uma faixinha verde
para fazer a barra superior ser dividida em duas.
A superior do iOS é uma faixa única com uma cor só.
Então, assim, são coisas que...
Eu acho que, antigamente, o iOS era um pouco mais temido.
Mas hoje a coisa acabou convergindo um pouco
e eu não vejo tantas diferenças assim.
A questão de você arrastar para o lado ou não...
Muita coisa do Android funciona assim hoje em dia.
É, essa convergência, a gente discutia muito isso no passado,
as diferenças de um para o outro.
O iPhone tinha um botão voltar no aplicativo.
O voltar do Android já é nativo do próprio aparelho.
Tinham essas diferenças.
Mas esse lance da convergência é muito legal, Eder,
porque a gente percebe que as empresas olham e falam:
"Por que eu estou querendo reinventar a roda?
Se meu usuário já sabe que o carrinho de compra
é no canto superior direito,
por que eu vou inventar moda e colocar embaixo?".
Porque as pessoas já estão associando,
inclusive no caso do motion, que é o nosso papo aqui,
os gestos, os movimentos,
o arrasta para cima, o double tap.
iOS, Android,
são as nossas principais plataformas de Smartphones,
quando gente fala de sistema operacional.
Mas e quando a gente fala num passo anterior
ao desenvolvimento do aplicativo,
o protótipo,
quais ferramentas vocês indicam hoje
para a gente prototipar esses aplicativos
já pensando nas animações?
Figma, você pode animar no Figma também.
Eu acho que é o mais comum.
Tem o Sketch.
O After Effects também.
Essas ferramentas todas, você consegue prototipar,
e, de alguma forma, elas têm suas integrações.
A tecnologia é tão bacana hoje
porque você consegue permear
por todos os cantos, por todas as ferramentas,
sem necessariamente sair, abandonar outra ferramenta,
porque elas estão integradas.
São algumas.
Mas aí tem diversas ferramentas.
Tem o Lottie, né?
É, o Lottie.
Essa eu não conhecia.
O que ela faz?
- Está certo o nome, né, Lottie? - É, Lottie.
Ele tem o modo...
Para a galera que já trabalha mais com programação,
porque ele te fornece o arquivo JSON...
Depende como a pessoa pronuncia.
Se você não souber programar,
vai precisar de algum desenvolvedor,
que ele te dá o código, que é um código mais facilitado inclusive,
ele é mais fácil, ele roda inclusive muito mais rápido.
E tem a versão mais prática e multiuso.
Qualquer um pode pegar.
Você pode baixar uma animação que você precisa colocar no teu...
Alguma publicação que você vai fazer de repente no Instagram.
Aí você quer, de repente,
uma caixinha de som tocando.
Você coloca lá uma caixinha de som tocando.
Aí você acha a caixinha de som, animada,
você consegue mudar essa caixinha de som.
Não precisa programar do zero,
tanto o fundo quanto a figura,
e você consegue adaptar,
de que maneira ela vai se mexer, de que maneira ela vai animar,
e você consegue baixar em MP4,
GIF...
E o JSON.
Então, se você já baixa no formato para você utilizar na hora,
você mexe na sua publicação imediatamente.
Você transforma vetor, ou imagem,
que é superpesado, em código,
e aí você pode levar para o VS Code
e o front-end pode só aplicar
o código JSON no site dele
e vai ter a animação lá.
E caso você queira uma funcionalidade de cliques
aí é código,
muitas vezes em CSS ou alguma coisa em JavaScript.
Sensacional!
Essa então seria uma forma de pular uma barreira.
Quando a gente fala em animação,
quando a gente volta lá para meados dos anos 1990,
vocês devem lembrar do Adobe Flash.
Nossa! Eu tinha certeza absoluta que você ia levar a gente
para o fundo do...
Não, eu estou brincando, Flash.
Você foi muito útil por muito tempo.
Resgatei agora o Adobe Flash.
- Eu fiz um curso em 2008... - O terror dos web designers.
Flash CS5.
O Flash era traumático.
Era pesado e prejudicava a experiência.
O carregamento do site,
o aplicativo, na época, não existia ainda,
os Smartphones são pós 2007.
Mas quando a gente fala desses desafios técnicos,
esse é um exemplo que você deu,
de converter em SVG, converter em código
para não prejudicar a performance do aplicativo.
Tem outras dicas e truques?
É sobre o usuário,
é tudo sobre o usuário
é o que ele precisa, o que ele quer,
para ter a melhor experiência possível diante de uma tela.
Eu acho que é sobre isso.
O UX Motion...
A gente estava conversando sobre isso, né, César?
O código hoje...
Eu sei que muita gente torce o nariz,
principalmente quem não é da programação.
Mas é algo que a gente tem que lidar.
Eu não gosto de ser clichê,
mas normalmente é clichê porque é verdade, né?
É um novo idioma, um novo inglês.
A pessoa que hoje está preparada para lidar com código,
ela está um passo na frente dos outros.
Opa! Então quer dizer que, mesmo eu só trabalhando ali com design,
eu tenho que sair da minha zona de conforto
e entender um pouquinho o que aquele código faz?
Se você vai pegar um arquivo JSON
na hora que você exportar uma animação Lottie,
você precisa saber o que está escrito ali.
Vai ter uma série de sintaxes, parâmetros e valores
que você precisa saber
até para que você possa otimizar melhor
o seu site, caso necessário.
E quando você tem o domínio dessas ferramentas,
você fica muito mais tranquilo
para lidar com as resoluções dos problemas.
E da mesma forma que o designer
começou a aprender um pouquinho de código,
é importante o desenvolvedor também sacar
o que o designer pensou para aquela aplicação.
Conte para nós, César,
vocês, que estão no mercado hoje,
dá muito ruim se os dois não se conversarem,
não se entenderem ali?
Ah, dá muito péssimo.
Às vezes eu percebo...
Até leio em alguns fóruns de vez em quando nos comentários,
algum designer vai lá, coloca mais ou menos a arte dele,
uma noção do que ele pretende fazer,
e aí tem lá o comentário de alguém:
"Quero ver o dev se virar para fazer isso".
Ele que lute, né?
É, ele que lute.
Até os membros, que eu vejo de vez em quando, um dev olhando...
"Mano, que mundo esse cara vive?".
É importante para você saber...
É de maneira geral, tá?
Boa parte de qualquer área de criação,
você sempre tem uma fragmentação,
e essa fragmentação inclusive tende a ir sumindo...
A fragmentação de áreas, por exemplo.
Então, só para dar um exemplo, a gente estava conversando ali atrás,
eu pego algumas vagas de vez em quando para designer instrucional
e eu vejo algumas especificações que eles pedem.
Só retomando rapidinho a questão da programação,
do seu novo inglês.
Aí você tem lá o que eles pedem como designer instrucional,
que é uma coisa ligada à pedagogia, essencialmente.
Mas eles já transformaram o pedagogo
também em designer, entendeu?
E agora, não não contente com isso,
eu pego umas empresas, grandes inclusive,
pedindo para saber fazer isso aqui,
o audiovisual, captação e edição, a parte de design,
a parte de motion, e programação.
Eu tenho vontade de responder na entrevista:
aceitam fritas também?
Realmente é importante você ter
um mínimo de conhecimento,
por exemplo, que é o que eu tenho em programação,
para você saber, na hora de você pedir uma transição.
por que você quer aquela transição.
É realmente necessária aquela transição?
Ela está extrapolando a parte artística, e é egocêntrica?
Eu sempre vou falar da sua parte como designer.
Mas ela realmente é necessária?
O desenvolvedor... "Vem aqui dev:
isso aqui realmente pode prejudicar
a fluidez do nosso sistema?".
"Pode."
"O que a gente pode fazer?"
"Olha, você pode, de repente, tirar a FPS, por exemplo."
Ou se não, "Tem realmente..."
Agora o desenvolvedor para o designer.
"Tem realmente a necessidade
de você meter essas transições aqui?
Você não pode adaptar?".
Então é sempre bom a gente ir um pouco além
daquela questão do... "Não, botem os dois para jantar juntos".
Não, amigo, não é isso que vai...
É você colocar os dois para trabalharem juntos.
O que eu percebo é que, cada vez mais...
Inclusive a gente estava conversando sobre isso,
que os designers estão...
Até vendo um pouco do futuro.
Indo para a parte de programação, necessariamente.
Primeiro, porque talvez ele não seja um baita desenvolvedor,
mas ele minimamente sabe trabalhar aquilo ?
Então ele vai ter consciência de.. "Não, espera um pouquinho.
A hora que o cara ali for desenvolver..."
Eu estou pesando a mão.
Então, num primeiro momento,
é botar os dois para que eles demonstrem, primeiro,
qual é a função da minha questão
prática do design, artística também, claro,
e principalmente o caminho contrário,
que é você ver o desenvolvedor...
"Olha, qual é ...".
Não é só o trabalho que eu vou ter, entendeu,
mas olhe o tanto de recurso e tempo, que são fundamentais.
Às vezes eu não tenho tempo.
E olha quanto eu vou gastar.
"É realmente necessário?"
"Não é, cara, me desculpe.
Eu vou fazer isso aqui."
Então, essa parte de trabalho em equipe,
um saber as dificuldades do trabalho do outro,
você pode pegar isso e aplicar em qualquer área
de criação que você quiser.
Muito bom!
Então estamos enxergando aqui tendências do mercado.
Falamos do passado, e agora nós vamos falar
do futuro barra presente.
Eder, como você enxerga
o papel da Inteligência Artificial hoje,
em tempos de IAs generativas
desempenhando um papel nessas animações e transações?
A IA, por si, tem a tendência
de automatizar os processos criar padrões.
Eu acho que isso é inevitável, já está acontecendo muito.
Eu acho que talvez...
Eu não sou futurista,
mas eu acredito
que a tendência é a integração de IAs
em novos processos tecnológicos, por exemplo, Realidade Aumentada...
Como a IA vai se integrar com a Realidade Aumentada.
Como a IA vai subsidiar...
O Motion Design.
Já tem hoje IAs que criam animações.
Eu acho que é tudo uma questão agora de aperfeiçoar.
Eu acho que, com o tempo, isso vai aperfeiçoando.
Eu acho que tem a ver mais
com a automatização de funcionalidades.
Porque o Motion Design
são funcionalidades e emoções,
então ele caminha entre...
Ele transforma algo técnico em algo humano.
Eu vou ser mais...
Eu acho que eu vou ser mais preciso agora.
Ele faz com que,
através das ferramentas dele,
o usuário tenha sensações.
Eu acredito que a IA vai entrar aí,
vai otimizar esses processos, automatizar esses processos,
para que as sensações sejam mais...
Sensacionais.
Quase parafraseando o Djonga aqui...
Num podcast sobre UX Motion.
Mas é válido.
Grande Djonga!
Então é mais sobre isso,
como a IA pode melhorar essa navegação
a ponto do usuário se sentir mais confortável.
Aí é um mundo de possibilidades.
Mas eu acredito muito que está nessa construção de padrões
e automatização das funcionalidades.
Na sua opinião, César, até onde ajuda
e até onde é um ponto de atenção
para os profissionais que trabalham com isso
e usam a IA no seu dia a dia?
Taí um tema que, se você deixar, eu vou ficar duas horas aqui falando.
Me deixe fazer um recorte então.
Eu acho que, a princípio...
Ele tende a facilitar a automatização de alguns processos.
Então ele tende, de repente...
A facilitar alguns trabalhos um pouco mais simples,
onde você precisa de umas transições mais...
Porque a Inteligência Artificial, na verdade, não cria, tá?
Ela depende de repositórios e treinamento.
Então, muitos artistas, inclusive da área,
têm reclamado porque eles percebem
que muitos trabalhos deles têm sido roubados.
Sabe aquele negócio, copia mas não faz igual?
Você tem artistas de diversos setores...
Roube como um artista.
Exatamente.
E o que é bem verdade, né?
Historicamente falando, sempre se roubou muito.
Só que, quem é roubado, não gosta.
Então você tem vários ilustradores, por exemplo, que percebem:
"Opa, esse estilo aqui é meu!",
e não ganham uma vírgula por causa disso.
Nossa!
Então a coisa precisa passar por uma regulamentação.
Mas, num primeiro momento...
E também tem muita a questão
de um certo terrorismo momentâneo em relação...
"A IA vai roubar o seu trabalho.
Então, compre a sua IA, aprenda com a gente,
mas pega o pacote pago".
Entendi. Vocês estão tentando fazer uma venda,
cada IA está tentando fazer a sua venda, entendeu?
Num primeiro momento, eu acho que o que você pode fazer,
se você é da área de design, é: vá fazer programação.
É essencial.
Eu acho que tem uma coisa que é importante também, que é moderação.
Use com moderação, porque a sua ferramenta
é muito mais que um After Effects,
com o Lottie, com...
A sua ferramenta é o processo criativo.
É o justificativo, né?
Então, quanto mais você usa...
Eu não queria usar esta metáfora,
mas é que me vem à cabeça agora.
É como se fosse uma droga a IA.
Eu não estou subjugando as IAs.
Eu acho que elas têm muita utilidade.
Mas um uso excessivo vicia o teu processo criativo...
A depender da IA para poder criar.
E no design, na arte como um todo...
Você precisa aguçar o seu processo criativo.
Isso se baseia em referências,
em influências do seu meio social.
Então, busque muitas referências.
Vá em museus, vá em teatro,
vá em exposições,
e use a IA com moderação,
porque se você usar com moderação,
você vai manter seu processo criativo, vai estimular,
e aí você vai ter toda...
A capacidade de oferecer o seu trabalho
da melhor maneira possível, sem se condicionar,
se limitar à uma ferramenta.
Essa parte de se condicionar é boa também
na questão de às vezes você ficar...
Às veses o cara que é designer,
se ele começar a utilizar muito a IA,
ele vai ficar preso a um certo nicho de estilo, vamos dizer assim,
e ele acaba não inovando, entendeu?
Então a questão de você ficar pegando referência,
é que às vezes você tem um insight...
"Opa! Peraí...",
que é o que a gente chama de inovação, né?
Porque a parte de inovação...
Eu sempre falo para o pessoal de criação..
Você não vai criar nada do zero, tá?
Então, assim, perca essa ilusão e perca esse peso nas costas,
porque às vezes o pessoal da área de publicidade tem muito esse peso.
"Bom, mas como eu vou criar alguma coisa do nada?".
Não é do nada, meu amigo!
Assim...
É uma escola pedagógica que tem alguns milhares de anos.
Primeiro você vai aprender a copiar.
É copiar mesmo.
Só não vende.
Você vai aprender a copiar.
Aí você vai copiar, copiar, copiar...
Isso é em qualquer área, em qualquer faculdade.
Ele vai reclamar com você...
"Mas eu não vim aqui para ser reprodutor ou falsificador.
Eu vim aqui para criar".
Calma! Agora, todas essas cópias que você fez
de diversos segmentos, várias referências,
você vai criar o seu.
Então você vai fazer um aplicativo para...
Não sei... Comida.
Pega o que melhor você teve de experiência
em todos esses aplicativos.
Então a transição, eu vou pegar desse,
de repente, uma micro interação, eu vou pegar desse,
e um outro recurso, de feedback, eu vou pegar desse.
Então você pegou todos,
adaptou para o estilo que você melhoraria
"Essa micro interação é legal, mas pode melhorar".
Pronto, tudo o que você consumiu, você pegou,
juntou, transformou, e criou o seu.
Isso chama-se inovação.
Você não clonou nada.
Cópia diferente de plágio, né?
É diferente de plágio.
Plágio é uma coisa que você pega,
que não é sua, para fazer como se fosse sua.
A mesma coisa se você pegar o iFood aqui,
você vai lá e faz exatamente a mesma coisa, e muda a cor.
Amigão...
Você não inovou, entendeu?
Essa questão da criação, calma, baixe a bola,
pegue referências, e aí você vai ter um insight.
Como você vai ter insight se você não tem referências?
Foi o que ele falou.
Exatamente.
Não preciso reinventar a roda.
O problema da Inteligência Artificial, o meu medo,
é que ela comece a encaixotar demais as pessoas,
que as pessoas fiquem muito confortáveis.
Porque criar dá trabalho, hein?
Então eu vou ficar muito encaixotado aqui na Inteligência Artificial,
vou lá, faço o prompt, ele vai criar,
e para o mercado está bom.
Não é assim.
Esse é um bom ponto.
E, infelizmente, estamos chegando ao final deste bate-papo,
Passou super-rápido!
- Meu Deus! Já? - Voa!
A gente não pode ficar mais três horas aqui?
O papo está bom, e eu tenho certeza que o pessoal de casa
continuaria escutando a gente.
Mas estamos chegando ao fim.
E, para finalizar, a gente vai fazer aqui
um exercício de futurismo.
Depois da Inteligência Artificial,
quais são outras tendências que vocês imaginam
para essa área de Motion Design?
O que vem pela frente, Eder?
Caramba, cara!
Eu acho que o fortalecimento das IAs mesmo.
Porque, assim...
É o que está em voga hoje, né?
E ela está só no começo,
então ela está mudando alguns paradigmas
Eu acho que a gente ainda tem muito para explorar.
E dentro do que a gente pensa por IA,
muita coisa pode aparecer.
Integrações, superagentes...
Então, para mim, isso cria uma cortina de fumaça.
Eu acho que está muito aberto e tem muita coisa nova para surgir.
Eu acho isso muito bacana.
Então eu acredito nisso, muitas integrações...
E a IA conseguindo transformar funcionalidades
que às vezes a gente fazia na unha,
melhorando processos...
Converter o código, que já está fazendo isso hoje.
Eu acredito que vai por aí.
Isso pensando num futuro próximo,
Mas um futuro distante,
eu não conseguiria prever,
ou tentar prever.
Infelizmente, eu não tenho esse...
Essa qualidade de Mãe Dinah.
Eu acho que IA,
eu acho que a IA vai dar muito o que falar ainda.
E já está dando, né?
Pouco tempo atrás, teve o DeepSeek aí
causando um fervor no mercado.
Que tem a ver muito com inovação.
Mas isso é um assunto para outro bate-papo.
Mas com certeza.
Eu acho que a IA vai se aprofundar
e a gente vai descobrir muitas coisas bacanas ainda com IA.
Boa!
E, na sua opinião, César?
Eu vou me contrariar só para dar um outro ponto de vista.
Então vamos lá!
Eu acho que, em história...
Um dos meus negócios é...
Eu estava fazendo faculdade de história.
Tive que dar uma pausa.
Mas, assim, em história
tem uma coisa que a gente chama de filosofia da história,
que é uma tendência...
As pessoas tendem a achar que isso existe,
que a história se repete.
Não, tá?
Cada e cada momento histórico tem um contexto.
Mas...
Agora eu vou me contrariar.
Eu acho que se você parar para ver, eu conheço algumas produtoras,
inclusive uns designers freelas,
que eles prestam serviço para algum cliente,
e o cliente faz questão de enfatizar
que toda aquela campanha foi feita com IA
mesmo que não tenha sido, tá?
Teve um desenvolvedor.
É só bater o carimbo...
- "Olha como somos inovadores" e tal. - "Usamos IA."
E teve um momento na história, no século XIX
durante a Revolução Industrial...
Porque, assim, a gente teve a serialização de produtos,
de qualquer coisa, copos, canecas
Então são produzidas em série,
e que facilita que muita gente tenha.
E isso é um efeito bom, que facilita que do mundo tenha, é mais barato.
Só que, assim, todo mundo tem.
Isso cria um efeito contrário,
que nasce principalmente com Morris e com Ruskin,
que eram defensores de uma cultura do artesanal,
e que você tem público para issoaté hoje.
Você pode perceber, de repente...
"Ah, por que essa caneca aqui custa 500 reais
sendo que eu posso comprar uma caneza igualzinha em qualquer lugar
que custa 15, 10 reais?".
- Porque ela é única. - Porque ela é única...
Ela foi feita à mão, que é o mais ou menos...
Aquele carro inglês que é feito inteiro à mão.
Ele é costurado à mão, ele é pintado à mão.
Então eu acho que, num futuro médio, vamos dizer assim,
vai ter uma certa tendência de algumas empresas
colocarem o selo feito manualmente, para fugir....
Handmade...
- Valorização. - Isso aqui não é...
De Inteligência Artificial não.
- Isso aqui foi... - E faz todo sentido, né?
- Mesmo que você esteja se contrariando. - Eu estou me contrariando, tá?
É um ciclo da história, tá,
mas é uma tendência possível,
da pessoa virar e falar:
"Não, o nosso trabalho, a nossa campanha,
foi feita por pessoas.
Teve ali um roteirista consagrado,
teve ali um designer consagrado, um programador consagrado.
Então, pessoas.
É um trabalho muito mais humano.
Talvez não dure tanto, mas eu tenho certeza...
Certeza não, eu acho que isso é uma tendência
a aparecer no médio prazo.
À curto prazo, eu acho que vai ser essa febre, IA...
No fundo, as tendências estão sempre em movimento.
- Elas vão e voltam, né? - Sim...
E de maneira contraditória.
A gente está falando disso,
e hoje eu falei que é verdade,
porque eu estava vendo sobre isso, sobre vídeos.
As pessoas estão mais procurando vídeos
onde elas enxergam a verdade,
do que um vídeo totalmente editado,
aquela coisa toda.
Isso era uma tendência no começo do YouTube, né?
Ele nasce dessa maneira.
Aí depois se exigiu uma qualificação...
Megas produções.
E agora está retornando.
Está em movimento.
O mundo é cíclico, né...
- Moda, design. - São contradições, dinâmicas...
São dialéticas, né?
Se vem um, tem que vir o outro...
Normalmente é uma tendência.
É por isso que cria a ilusão de que a história é cíclica.
Mas é uma questão de...
De certa forma, é previsível, de certa forma.
Que loucura!
Falamos de tecnologia, falamos de Inteligência Artificial,
design, história, filosofia.
Rendeu muito.
Muito mais que um podcast, uma verdadeira aula.
E eu quero me despedir de vocês.
Muito obrigado, Eder!
Eu que agradeço, pelo amor de Deus!
É uma honra para mim estar aqui
nesse videocast da FIAP, que é maravilhoso.
Já assisti vários.
Estar com você, que é uma figura conhecida
na área de tecnologia brasileira,
quem sabe até global.
Aí eu não sei.
Mas eu conheço você daqui.
E ter conhecido o César,
um cara sensacional, fantástico.
O que eu posso dizer sobre Motion Design
é que as pessoas que têm vontade de fazer,
vá fundo, porque Motion Design
é você dar movimento a uma ideia...
É você criar algo
que vai ter vida de alguma forma, entendeu?
Então, nada mais prazeroso e satisfatório
que você finalizar um projeto de Motion Design
e você ver aquele projeto em movimento.
Então, vão e façam.
Eu sou suspeito
porque eu defendo com unhas e dentes a minha profissão,
mas vale a pena demais, vale a pena mesmo.
César, foi um prazer enorme
contar com você aqui nesse nosso podcast.
Eu que agradeço, e muito obrigado aos dois pela aula,
todo o pessoal da produção inclusive,
por toda a delicadeza, toda a gentileza.
Podcast é muito bacana.
Parabéns para a FIAP por todo investimento que faz,
infraestrutura, em conteúdo.
Satisfação enorme estar aqui.
E Motion Design é emoção e eficiência.
Agradeço novamente vocês.
Agradeço a você, que ficou até agora aqui com a gente
assistindo ou ouvindo esse podcast.
E você aprendeu que o papel do Motion Design
vai muito além de estética.
Estamos falando aqui de fluidez, dinamismo,
uma melhor experiência do usuário.
Parece clichê, mas não é.
Nós estamos a um toque
de tudo isso se tornar realidade.
Um grande abraço e até a próxima!