PBL TWD ANO 02 FASE 02 2025 VIDEOCAST TOUCH AND MOTION DESIGN

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 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í nasce

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.

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.

Exatamente. A parte
estética é fundamental,

mas o essencial mesmo

é fazer a coisa mais
fluída, 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 fluída...

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.

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

É o que é. Os feedbacks visuais.

O visual, interações são recursos
então que.

Fundamentais.
Fundamentais que o motion.

E sabe o que acontece
nos primórdios da internet

não tinha essa preocupação,

essa preocupação era
tem que funcionar.

E aí o que você falou?

Você vai selecionar lá cidade,
você seleciona.

O Estado de São Paulo
tem mais de 500 cidades e aí

a sua cidade é a capital de
São Paulo que está lá embaixo

e aí tem que percorrer.

Todo mundo
sabe que a primeira cidade

é a da cantina,

porque todo o formulário que você

vai preencher,
que não tem esses recursos,

você sabe que Adamantina
é a primeira da lista.

Agora você imagina, por exemplo,
se quer colocar uma cidade lá

no seu formulário

e você clica na setinha pra baixo
e não abre a cidade?

Nós Então já
é uma sensação de desconforto,

Desafio
E você falou de desde os primórdios.

Na verdade,

agora

provavelmente a

gente deve estar falando
com uma faixa etária aqui ou enfim,

quem tiver mais ou menos
a nossa idade vai lembrar dos sites

da década de 90.

Até tem lugares sites que arquivam

esses
essas interfaces de web arcaico.

Vai ver quem é bom.
Brigado por lembrar.

Eu estava aqui matutando se você
pega um site da década de 90,

experiência do usuário Meu Deus,
essa era era o terror na terra.

A gente desbravou aquilo tudo.

Sobreviveu, apanhou pra fazer.

Então é assim que.

Teve alguém que falou assim
Meu Deus, isso aqui está terrível.

Eu vou ajudar
o pessoal na vida melhor.

Essa pessoa merece ser glorificado.

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 pega a TV, coloca
na tomada, pega o controle remoto.

Não é útil, tem uma folhinha
aqui explicando porque não?

Na melhor das hipóteses, o

cara vê uma box, vê um review,
pra falar bem a verdade.

Assim,
quando eu tenho pego uma coisa

não tô 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 lá
do manual para a gente

procurar o tutorial
de como montar num site,

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

E pela intuição intuitividade deles,
faz com que eu

muito mais intuitivo eu procurar
numa plataforma como essa

do que com do que eu ler um manual.

Que é mal diagramado. Olhos.

Muito mal diagramado.

E aí você fica naquela confusão que.

Você acha na internet,
mas é como projetar o relógio na TV

tem nem um link incrível como tem,
então é muito mais

fácil, muito mais prático

a cultura do imediatismo.

A gente tem que ter coisas que tem
que forneçam respostas rápidas.

Assim dá até para coisas que a gente

não tem como ser mais rápido
do que isso, né?

A gente chegou num estado
que a gente pergunta pro ar

como eu programo essa TV?

O ar me responde
Ainda não chegamos lá,

mas o aplicativo é uma coisa

e cada vez mais
ele tem que ser responsivo,

tem que ser rápido,
Ninguém vai aturar ficar.

Às vezes o aplicativo diz eu já fiz,
já fiz isso.

Abandonar aplicativo de comida,
porque o negócio

ou é lerdo ou mete
uma animação que não tem nada a ver

e consequentemente, assim o toc toc,
o celular ruim ele na época

o carregamento não vai 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 que existe uma média de de

de que usuários eles largam um site.

Se o site demorar 3/2
sim para abrir, então sim,

a otimização
é um processo fundamental também,

Então não basta
você ter uma animação,

uma muffin 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 ele
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

podem dificultar a vida do usuário.

Não adianta ter um aplicativo
que gira pula história,

sendo que ele não cumpre com
as funcionalidades básicas.

Eder, na sua opinião,

como é que a gente consegue alcançar

um equilíbrio
entre essas transições e animações

e a usabilidade final
para o nosso usuário?

E análise de otimização do site de

