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 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.

Eles vêm a primeira vez 
que você instala

como se fossem minis tutoriais.

Para quem está vendo 
aqui, o 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á,

ou se você quer acessar a página,
você arrasa para cima.

Então...

Esse feedback, muitas vezes,
de você clicar no botão...

Isso aconteceu comigo
esses dias.

Foi no meu 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,
fica só o botão de enviar.

O que é 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.

Então, 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.

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.

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 principais os três,

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
tem 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 o manual

para a gente procurar 
o tutorial de como montar

num site,

porque o YouTube é um site,
o Facebook é um site.

E pela 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.

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 e 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...

Na época,
o carregamento não ia e...

Não, 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.

O 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 aqui 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é comenta 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 ralmente 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 é 
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...

No 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éssima 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 como
que é 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...

iOS tem uma questão com a sobreposição 
e de arrastar para o lado.

Eles também tem 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.

A questão do design 
como um todo,

se você comparar o WhatsApp
em um e em outro.

Mas é 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ê aplicaria 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 
seria 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 modo...

Para a galera que já trabalha
mais com programação,

porque ele te fornece
um 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 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,

pode ser 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 é 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.

E eu não gosto de ser clichê,

mas normalmente é clichê
é porque é verdade.

É 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?

Você precisa saber 
se vai pegar o 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.

Então, você precisa saber
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, 
que é o protótipo, 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 Design 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 design instrucional,

que é uma coisa ligada 
à pedagogia, essencialmente.

Mas eles já transformaram 
o designer pedagogo

também 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 emotion, 
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 ?
como designer.

Mas ela realmente é necessária?

O desenvolvedor ?

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 cor, 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 pensam:

"Opa, esse estilo aqui é meu!",

e não ganham uma vírgula
por causa disso.

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
tivesse esse seu 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 isso
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 ali, 
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ê acha melhor...

"Essa micro interação é legal,
mas pode melhorar".

Pronto, tudo o que você 
consumiu, você pegou,

juntou, transformou, 
e criou seu.

Isso chama-se inovação.

Você ? 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 precisoreinventar 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.

E 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!