WEBVTT

00:00.000 --> 00:04.340
Imagina só, passar a semana inteira
construindo aquela landing page perfeita,

00:04.520 --> 00:09.300
sabe? Aquela de altíssima conversão para
uma campanha importantíssima da

00:09.300 --> 00:13.640
Leadlovers. O design está impecável, o
texto está afiado.

00:13.880 --> 00:15.800
O sonho de todo mundo no marketing.

00:15.980 --> 00:20.680
Exato. Aí a página vai para o ar e, sei
lá, dois dias depois, a

00:20.680 --> 00:25.000
campanha inteira é derrubada. Ou pior, a
empresa recebe uma notificação

00:25.000 --> 00:26.580
extrajudicial do nada.

00:26.820 --> 00:28.900
Nossa, o pesadelo absoluto.

00:28.900 --> 00:33.420
Sim. E tudo porque uma única imagem que
foi gerada por inteligência

00:33.420 --> 00:35.800
artificial violou direitos autorais,

00:35.920 --> 00:40.640
ou então aquela fonte super bonita que a
equipe usou, acabou vazando os dados dos

00:40.640 --> 00:41.640
visitantes.

00:41.640 --> 00:44.940
E olha, é um pesadelo cada vez mais comum
no mercado.

00:45.540 --> 00:49.880
A gente meio que se acostumou a tratar a
inteligência artificial como tipo uma

00:49.880 --> 00:51.700
máquina caça -níqueis criativa, né?

00:51.740 --> 00:53.640
Puxa a alavanca e torce para o melhor.

00:53.640 --> 00:58.360
Bem isso. Você bota o prompt lá, cruza os
dedos e torce para a tela cuspir algo

00:58.360 --> 00:59.360
bonito.

00:59.360 --> 01:03.480
Mas assim, design de alta performance não
funciona na base da sorte.

01:03.720 --> 01:04.860
Com certeza não.

01:05.120 --> 01:07.540
E é por isso que, na nossa imersão de
hoje,

01:07.880 --> 01:11.030
a gente vai dissecar o que realmente
separa uma execução visual

01:11.030 --> 01:15.460
estritamente profissional de um projeto,
digamos, amador e improvisado.

01:15.640 --> 01:16.640
Total.

01:16.640 --> 01:19.440
A nossa missão aqui é organizar esse caos
criativo.

01:19.660 --> 01:20.660
Isso aí.

01:20.660 --> 01:25.440
O foco é em quem publica landing pages, e
-mails e criativos toda semana

01:25.440 --> 01:29.590
e aqui eu estou falando super diretamente
para o time de marketing e design da Lead

01:29.590 --> 01:30.590
Lovers

01:30.590 --> 01:32.890
com as ferramentas para dominar essa
execução.

01:32.890 --> 01:36.640
As nossas fontes deixam muito claro que o
segredo é a coerência.

01:36.900 --> 01:38.520
Coerência e governança técnica.

01:38.860 --> 01:42.320
Sem isso, a máquina preenche as lacunas
com padrões genéricos.

01:42.440 --> 01:46.590
E para começar a arrumar a casa, a gente
tem que olhar para os tijolos mais básicos

01:46.590 --> 01:47.590
de uma página,

01:47.590 --> 01:49.160
que são os ícones e as cores.

01:49.420 --> 01:51.100
O alicerce puro, né?

01:51.220 --> 01:52.280
O alicerce de tudo.

01:52.280 --> 01:56.720
Se a fundação for fraca, a página inteira
desmorona visualmente.

01:57.120 --> 02:00.720
O material que a gente está analisando
hoje estabelece uma regra de ouro

02:00.720 --> 02:01.720
implacável.

02:01.720 --> 02:02.720
Qual seria?

02:02.720 --> 02:06.160
Usar apenas uma única família de ícones
por projeto.

02:06.360 --> 02:10.960
E as cores devem vir obrigatoriamente de
variáveis, que são os famosos tokens.

02:11.520 --> 02:14.580
Tá, mas vamos ser bem práticos por um
segundo.

02:14.940 --> 02:19.600
Como alguém que cria campanhas, eu sei que
se o prazo está apertado em uma sexta

02:19.600 --> 02:20.600
-feira tarde,

02:20.600 --> 02:24.460
É muito mais rápido pedir para a IA gerar
um ícone de sino bonitinho.

02:24.600 --> 02:26.140
É a tentação de todo designer.

02:26.380 --> 02:27.380
Exato.

02:27.380 --> 02:31.860
Ou então jogar lá um código hexadecimal de
cinza escuro direto no CSS

02:31.860 --> 02:32.860
e pronto.

02:33.160 --> 02:36.480
Você está me dizendo que esse atalho
rápido vai quebrar a página?