Se o site está rendendo
bem é a primeira.

A primeira coisa tem que fazer,
identificar,

ter esse excesso de animações

através de uma percepção sensível

que o motion design tem que ter.

Em tudo, qualquer trabalho,
em qualquer trabalho.

No caso de interface digitais,
a gente tá falando de animação.

Um monte de animação
não vai ser legal

se você pegar para
fazer um panfleto, se não utilizar

o mesmo, o mesmo estilo
ou o mesmo objeto várias vezes,

ele vai cair num problema
que é um dos princípios do fundo

e um dos fundamentos do design
do design, que é a repetição.

Então acho que a gente tem que
controlar essa questão de repetição.

Então a gente tem que ter o bom
senso, a sensibilidade

de tornar a página fluida.

E esse processo
exige o conhecimento do usuário.

Então, assim, quando você conhece

como que o comportamento visual
diante de uma interface de usuário,

você vai adquirindo automaticamente
e imperceptivelmente

essa sensibilidade.

Então é e é design de design

tem um objetivo de frente de arte
que é subjetiva.

Então, se você tem um objetivo,
você tem que cumprir

com esse objetivo
ou excesso de animação.

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

E assim, com bom briefing,
você vai a lugares maravilhosos.

Sensacional!

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 o usuário

às vezes ele não percebe,
ele não dá valor, Mas aqui não

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

Isso aqui é uma micro interação.

Então, por exemplo,
quando você vai preencher lá alguma

uma rede social fora do seu
computador, fora do seu celular

e essa essa é bem famosa e aí
a gente está acostumado a salvar

sem ali
não ter que ficar mais 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?

Não tem a menor não.

Face daí você vai tentar entrar
na sua senha e não funciona.

Você aqui
acontece normalmente com o cabo,

porque você digita e erra,
ele tende a ficar na cor vermelha.

Mas além disso,
a gente até comenta sobre isso

em relação a acessibilidade,
só ficar na cor vermelha,

na cor vermelha não ajuda.
Ele dá uma tremidinha.

Isso é uma coisa
que acontecem em todas, né?

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

Ele não te deixa ir para frente,
ele vai subir De repente a página

e vai mostrar o erro
com uma cor diferente.

Onde que você errou?

Então,
essas interações desde o movimento,

desde a alteração de cor
ou os dois juntos,

preferencialmente os dois juntos,

ele vai mostrar
uma espécie de reforço

quando você acerta ou ao contrário,
quando você é que é o caso aqui.

Então

são coisas que tende realmente 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 um coraçãozinho,
dá um parabéns,

Vocês ainda existe isso no Facebook?

Você coloca
parabéns a pessoa só tem serpentina,

então isso é um é um reforço,
uma interação que causa ali

uma uma conexão emocional,
porque assim,

a parte de do

do Mouchão
ela pega um pouquinho de referência,

atenção, um pouquinho de referências

ali, dos 12 passos,
dos fundamentos da animação

Tá que é o livro que surge lá
da década de 80,

que foram observações feitas
principalmente

com produções da Disney.

Alguém que veio da regra e
alguém que achou elementos em comum

e que vai influenciar
de alguma forma.

Por exemplo, do 12
fundamentos do Unix

Qual a diferença de um
e de outro da animação?

E para criar uma conexão emocional
do YouPix para criar uma?

Eu tenho sentido mais quando
você tem experiência, entendeu?

Então você vai juntar um
com o outro, entendeu?

Ou fique mais, está mais A questão
da arte da animação

para te trazer
uma conexão emocional é fundamental.

A experiência é
muito bom, 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

e uma alimentação,
vamos dar feedback.

Ele torna sua experiência muito mais
emocional, o que é importante.

Também é bom que o aplicativo
funcione,

mas essa conexão emocional
também é fundamental.

Então essas micro interações

geralmente elas 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 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,

AIO, o S, Android, entre outros.

Voltando agora para os dias de hoje,

nós temos a grande concentração
entre usuários Android e iOS s.

Éder muda alguma coisa de Android
para iOS

quando o assunto é Mocha
ou tudo a mesma coisa?

Eu acho que tem muito a ver
com as diretrizes de design. Tá?

