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