02:36.600 --> 02:39.880
Vai quebrar a página e pior a experiência
do usuário.

02:40.300 --> 02:42.400
Primeiro sobre a IA gerando ícones.

02:42.740 --> 02:44.100
A máquina odeia o vazio.

02:44.240 --> 02:46.240
Se você pede um ícone isolado,

02:46.240 --> 02:50.860
Cada pedido vai gerar um traço, um ângulo
e uma proporção completamente diferentes

02:50.860 --> 02:52.440
Minimalista estilo cartoon

02:52.440 --> 02:55.620
O ritmo visual é destruído na hora

02:55.620 --> 03:00.340
É tipo vestir um terno chiquérrimo com
tênis de corrida fluorescente

03:00.340 --> 03:03.500
Grita falta de planejamento de muito longe

03:03.500 --> 03:04.800
Perfeita analogia

03:04.800 --> 03:09.680
E é por isso que o uso de bibliotecas de
ícones consistentes é vital

03:09.680 --> 03:13.360
A referência primária hoje é a biblioteca
Lucid

03:14.100 --> 03:17.720
Especificamente a versão 1 .31 .0

03:17.720 --> 03:21.300
Lançada em 9 de agosto de 2026

03:21.300 --> 03:22.520
Certo

03:22.520 --> 03:23.520
Isso

03:23.520 --> 03:26.520
E ela roda sob a licença ISC

03:26.520 --> 03:30.540
Só que, e aqui tem um detalhe de segurança
jurídica enorme

03:30.540 --> 03:34.440
A gente precisa falar sobre a versão 1 .0
da Lucid

03:34.440 --> 03:37.700
Que saiu lá em 23 de março de 2026

03:37.700 --> 03:42.120
O que rolou nessa atualização que a galera
precisa ficar de olho?

03:42.120 --> 03:46.380
Os desenvolvedores removeram absolutamente
todos os ícones de marcas.

03:46.580 --> 03:47.880
Peraí, todos?

03:48.260 --> 03:50.760
Marcas de pagamento, tudo sumiu da
biblioteca.

03:50.960 --> 03:53.440
Eles queriam evitar qualquer problema de
licença.

03:53.640 --> 03:54.640
Caramba!

03:54.960 --> 03:59.620
Ou seja, se a página da Leadlovers
puxasse o ícone do Instagram direto dessa

03:59.620 --> 04:00.620
biblioteca

04:00.620 --> 04:03.620
e houvesse uma atualização no servidor sem
ninguém perceber,

04:03.940 --> 04:07.240
o rodapé da landing page ficaria todo
esburacado.

04:07.400 --> 04:08.980
Sim, simplesmente sumiria.

04:09.280 --> 04:10.560
É um risco invisível.

04:10.560 --> 04:14.920
E já que a gente está falando de problemas
no código, vamos voltar naquele seu atalho

04:14.920 --> 04:17.400
de jogar a cor cinza escuro direto no
ícone.

04:17.500 --> 04:19.180
Ah, sim. O que acontece ali?

04:19.380 --> 04:24.020
Se o sistema do visitante estiver no modo
noturno, a tela vai ficar escura e o seu

04:24.020 --> 04:25.880
ícone cinza escuro desaparece.

04:26.060 --> 04:28.240
É o desastre do preto no preto.

04:28.480 --> 04:33.200
Por isso que a cor tem que vir de um
token, tipo var, abre parênteses,

04:33.420 --> 04:36.140
traço traço color, traço icon, fecha
parênteses.

04:36.580 --> 04:38.940
Entendi. Porque o token é dinâmico.

04:38.940 --> 04:43.260
Exato. Ele diz para o navegador adaptar a
cor dependendo do fundo.

04:43.480 --> 04:45.400
Faz todo sentido mecânico.

04:45.560 --> 04:50.360
E tem um detalhe de acessibilidade física
nessa história de botões que me

04:50.360 --> 04:51.680
deixou super intrigada.

04:52.120 --> 04:56.170
Mas não adianta nada o botão ser lindo se a
pessoa não consegue tocar nele na tela do

04:56.170 --> 04:57.170
celular.

04:57.170 --> 04:59.570
A acessibilidade não é opcional de jeito
nenhum.

04:59.940 --> 05:04.620
Ícones puramente decorativos têm que
receber a tag aria-hidden igual a true.

05:05.100 --> 05:07.200
Mas o ponto principal é o tamanho.

05:07.380 --> 05:08.680
O alvo de toque, né?

05:08.680 --> 05:13.320
Isso. O alvo de toque do botão precisa
ter, no mínimo, 44 por

05:13.320 --> 05:14.460
44 pixels.

05:14.740 --> 05:16.260
Que é o critério AAA, certo?

05:16.300 --> 05:17.300
Perfeitamente.