Então, assim

como sou
péssima com o nome, mas por exemplo,

o Android usa muito
o material de design do Google,

então tem essas peças

que essa diferenças que estão
muito estéticas, de estilo.

Por exemplo,
o material design é mais flat.

Você se lembra como
que é o nome do material?

Me perdão, Perdão por não lembrar.

Eu Capaz que eu lembre no meio,
mas eles também usam um estilo.

De Leibniz.

Ou alguma.

Coisa mais de uma interface.

Eu acho que eles tem menos de Flash,
eles tem e eles mexem mais

com sombreamento e profundidade
através de luzes.

Então sim,
tem essa diferença de diretrizes

e de softwares que você vai usar,
de ferramentas que você vai usar.

Então você pode usar

no Android, você pode usar lote,
você pode usar o After Effects

para converter
ou as suas animações indie em Jeison

e Flutter.

Então assim
tem várias ferramentas que aqui são

que diferenciam, são utilizadas
em cada sistema legal Sim,

tem suas diferenças,
mas o fundamental mesmo é o.

Fundamental mesmo,

desde que a gente consiga respeitar

ali exatamente o lugar de lines, 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 que o Google pensa,

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 se iPhone não presta,
Então eles são bem preocupados

com essa questão.

Nos projetos que você

já tocou, seja,
você sentiu muita diferença de

S para Android
na hora de pensar em Mocha.

Que normalmente o cabelo

adoece, eles tem uma questão
com sobreposição

e de arrastar para o lado e,

por exemplo,

eles também tem uma questão
em relação a você

não começar
o movimento muito perto da borda.

A recomendação que eles dão
é bem uma recomendação não pode

é no Android, ele é um pouco mais.

Eu não sei como é que é hoje em dia,
mas tinha se uma certa cultura

de que vai
um pouquinho mais chatinho. Você.

Só que, assim como você falou,
a gente está hoje

muito mais em Androide e o S.

As diferenças de tamanho de tela
elas são muito menores

lá isso do que no androide androide.

Você tem uma variedade imensa gente,

e você tem que trabalhar em cima
disso.

E as transições aqui são assim.

Já o a essa
transição ela é mais suave.

É o que ele falou.

Acho que é muito mais uma questão
assim, de tão.

Sutil e sutil, de mais e às vezes
torna imperceptível para o usuário.

Então é mais uma questão de
detalhe técnico e.

A questão do design como um todo.

Se você pegar,

se você comparar o WhatsApp
em um e outro,

mas essas diferenças
não sabe do tipo Ah, detalhe maior

existe uma

preferência no modo de transição,
que é o que é o de expandir,

que é algo que também chamado
como que é?

Vou tentar traduzir aqui.

Acho que é obscurecer,
se não me engano,

onde você aplicaria um clique
de um determinado ou uma determinada

tela, Ela expande.

Só que o que está atrás

não desaparece, que é para te manter
o senso de direção perdido.

Só que assim
o Android também está fazendo isso.

Então voltar para o WhatsApp,
por exemplo.

A única diferença que eu vi,
visualmente

falando,
o WhatsApp de um para o outro

é que em cima do do Android
ele tem uma faixinha verde

para fazer a barra superior
de ser dividida em duas

a superior do aio.

Essa é uma faixa única
com uma cor só.

Então se são coisas que

acho que antigamente o AIO
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 pro
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,

tinha essas diferenças.

Mas esse lance da convergência
é muito legal,

porque a gente percebe
que as empresas olhem, fala

o que eu estou querendo
reinventar a roda.

Se meu usuário já sabe
que o carrinho de compra no canto

superior direito que eu vou inventar
moda e colocar embaixo

porque as pessoas já estão
associando, inclusive

no caso do Mocha, que é o nosso papo
aqui, os gestos,

os movimentos,
o arrasta pra cima, o double tap,

aí o s Android são

as nossas principais
plataformas de smartphone

Quando gente fala de sistema
operacional,

mas e quando a gente fala
num passo anterior

ao desenvolvimento do aplicativo?

O protótipo Quais ferramentas
que vocês indicam hoje para a gente

prototipar esses aplicativos
já pensando nas animações

Sigma?

Você pode animar no Sigma também.

Acho que é o mais comum.

É tão Sketch.

Sete.

O After Effects também.

Essas ferramentas todas
você consegue prototipar

e elas de alguma forma
tem suas integrações.

Que legal!

Então, hoje a tecnologia
é tão bacana hoje que você

você consegue permear
por todos os cantos,

por todas as ferramentas,
sem necessariamente sair,

abandonar outra ferramenta,

porque elas estão integradas
e então, Mas são algumas.

Mas aí tem.

Tem diversas ferramentas, não.

O lote, o. Lote.

Que você não conhecia
e é aqui que ele faz.

O. Acerto e o lote.

Ele pertence. O modo que é para que?

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

porque ele te fornece
um arquivo JSON

ou de um monte de coisa
que precisa para não ser.

Aí você vai trabalhar.

Se você não souber programar,
aí precisaria de algum desenvolvedor

que dá o código,
que é o código mais facilitado,

inclusive na era mais fácil de roda,
inclusive muito mais rápido.

E tem a versão romance
mais prático e multiuso.

Qualquer um pode pegar.

Você pode baixar uma animação,
você precisa colocar no teu.

Mala alguma

publicação
seu e fazer de repente no Instagram

acha que é alguma coisa e de repente
uma caixinha de som tocando.

Você coloca uma caixinha de
som tocando.

Aí você acha caixinha de som,
você animado,

você consegue mudar essa
caixinha de som?

Sua programação pode ser todo fundo.

Quanto a figura, que legal!

E você consegue

dar uma certa adaptada lendo
de que maneira ela vai se mexer

e de que maneira ela vai se animar
e você consegue baixar em MP4,

gif e o JSON.

Então se você já baixa aí no formato
para você utilizar na hora,

você mexe na nossa publicação
imediatamente.

Você transforma vetor ou imagem
que é super pesado em código e aí

você pode levar para o vice cold
e o front end.

Pode só aplicar o código Jeison
no site dele vai ter animação lá.

E aí caso você queira
fazer uma funcionalidade de cliques

tipo e código, muitas vezes CSS
ou alguma coisa em JavaScript.

Mas 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 90,

vocês devem lembrar do Adobe Flash.

Tinha certeza absoluta
que você ia levar

pra gente, pro fundo do túnel.

Tô brincando. Flash,
você foi muito útil.

Foi isso que.

Agora? Adobe Flash
Eu fiz um curso, o.

Termo e uso o vídeo.

Se fizesse cinco.

Anos atrás.

Agora era. Era pesado, pesadíssimo.

A experiência.

O carregamento do site aplicativo
na época não existia ainda.

Smartphones
ganharam ascensão pós 2007.

Mas quando a gente fala
desses desafios técnicos,

esse é um exemplo que você
deu de converter em SVG

e converter em código

para não prejudicar
a performance do aplicativo.

Tem outras dicas e truques.

É sobre o. Usuário.

E tudo sobre o usuário

e o que ele precisa,
o que ele quer para ter

a melhor experiência possível
diante de uma tela.

Então eu acho que é sobre isso.

E sobre o esmalte, gente,
A gente estava

e estava conversando
sobre isso. César.

O código

hoje eu
sei que muita gente torce o nariz,

principalmente quem não é
quem não é da programação,

mas é algo que a gente
tem que lidar sim.

E eu não gosto de ser clichê,
mas normalmente clichê

é porque é verdade.

Então é um novo idioma.

O novo inglês.

Então 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 sou trabalhando ali com designer?

Eu tenho que sair
da minha zona de conforto

e entender um pouquinho
o que aquele código faz.

Você precisa saber o que está,
se vai pegar o arquivo.

Jeison Lá

na hora que você

exportar uma animação, note
se você precisa saber o que está

escrito ali e ali vai ter uma série
de sintaxe, parâmetros e valores.

Então você precisa saber
até para você,

caso necessário, você possa otimizar
melhor o seu site.

E quando você tem o domínio dessas
ferramentas,

você fica muito mais tranquilo
para lidar com as resoluções