05:17.300 --> 05:18.820
Da WCAG 2 .2.

05:18.980 --> 05:23.580
Perfeitamente. Muita gente se contenta com
o nível AA, que exige só 24 por 24

05:23.580 --> 05:24.580
pixels.

05:24.580 --> 05:28.700
Mas mirar no AAA é ter empatia de verdade
com quem está usando o celular,

05:28.720 --> 05:31.060
andando na rua ou num ônibus balançando.

05:31.200 --> 05:32.200
Com certeza.

05:32.520 --> 05:36.400
Então, assim, se para os elementos
pequenos, tipo ícones,

05:36.400 --> 05:38.900
a gente já precisa desse controle todo,

05:39.100 --> 05:42.640
eu imagino que o risco se multiplique
horrores

05:42.640 --> 05:44.880
quando a gente passa para elementos
maiores.

05:45.200 --> 05:47.520
Ah, vira outro patamar de complexidade.

05:47.620 --> 05:51.440
É, tipo ilustrações de terceiros e
tipografia.

05:52.000 --> 05:54.320
Vamos entrar na nossa segunda sessão aqui.

05:54.600 --> 05:55.600
Bora.

05:55.600 --> 05:59.220
Esse segundo pilar é focado na auditoria
de licenças.

05:59.480 --> 06:01.960
Tem muito perigo oculto naquelas
bibliotecas

06:01.960 --> 06:04.360
que todo mundo acha que são liberadas para
tudo.

06:04.360 --> 06:08.860
As licenças parecem um campo minado mesmo.
Lendo as fontes, eu fiquei

06:08.860 --> 06:10.320
chocado com as variações.

06:10.640 --> 06:13.090
Pois é. Me dá um exemplo que te chamou a
atenção.

06:13.300 --> 06:18.000
O unDraw, por exemplo. Ela é super famosa,
permite uso comercial, mas

06:18.000 --> 06:22.260
proíbe expressamente treinar modelos de
inteligência artificial com os vetores

06:22.260 --> 06:23.260
deles.

06:23.260 --> 06:25.320
Sim, é uma cláusula fortíssima.

06:25.440 --> 06:30.440
Aí você pega o Storyset e ela exige
crédito na página se o uso

06:30.440 --> 06:31.440
for gratuito.

06:31.440 --> 06:35.720
Já o Humaaans é domínio público puro, licença

06:35.720 --> 06:36.720
CC0.

06:36.780 --> 06:41.340
E a Dice Bear, que a galera adora para os
avatares, tem a biblioteca livre,

06:41.600 --> 06:46.520
mas cada estilo de desenho lá dentro exige
uma licença diferente dependendo do

06:46.520 --> 06:47.520
artista.

06:47.520 --> 06:48.520
É uma loucura.

06:48.520 --> 06:53.160
A lição de ouro para o time é ler a
licença direto na fonte primária antes de

06:53.160 --> 06:54.160
adotar.

06:54.160 --> 06:58.020
Mas olha, o risco real de vazamento de
dados não está nas ilustrações.

06:58.300 --> 06:59.680
Não? Está onde, então?

06:59.860 --> 07:01.200
Na tipografia.

07:01.940 --> 07:03.960
O perigo do Google Fonts.

07:04.060 --> 07:06.360
Ah, essa parte é de cair o queixo.

07:06.600 --> 07:11.140
A orientação do guia é servir as fontes a
partir do próprio site,

07:11.340 --> 07:15.820
o chamado self -hosting, usando font
source com fontes variáveis.

07:16.060 --> 07:19.960
Sim, isso elimina aquela requisição
externa que o navegador faz para o Google.

07:19.960 --> 07:22.640
Mas explica para a galera o porquê disso.

07:22.880 --> 07:25.760
É como convidar um estranho para a sua
sala de estar

07:25.760 --> 07:28.740
só para ele segurar um livro para suas
visitas lerem

07:28.740 --> 07:32.400
e ele ainda fica lá na porta anotando quem
entra e quem sai, né?

07:32.740 --> 07:34.840
É a melhor analogia possível.

07:35.120 --> 07:39.940
Porque quando o visitante entra na página
e o texto puxa a fonte lá do Google,

07:40.160 --> 07:44.020
o IP desse visitante vai junto na
requisição para o servidor deles.

07:44.380 --> 07:46.440
E o IP é um dado pessoal.

07:46.720 --> 07:50.120
E isso deu um problema jurídico gigante na
Alemanha, não foi?

07:50.300 --> 07:55.120
Gigante. Um tribunal de Munique condenou
um site exatamente por isso.

07:55.120 --> 08:00.060
Foi o processo 3, letra O, 17493, barra

08:00.060 --> 08:01.060
20.