dos problemas. Ótimo!

E da mesma forma que o designer,

ele começou a aprender
um pouquinho de código.

É importante
o desenvolvedor também sacar

o que o designer pensou
para aquela aplicação.

Conta pra nós, César.

Vocês que estão no mercado hoje,
tá muito ruim.

Se os dois não se conversarem,
não se entenderem ali.

É muito péssimo,

porque

as vezes que eu percebo
assim que até lê alguns fóruns

e 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, protótipo
e até o comentário de alguém.

Quero ver.

Deve se virar para fazer.

Ele é muito.

Complexo e até os membros que vai
de vez em quando o dele

olhando semana
que mundo que esse cara vive,

Então é importante para você saber.

Essa é uma de maneira geral
e em boa parte

qualquer área de criação, sempre
você tem

uma fragmentação
que essa fragmentação

ela tende inclusive a é sumindo,

porque a fragmentação de áreas,
por exemplo.

Então, só pra dar um exemplo,
se a gente estava conversando atrás,

eu pego algumas vagas
de vez em quando

para Design Instrucional
e eu vejo algumas

especificações que eles pedem.

Só retoma rapidinho
a questão da programação.

Seu novo inglês.

Aí você tem lá o que que eles pedem,

como o design instrucional,
que é uma coisa ligada à pedagogia,

essencialmente,
mas eles já transformaram o design.

O pedagogo, também
designer, entendeu

e agora não
só como não contente quando e como.

Com isso eu pego umas empresas
grandes, inclusive

pedindo para saber fazer isso aqui.

O audiovisual, captação, edição,
a parte de design, a parte de

emoção e programação.

Eu tenho vontade de responder
na entrevista,

aceita Freitas Também
porque 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.

Você sabe
por que você quer aquela transição?

É realmente necessária?

Aquela transição perfeita?

Ela está extrapolando
a parte artística e é egocêntrica.

Sempre vou falar da sua parte
como designer,

mas era realmente necessária
o desenvolvedor vir aqui e ver

isso aqui.

Vai realmente
pode prejudicar sua fluidez.

Nosso sistema
pode que que a gente pode fazer?

Olha,
você pode de repente tirar FPS,

por exemplo,
você não tem realmente o Diego.

Agora o desenvolvedor por design
tem realmente a necessidade de você

meter essa transição,
Essas transições aqui

você não pode dar uma
adaptada, então é sempre bom

a gente

ir um pouco além daquela questão do
não botem os dois pra jantar junto.

Não, amigo, não acaba almoçar
não é isso que vai

é você colocar os dois pra trabalhar
juntos.

O que eu percebo,
o que cada vez mais inclusive

está quem estava conversando
sobre isso é que os designers,

eles estão
até vendo pouco do futuro,

indo para a parte de programação
necessariamente porque

primeiro, talvez
ele não seja um baita desenvolvedor,

mas ele minimamente
sabe trabalhar aquilo ali.

Então ele vai ter consciência
de que a hora que o cara levou

ao amigo fez. A mão.

Muito pesada. Mas vamos dar uma

num primeiro momento e botar os dois
para eles demonstrarem primeiro

qual que é a função

da mediação do design prática
falando artística também, claro,

certo?

E principalmente o caminho,
o caminho contrário que é.

Você vê o desenvolvedor, olha

qual é a outra,
Não é só o trabalho que você

entendeu, mas olha o tanto de cor,
recurso e tempo que é fundamental.

As vezes eu não tenho tempo
e olha quanto que eu vou gastar

e que é realmente necessário.

Não é aquela
desculpa eu vou falar isso aqui.

Então,
essa parte de trabalho em equipe,

um Saber qual é a função
e as dificuldades do trabalho

do outro que 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.

Agora nós vamos falar do futuro

presente
e de como é que você enxerga o papel

da inteligência artificial
hoje em tempos E as generativos

desempenhando um papel
nessas animações e transações?

A Ayla tem tem por si a tendência

de automatizar os processos
e criar padrões, certo?

Isso acho que é inevitável.

Já tá acontecendo muito
e eu acho que talvez.

E aí eu não sou futurista,
mas eu acredito

que a tendência
é a integração de apps

e em novos processos tecnológicos,
por exemplo, realidade aumentada,

assim como que vai se integrar
com a realidade aumentada.

Como que aí vai subsidiar

o Mocha Design

já tem hoje
e Ásia aí que criam animações.

Eu acho que é tudo
uma questão de agora aperfeiçoar.

Acho que com o tempo
isso vai aperfeiçoando, mas

eu acho que tem a ver com mais

a automatização de funcionalidades,

porque o monte em design

ele é,
ele é funcionalidades e emoções.

E então ele é uma.

Ele caminha entre ali,
ele transforma algo técnico

em algo humano e eu vou ser mais,

mas acho que vou ser mais preciso
agora.

Ele faz com que,
através das ferramentas dele,

com que o usuário sinta sensações.

Então

aí eu acredito que vai entrar

aí vai otimizar esses processos,

automatizar esse processo
para que as sensações sejam mais

sensacionais, quase para,
parafraseando o Djonga, que

não é um podcast, não um

podcast sobre o Hex Mocha,
mas é válido.

Grande Djonga
e então é mais sobre isso.

Como que a 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 I.A no seu dia a dia?

Taí um tema
que se você deixar uma ou duas horas

aqui falando,
deixa eu fazer um recorte.

Eu acho que a princípio assim é.

Ele tende a facilitar automatização
de alguns processos.

Perfeito.
Então ele tende de repente a

facilitar.

Depois de alguns

trabalhos um pouco mais simples,

onde você precisa de umas transições
mais, porque a inteligência,

a inteligência artificial,
na verdade ela não cria. Tá?

Ela depende
de repositórios de treinamento.

Então muitos artistas,
inclusive da área,

eles têm reclamado
que muitos trabalhos deles,

eles percebe que tem sido roubados,
assim.

Sabe aquele negócio é copia, manda,
faz igual.

Então você tem
artistas de diversos setores.

Como um artista.

E o que é bem verdade,
historicamente

falando, sempre se roubou muito.

Só que quem é roubado não gosta.

Então você tem vários ilustradores,
por exemplo, que pensa

opa, esse estilo aqui é meu
e não ganha uma vírgula.

Então a coisa precisa
passar por uma regulamentação,

mas num primeiro momento.

E também tem muita questão
assim de um certo

terrorismo momentâneo em relação
a isso,

vai roubar o seu trabalho base.

Mas então compre a sua
e aprenda com a gente.

Mas pega o pacote pago,
então entende

Se estão tentando

fazer uma venda dedicada
e até tentando fazer a sua venda,

entendeu?

Num primeiro momento, eu acho que
assim, o que você pode fazer?

Você dar de
design? Vá fazer programação.

É. Essencial.

Eu acho que tem uma coisa
que é importante também moderação.

Use com moderação,
porque a sua ferramenta é muito mais

do que um After Effects
com um lote com a sua ferramenta.

O processo criativo.

É o processo ativo.

Então quanto mais você usa.

Ah, eu
não queria usar esta metáfora,

mas é que me vem à cabeça
agora. É como se fosse uma droga.

Aí a um todo.

Eu não estou subjugando as ideias,
achando que é muito utilidade,

mas o uso excessivo
tivesse esse seu processo

criativo a depender da I.A.

Para poder criar.

E é no design, na arte como um todo,
você precisa.

Você precisa aguçar o seu processo
criativo.

Isso é se basear em referências
e influências do seu meio social.

Então busque muitas referências,
vá em museus, vá em teatro,

vá em exposições
e use com moderação,

pois se você usar com moderação,
se vai manter seu processo

criativo,
vai estimular e você vai ter todo o.

Capacidade
de oferecer o seu trabalho

da melhor maneira possível,
sem se condicionar.

Se limitar a uma ferramenta, essa.

Pode condicionar

bom também não é

mesmo Uma questão de você eficaz
e do cara que ele é designer.

Ele vai ficar de pé

se ele começar a utilizar muita
e ai 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
roupa para ir pós sentada

é o que a gente chama de inovação,

porque é a pá de inovação
que eu sempre falo.

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