08:01.060 --> 08:02.060
Nossa!

08:02.060 --> 08:03.940
Decidido lá em 20 de janeiro de 2022.

08:04.420 --> 08:09.200
O juiz disse que enviar o IP para o Google
sem consentimento prévio do usuário era

08:09.200 --> 08:10.200
ilegal.

08:10.520 --> 08:14.740
E trazendo aqui para o Brasil, a nossa
LGPD e a própria ANPD

08:14.740 --> 08:17.820
consideram o IP um dado pessoal super
sensível.

08:17.960 --> 08:22.460
Ou seja, fazer o self -hosting não é só um
detalhe de performance, é

08:22.460 --> 08:25.020
proteção jurídica pura para Leadlovers.

08:25.610 --> 08:29.820
Mas falando em performance, eliminar o
Google Fonts tira aquele atraso de conexão

08:29.820 --> 08:30.820
externa, né?

08:30.880 --> 08:34.860
Exato. Elimina a latência de DNS, fica
muito mais rápido.

08:35.340 --> 08:38.500
Bom, e sobre os vetores em si, os artigos
SVG,

08:38.920 --> 08:43.060
teve uma mudança recente na SVGO que afeta
como a gente lida com ele, certo?

08:43.280 --> 08:47.620
Sim, a ferramenta SVGO versão 4 .0 .0,

08:47.780 --> 08:50.780
que saiu em 21 de junho de 2025.

08:51.180 --> 08:53.280
Eles mudaram uma regra clássica.

08:53.440 --> 08:54.840
O que eles pararam de fazer?

08:55.360 --> 08:58.160
desabilitaram a remoção do atributo
viewBox por padrão.

08:58.280 --> 08:59.430
Mas por que isso é bom?

08:59.520 --> 09:03.470
Porque quando a ferramenta arrancava o
viewBox para tentar salvar uns bytes de

09:03.470 --> 09:04.470
peso,

09:04.470 --> 09:06.270
a escalabilidade da imagem quebrava.

09:06.270 --> 09:10.200
O vetor não sabia mais como se comportar
em telas de tamanhos diferentes e

09:10.200 --> 09:11.240
distorcia tudo.

09:11.500 --> 09:12.500
Ah, entendi.

09:12.680 --> 09:17.680
Bom, hospedar ativos localmente protege o
usuário, melhora

09:17.680 --> 09:18.680
o carregamento,

09:18.880 --> 09:22.280
mas as landing pages de hoje não são
estáticas de jeito nenhum, né?

09:22.280 --> 09:25.660
Não, elas têm que se mover para engajar
quem está lendo.

09:25.920 --> 09:30.740
Pois é, e controlar esse movimento com
empatia é a nossa terceira frente de

09:30.740 --> 09:31.740
análise de hoje.

09:31.920 --> 09:34.360
Vamos falar sobre a escada do movimento.

09:34.680 --> 09:36.200
Esse conceito é fantástico.

09:36.440 --> 09:39.880
É uma hierarquia de quatro degraus para as
bibliotecas de animação.

09:40.080 --> 09:41.420
Como são esses degraus?

09:41.620 --> 09:45.640
O primeiro degrau é o CSS puro, super leve
e resolve o básico.

09:46.100 --> 09:49.320
O segundo degrau são as APIs nativas do
navegador.

09:49.520 --> 09:51.870
Tá, e se a gente precisar de mais
complexidade?

09:51.870 --> 09:56.480
Aí entra o terceiro degrau, que é a
Biblioteca Motion, aquela antiga

09:56.480 --> 10:00.840
Framer Motion, que na versão 13 .1 .0 de
10 de agosto de

10:00.840 --> 10:03.060
2026 ficou sensacional.

10:03.220 --> 10:06.520
E no topo, o quarto degrau, o GSAP.

10:06.780 --> 10:11.440
Ah, o todo-poderoso GSAP, a versão 3

10:11.440 --> 10:16.200
.15 .0, que agora é 100 % gratuita desde
que a Webflow comprou a

10:16.200 --> 10:17.200
empresa.

10:17.200 --> 10:18.200
Exatamente.

10:18.200 --> 10:22.080
Mas aí eu te pergunto, se o GSAP agora é
totalmente gratuito,

10:22.220 --> 10:26.220
por que eu não uso logo o mais poderoso
para animar tudo na página e poupa o meu

10:26.220 --> 10:27.220
tempo?

10:27.220 --> 10:30.920
Porque usar o GSAP para fazer um simples
efeito de hover num botão

10:30.920 --> 10:35.060
é a mesma coisa que alugar um trator para
abrir a porta de um armário da cozinha.

10:35.260 --> 10:36.600
Um exagero gigante.

10:36.680 --> 10:40.340
Total. Encarece o peso da página sem
nenhuma necessidade.