que o pessoal as vezes

dar de publicidade,
de multas de peso,

Mas como é que eu vou criar
alguma coisa do nada e do nada?

Meu amigo, você vai pensar
assim Isso é uma escola de

uma escola pedagógica
que tem alguns milhares de anos.

Você primeiro
vai aprender, copiar e copiar mesmo,

só não vende,
Você vai aprender a copiar.

Aí você vai copiar, copiar, copiar.

Aí o aluno se sai 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.

Então agora todas as cópias
que você fez de diversos segmentos,

várias referência,
você vai criar o seu.

Então você vai fazer um aplicativo
para não ser 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 ali, uma coisa assim,
uma micro interação.

Eu vou pegar desse e outro recurso
de feedback, eu vou pegar desse.

Então você pegou todos,
deu uma certa adaptada

a partir do que você melhoraria.

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

Pronto, Tudo o que você consumiu,
você pegou, juntou,

transformou e criou seu.

Chama se Inovação. Nada.

Cópia é

diferente de de plágio,
É diferente de plágio.

É uma coisa que você pega,

que não é sua
para fazer como se fosse sua.

A coisa pegou o iFood aqui,
você vai lá

e faz exatamente a mesma coisa
e muda a cor.

Amigão, você nunca criando, inovou.

Se não inovou, deu essa questão
na criação calma da baixada de bola,

Pegue referências e aí
você vai ter um insight

como é que você vai ter insight
se você não tem referências?

O que ele fala.

É exatamente não reinventar o.

Problema da inteligência artificial.

E o meu medo é que ela comece

a encaixotar de mais as pessoas,
as pessoas, que fique muito.

Confortável.

Que cada trabalho que tem.

Vou ficar muito encaixotado
aqui na inteligência artificial.

Vou lá, eu faço o prompt, vai criar
é para o mercado.

Tá bom, não é assim. É um bom ponto.

E infelizmente estamos chegando
ao final deste bate papo,

Passando para falar Deus.

Já que a gente não pode ficar mais
03h00 aqui.

Tipo, o papo tá bom,
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?

Éder Caramba, cara,

eu acho que

o fortalecimento das ideias mesmo

é porque eu assim

é o que está em voga hoje, né?

E ela está não só no começo e então
ela está mudando alguns paradigmas

e eu acho que ainda
a gente tem muito para explorar.

E dentro do que a gente pensa
por aí, muita coisa pode aparecer.

Integrações e superar gente.

Então isso para mim cria
uma crítica, uma cortina de fumaça.

Eu acho que está muito aberto
e tem muita coisa nova para surgir

e eu acho isso muito bacana. Então

então acredito nisso.

Muitas integrações

e a IA conseguindo transformar
funcionalidades

que às vezes a gente fazia na unha,
melhorando o processo, converter.

O código que já está fazendo isso
hoje.

Então eu
acho que eu acredito que vai por aí

isso assim,
pensando num futuro próximo,

mas num futuro distante eu

não conseguiria prever
ou tentar prever.

Infelizmente não tenho esse,
não tenho essa

e essa qualidade de Mãe Dinah, mas

acho que.

Eu acho que aí

eu acho que vai dar muito que falar
ainda vai dando.

Pouco tempo atrás
você teve um de Psique aí,

causando um pesar
e uma fervura aí no meio, que.

Tem a ver muito com inovação,

mas isso é um assunto para outro
bate papo.

Mas com certeza eu acho que.

Que vai que vai se aprofundar
e a gente vai descobrir

muitas coisas bacanas ainda.

Coisa boa é, na sua opinião.

César

Eu vou me contrariar
só pra dar um outro ponto de vista.

Então vamos lá.

Eu acho que assim em história,
um dos meus negócios é o teu, tá?

Eu estava

fazendo faculdade de história,
tive que dar uma pausa 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
ele tem um contexto.

Mas agora eu vou me contrariar.

Eu acho que se você parar para ver,
eu conheço algumas produtoras,

inclusive o pessoal
de um dos designers freelas

que eles prestam serviço
para algum cliente e o cliente.

Ele faz questão de enfatizar