10:40.620 --> 10:45.400
A regra de ouro da performance na animação
é animar apenas as propriedades transform

10:45.400 --> 10:46.520
e opacity.

10:46.520 --> 10:48.080
Por que só essas duas?

10:48.420 --> 10:53.060
Porque elas são processadas direto na
etapa de composição do navegador, pela

10:53.060 --> 10:54.060
placa de vídeo.

10:54.200 --> 10:58.420
Se você tenta animar a altura de uma
caixa, o navegador tem que recalcular a

10:58.420 --> 11:00.100
página inteira a cada frame.

11:00.400 --> 11:03.000
Nossa, aí o celular da pessoa até
esquenta.

11:03.240 --> 11:04.960
Esquenta e a tela engasga.

11:05.280 --> 11:09.540
O nosso objetivo aqui é manter a métrica
do INP, o Core Web Vitals, de

11:09.540 --> 11:13.160
interatividade, sempre em 200
milissegundos ou menos.

11:13.160 --> 11:17.920
E olha, além da performance da máquina,
tem um impacto físico no

11:17.920 --> 11:18.920
usuário.

11:18.920 --> 11:22.960
O guia bate muito na tecla de respeitar o
Prefers Reduced Motion, né?

11:23.140 --> 11:24.680
Bate pesado e com razão.

11:25.260 --> 11:28.500
Animação excessiva faz as pessoas passarem
mal de verdade.

11:28.680 --> 11:31.860
Eu achei aquele estudo que eles citam
assustador.

11:32.040 --> 11:34.480
O do Agrawal e outros pesquisadores?

11:34.740 --> 11:37.140
Sim, publicado no Archives of Internal
Medicine.

11:37.240 --> 11:40.500
No dia 25 de maio de 2009, exato.

11:40.500 --> 11:44.780
Eles descobriram que 35 ,4 % dos adultos

11:44.780 --> 11:49.460
americanos com 40 anos ou mais tinham
alguma disfunção vestibular.

11:49.600 --> 11:51.300
Mais de um terço da população.

11:51.460 --> 11:52.480
É gente demais.

11:52.780 --> 11:57.480
Se a página tem coisa voando para todo
lado, efeito de paralaxe extremo,

11:57.680 --> 11:59.780
essa galera vai sentir náusea física.

12:00.160 --> 12:01.160
Tontura mesmo.

12:01.180 --> 12:05.860
Então, respeitar a preferência de redução
de movimento do sistema operacional da

12:05.860 --> 12:08.000
pessoa é obrigatório.

12:08.320 --> 12:10.420
É questão de saúde, não de estética.

12:10.500 --> 12:15.400
Bom, a escada da animação basicamente nos
ensina a não usar bazuca para

12:15.400 --> 12:16.400
matar mosca.

12:16.460 --> 12:21.360
Mas falando em ferramenta poderosa que
está em todo lugar agora, vamos encarar o

12:21.360 --> 12:22.360
elefante na sala.

12:22.540 --> 12:27.480
Chegou a hora, a quarta frente da nossa
imersão, geração de imagens

12:27.480 --> 12:28.880
por inteligência artificial.

12:29.100 --> 12:31.650
É aqui que a gente precisa colocar a casa
em ordem.

12:31.800 --> 12:36.180
O material traz uma ordem cronológica e
negociável para o time seguir.

12:36.440 --> 12:40.400
Primeiro direito, depois a coerência e,
por último, o peso.

12:40.500 --> 12:45.080
Isso aí. O direito de imagem tem que ser
resolvido antes do pixel sequer ser

12:45.080 --> 12:46.080
exportado.

12:46.080 --> 12:49.900
E vamos lembrar quem está escutando a
gente que as máquinas não são autoras.

12:50.200 --> 12:54.860
Não são. Tem um caso fortíssimo nos
Estados Unidos que define isso, o caso

12:54.860 --> 12:56.280
Taylor vs. Perlmutter.

12:56.540 --> 13:01.480
Isso. Decidido em 18 de março de 2025 e

13:01.480 --> 13:06.000
com recurso negado lá na Suprema Corte em
2 de março de 2026.

13:06.000 --> 13:10.520
Essa decisão deixou cristalino que
prompts isolados não

13:10.520 --> 13:12.900
garantem direitos autorais para quem
digitou.

13:13.200 --> 13:17.820
O U .S. Copyright Office, no relatório de
29 de janeiro de 2025,

13:18.380 --> 13:19.500
já tinha avisado isso.

13:19.780 --> 13:22.520
Tem que haver modificação criativa humana
na imagem.

13:22.720 --> 13:26.660
O que faz sentido, né? Se a gente pensar
na lei brasileira, a Lei 9