que toda aquela campanha foi feita
com ele, mesmo que não tenha sido.

Tá mesmo que não tá na moda.

Teve um desenvolvedor
e só pra ter o carimbo de novo,

olha como somos inovadores,
usamos a.

E teve um momento na história,
no século XIX,

durante a Revolução Industrial,

que a gente teve a serialização
da produção de produtos lá.

Qualquer coisa, copo ou caneca,

então, são produzidas em série,
o que facilita que muita gente tem.

E isso é um efeito bom que facilita
Todo mundo tem é mais barato,

só que assim todo mundo tem.

Isso cria um efeito contrário,
que nasce principalmente com Mores

e com Ruskin, que eram defensores
de uma cultura do artesanal.

É que você tem público,
pensa até hoje,

porque você pode perceber de repente
Ah, por que essa caneca aqui

ela custa 500 R$,
sendo que eu posso colocar

igualzinho aí em qualquer lugar
que custa 15, 10 R$.

Ela é hoje.

Ela é única.

Ela foi feita
a mão, que é o mais ou menos ali do

aquele carro inglês que ela é

feito inteiro a mão, ela é costurada
mão, ele é pintado à mão.

Então acho que num futuro médio,
vamos dizer assim,

eu acho que vai ter uma certa
tendência de algumas empresas

colocarem o selo feito manualmente
pra fugir, pra fugir.

Isso aqui não é de interesse
artificial, não faz.

Todo sentido não.

E mesmo que você esteja
se contrariando.

Contrariar assim, não existe assim
um ciclo da história.

Tá, mas é uma tendência possível
da pessoa ver e falar

não a nosso trabalho.

A nossa campanha foi feita por
pessoas,

teve ali um roteirista consagrado,
teve ali um designer consagrado.

Um programador consegue com pessoas
um trabalho muito mais humano.

Talvez não dure tanto,
mas deu certo, com certeza.

Eu acho que isso é uma tendência
a aparecer no médio prazo.

Ao curto prazo,
eu acho que vai ser essa febre e.

No fundo, as tendências,
elas estão sempre em movimento.

Elas vêm em volta.

De maneira contraditória.

Se você pegar essa dinâmica,
a gente está falando disso.

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

Exato, né?

A ideia.

Ele nasce dessa.

Maneira e aí depois se exige
uma qualificação.

Das produções.
E agora está retornando.

É um momento muito.

Só que.

São contradições, dinâmico,
são dialéticas.

Essa bagunça que virou a coisa? Não,
Mas é uma tendência.

É por isso que cria a ilusão
de que a história é cíclica, mas

é uma questão assim, de

certa forma, é previsível.

De certa forma, é loucura.

Falamos de tecnologia,
falamos de inteligência artificial,

design,
história, filosofia, render muito,

muito mais do que um podcast,
uma verdadeira aula.

E quero me despedir de vocês,
Muito obrigado!

E eu queria desse pela mão de Deus.

É uma honra para mim estar aqui

nesse videocast da FIAP
que é maravilhoso.

Já assisti vários Tá 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.

Seja um cara sensacional, fantástico
e o que eu posso dizer sobre

o fanzine é que as pessoas
que tem vontade de fazer vá fundo,

porque motion Design é você
dar movimento a uma ideia e você

é você criar algo

que vá, que vá ter vida de alguma
forma, entendeu?

Então, nada mais prazeroso
e satisfatório do que você

não finalizar
um projeto de motion design

e você ver aquele projeto
em movimento. Sim?

Então vão e faça que assim
eu sou suspeito para dar,

porque eu defendo com unhas e dentes
a minha profissão,

mas vale a pena demais.

Muito bom, muito bom César,
Foi um prazer enorme

contar com você aqui
nesse nosso podcast.

Eu agradeço
e muito obrigado aos dois pela aula,

pelo todo o pessoal da produção,
inclusive por toda a delicadeza,

toda a gentileza. Podcast
é muito bacana.

Parabéns para FIAP

por todo investimento
que faz, infraestrutura em conteúdo,

satisfação enorme daqui,
Mocho designer, Emoção e eficiência.

Agradeço novamente vocês.

Agradeço 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.