13:26.660 --> 13:28.640
.610, de 1998,

13:29.300 --> 13:33.140
define claramente que apenas pessoas
físicas são autoras.

13:33.300 --> 13:34.300
Exato.

13:34.300 --> 13:38.360
Mas sabe, usar um prompt longo no Mid
Journey e achar que você é dono da arte é

13:38.360 --> 13:39.960
muito engraçado pra mim.

13:40.200 --> 13:44.020
É como ir numa lanchonete, pedir um lanche
no balcão, falando

13:44.020 --> 13:48.860
Ah, eu quero sem picles, com molho extra,
e de repente achar que agora você é o

13:48.860 --> 13:50.780
dono da receita secreta do lugar.

13:52.120 --> 13:56.280
É bem isso. O esforço de pedir não te faz
dono do preparo.

13:56.460 --> 13:59.640
E a gravidade disso pra Leadlovers é
imensa.

13:59.640 --> 14:03.760
Uma campanha inteira pode ser tirada do ar
se o time não seguir as regras de

14:03.760 --> 14:05.360
licenciamento das plataformas.

14:05.520 --> 14:10.480
E falando nelas, os termos variam
bizarramente nesse ano de 2026.

14:11.200 --> 14:12.660
Variam. Muito.

14:12.980 --> 14:17.520
A OpenAI e o Google Cloud até oferecem
aquela indenização de propriedade

14:17.520 --> 14:19.820
intelectual para clientes do plano
Enterprise,

14:20.080 --> 14:22.800
mas sob regras extremamente estritas.

14:22.980 --> 14:27.600
Se você modificar a saída ou desligar um
filtrozinho de segurança deles, já perde a

14:27.600 --> 14:28.600
proteção.

14:28.600 --> 14:29.600
E o Midjourney?

14:29.600 --> 14:33.260
Os termos do Midjourney, atualizados em 27
de maio de 2026,

14:33.540 --> 14:36.840
exigem que empresas faturando mais de um
milhão de dólares por ano

14:36.840 --> 14:39.560
tenham o plano PRO para poder usar as
imagens.

14:39.700 --> 14:41.400
É muito detalhe jurídico.

14:41.600 --> 14:44.320
Sem contar a exigência de transparência.

14:44.620 --> 14:49.140
O projeto de lei 2338 de 2023 aqui no
Brasil,

14:49.360 --> 14:54.220
que já tinha passado pelo Senado e estava
aguardando parecer na Câmara em

14:54.220 --> 14:56.960
17 de junho de 2026.

14:56.960 --> 15:01.300
Isso. Ele vai exigir a marcação clara de
qualquer conteúdo

15:01.300 --> 15:02.300
sintético.

15:02.300 --> 15:04.300
E o mercado meio que já se adiantou, né?

15:04.400 --> 15:08.160
Sim, o pessoal de tecnologia já adota o
padrão C2PA.

15:08.380 --> 15:13.300
A versão 2 .3 dele, de 5 de janeiro de
2026, embutiu

15:13.300 --> 15:16.240
metadados de procedência dentro do arquivo
da imagem.

15:16.500 --> 15:18.160
Incrível como o cerco fechou.

15:18.320 --> 15:22.260
E tem uma regra de ouro prática para IA
que a gente não pode pular.

15:22.920 --> 15:25.180
Texto gerado dentro da imagem.

15:25.180 --> 15:27.260
Nunca, sob nenhuma hipótese.

15:27.400 --> 15:28.800
Por que isso é tão proibido?

15:28.860 --> 15:32.380
Primeiro porque a IA erra a grafia e cria
coisas bizarras.

15:32.660 --> 15:34.920
E segundo, destrói a acessibilidade.

15:35.400 --> 15:39.520
Leitor de tela não lê texto grudado num
JPG gerado por máquina.

15:40.100 --> 15:42.400
Usem a IA para gerar fundos e texturas.

15:42.640 --> 15:47.040
O texto da campanha e a identidade da
marca tem que ser vetor puro sobreposto

15:47.040 --> 15:48.040
via código.

15:48.040 --> 15:49.040
Efeito.

15:49.040 --> 15:53.780
Bom, garantimos o direito de uso,
garantimos a coerência do

15:53.780 --> 15:54.780
estilo.

15:54.780 --> 15:59.240
agora a gente esbarra no último pilar, que
é o peso gigantesco dessas

15:59.240 --> 16:00.440
imagens geradas.

16:00.660 --> 16:05.520
E isso leva a gente direto para a quinta e
última frente da nossa imersão de hoje,

16:05.720 --> 16:08.840
a otimização final e os formatos de
imagem.

16:09.060 --> 16:12.660
As imagens de IA saem muito pesadas das
plataformas, né?

16:12.820 --> 16:16.820
Se você jogar aquilo cru no servidor, vai
asfixiar o site.

16:17.000 --> 16:20.800
Com certeza. A realidade atual da internet
é pesada.

16:20.800 --> 16:25.300
O Web Almanac, de 2025, com dados ali de
julho de

16:25.300 --> 16:30.100
2025, mostrou que a página inicial mediana
na web pesava 2

16:30.100 --> 16:32.940
.862 kilobytes no desktop.

16:33.360 --> 16:34.360
E no celular?

16:34.420 --> 16:36.720
2 .559 kilobytes.

16:37.080 --> 16:39.500
E sabe quem era o grande vilão desse peso
todo?

16:39.700 --> 16:40.700
As imagens.

16:40.820 --> 16:41.820
Bingo.

16:41.900 --> 16:45.000
Respondendo por 1 .058 kilobytes do total.

16:45.520 --> 16:47.780
É muita coisa para a rede móvel processar.

16:47.860 --> 16:50.240
Então, como o time resolve isso na
prática?

16:50.240 --> 16:53.660
Quais formatos a gente tem que exigir na
esteira de produção?

16:54.100 --> 16:55.960
Esquece o JPG tradicional.

16:56.320 --> 16:59.060
O formato de ponta hoje é o AVIF.

16:59.420 --> 17:04.360
Ele alcançou aquele status de baseline
amplamente disponível no dia 25

17:04.360 --> 17:05.400
de julho de 2026.

17:06.120 --> 17:08.300
E se o projeto precisar de uma
alternativa?

17:08.580 --> 17:13.440
Aí o WebP é a salvação, já que ele é
amplamente suportado desde 16

17:13.440 --> 17:14.840
de março de 2023.

17:15.420 --> 17:18.540
Ah, e um aviso sobre o JPEG XL.

17:18.760 --> 17:19.760
O que tem ele?

17:19.760 --> 17:20.900
Muito hype.

17:21.120 --> 17:22.120
Muito hype.

17:22.120 --> 17:26.020
Mas o decodificador dele no Chrome ainda
depende do usuário

17:26.020 --> 17:30.200
entrar nas configurações do navegador e
ativar uma flag manualmente.

17:30.560 --> 17:33.060
Não dá para confiar nisso para campanhas
de massa.

17:33.260 --> 17:34.260
Entendido.

17:34.260 --> 17:36.220
AVIF e WebP são os caminhos.

17:36.420 --> 17:39.570
Agora, eu estava muito ansiosa para chegar
nessa parte do guia.

17:39.640 --> 17:43.660
O desmentido do maior mito do nosso
mercado.

17:43.820 --> 17:46.020
O clássico zumbi da internet.

17:46.020 --> 17:50.820
Sério, todo mundo que trampa com marketing
já usou aquele slide famoso

17:50.820 --> 17:52.260
em alguma apresentação.

17:52.420 --> 17:57.060
Aquele que diz, 53 % dos usuários
abandonam a página

17:57.060 --> 17:59.200
após 3 segundos de lentidão.

17:59.400 --> 18:01.420
O terror de todo gerente de projeto.

18:01.620 --> 18:06.520
Pois é, mas a gente está baseando o medo
das nossas campanhas num dado

18:06.520 --> 18:07.680
super antigo, não é?

18:07.800 --> 18:12.660
Super. Esse dado vem de um estudo lá do
Google com a DoubleClick de março de

18:12.660 --> 18:13.660
2016.

18:13.660 --> 18:17.640
A página original do estudo nem existe
mais, sumiu da internet.

18:18.280 --> 18:23.000
Citar isso em 2026, numa reunião
executiva, é sinceramente

18:23.000 --> 18:24.000
antiprofissional.

18:24.300 --> 18:27.000
Chocante! Dez anos repassando o mesmo
slide.

18:27.340 --> 18:31.360
Então, qual é a métrica atual e real que a
gente tem que focar na hora de vender

18:31.360 --> 18:32.720
otimização para o chefe?

18:32.800 --> 18:36.500
O estudo definitivo atual é o da Deloitte
de 2020.

18:36.500 --> 18:41.480
Eles provaram com dados reais de varejo
que melhorar a velocidade mobile

18:41.480 --> 18:46.240
em apenas 0 ,1 segundo aumenta a conversão
geral em 8

18:46.240 --> 18:48.000
,4%.

18:48.000 --> 18:52.800
8 ,4 % de grana no caixa por um

18:52.800 --> 18:53.800
décimo de segundo.

18:54.240 --> 18:58.740
Isso é um argumento imbatível para
justificar tempo gasto otimizando a

18:58.740 --> 18:59.740
página.

18:59.740 --> 19:00.790
Totalmente imbatível.

19:00.790 --> 19:04.580
E para conseguir esses milissegundos
preciosos, o guia dá as regras de

19:04.580 --> 19:05.780
implementação do código.

19:05.780 --> 19:08.400
O uso da tag picture, por exemplo.

19:08.540 --> 19:10.240
Isso, sempre usar a tag picture.

19:10.400 --> 19:14.860
E nunca esquecer de declarar
explicitamente o width e o height,

19:15.080 --> 19:17.660
ou seja, a largura e a altura da imagem no
HTML.

19:18.060 --> 19:19.860
Para evitar aquele pulo na tela, né?

19:19.860 --> 19:22.240
O cumulative layout shift.

19:22.620 --> 19:23.780
Exato, o CLS.

19:24.400 --> 19:28.760
Se você declara o tamanho, o navegador já
reserva o espaço vazio enquanto a imagem

19:28.760 --> 19:29.760
carrega.

19:29.760 --> 19:33.860
E a página não empurra o botão de compra
lá para baixo na hora que o cliente vai

19:33.860 --> 19:34.860
clicar.

19:34.860 --> 19:38.000
E para a imagem principal, o Hero Banner
lá do topo...

19:38.000 --> 19:42.940
Para ela, a regra é aplicar Fat Priority
igual a High, para forçar

19:42.940 --> 19:43.940
o download rápido.

19:44.100 --> 19:49.000
E, pelo amor de Deus, é terminantemente
proibido colocar o atributo loading

19:49.000 --> 19:51.100
igual a lazy nessa primeira imagem.

19:51.360 --> 19:56.240
Se você atrasar o carregamento do topo da
página, você destrói o LCP do Core

19:56.240 --> 19:57.240
Web Vitals.

19:57.320 --> 20:02.200
Sensacional. Olha, revisando tudo que a
gente cobriu hoje, eu fico muito animada.

20:02.200 --> 20:06.920
Esse material, prova por A mais B, que
produzir material criativo com IA no time

20:06.920 --> 20:10.300
da Leadlovers não é sobre fazer mais
rápido e de qualquer jeito.

20:10.420 --> 20:11.420
De jeito nenhum.

20:11.420 --> 20:15.500
É sobre alcançar um nível de precisão
técnica e jurídica que,

20:15.560 --> 20:18.260
sinceramente, era quase impossível antes.

20:18.600 --> 20:20.720
É engenharia visual pura.

20:20.800 --> 20:21.800
Falou tudo.

20:21.800 --> 20:25.400
E eu queria deixar um pensamento
provocativo final para a galera do time

20:25.400 --> 20:26.650
que está ouvindo a gente.

20:26.650 --> 20:29.400
Algo para levar para a próxima reunião de
planejamento.

20:29.400 --> 20:30.400
Manda ver.

20:30.400 --> 20:34.100
Conectando toda essa técnica com aquele
padrão C2PA que a gente mencionou.

20:34.100 --> 20:38.260
E se, no futuro, quase imediato, os
próprios navegadores passarem a

20:38.260 --> 20:39.260
bloquear

20:39.260 --> 20:43.860
ou então botar um grande alerta vermelho
de perigo em qualquer imagem de uma

20:43.860 --> 20:44.860
landing page

20:44.860 --> 20:48.220
que não tenha procedência criptográfica
declarada no arquivo.

20:48.340 --> 20:51.390
Nossa, é tipo um selo de segurança
obrigatório para a imagem.

20:51.480 --> 20:52.480
Exatamente.

20:52.480 --> 20:56.700
A era do simplesmente baixar um JPG
qualquer no Google e subir no site acabou

20:56.700 --> 20:57.700
de vez.

20:57.700 --> 21:01.440
A governança do ativo visual agora é tão
crítica, tão vital,

21:01.660 --> 21:04.440
quanto a segurança do código que exibe
esse ativo.

21:04.580 --> 21:05.600
Um baita aviso.

21:05.700 --> 21:07.400
Fica o convite para o time pensar.

21:07.620 --> 21:11.860
Os nossos processos de aprovação interna
já estão prontos para essa nova web

21:11.860 --> 21:15.940
de passaportes digitais obrigatórios para
cada imagem de IA gerada.

21:16.080 --> 21:18.080
É a pergunta de um milhão de dólares.

21:18.340 --> 21:21.340
Uma reflexão perfeita para a gente fechar
a nossa análise.

21:21.460 --> 21:23.910
Valeu por destrinchar esse guia com a
gente hoje.

21:23.910 --> 21:25.810
Eu que agradeço. Foi excelente o papo.

21:25.810 --> 21:29.810
E para o time que acompanhou, bora colocar
essa governança em prática e elevar o

21:29.810 --> 21:30.860
nível das páginas.

21:30.980 --> 21:31.980
Até a próxima!