WEBVTT

00:00.000 --> 00:04.050
Fala, time da Leadlovers! Sejam muito bem
-vindos a esta nossa videoaula prática.

00:04.120 --> 00:08.020
Olha só, a gente sabe que o que separa uma
interface realmente profissional de

00:08.020 --> 00:12.020
mamadora não é o tamanho do orçamento,
não. Sabe o que é? É a coerência. É bater

00:12.020 --> 00:16.080
o olho e ver ícones com o mesmo peso de
traço, ilustrações que conversam na mesma

00:16.080 --> 00:20.760
paleta e movimentos com a mesma duração em
toda a santa peça. Como a nossa equipe

00:20.760 --> 00:24.660
publica campanhas novas toda semana e,
ainda por cima, usando agentes de IA no

00:24.660 --> 00:28.580
meio do processo, as nossas regras
precisam ser absolutamente cristalinas.

00:28.580 --> 00:32.960
Então, o nosso objetivo de hoje é dominar
juntos o guia de execução visual do portal

00:32.960 --> 00:35.160
Leadlovers para 2026. Bora lá?

00:35.400 --> 00:40.220
Para organizar a casa, a gente vai passar
por cinco frentes super táticas hoje.

00:40.420 --> 00:45.040
Vamos falar de ícones e acessibilidade, as
armadilhas das licenças e

00:45.040 --> 00:47.320
fontes, a nossa nova escada de animação,

00:47.720 --> 00:52.500
os limites legais e atuais para a geração
de imagens por IA e, por fim, como lidar

00:52.500 --> 00:54.100
com formatos e performance.

00:54.100 --> 00:57.840
Número 1. Ícones. Coerência e

00:57.840 --> 00:59.460
acessibilidade.

00:59.760 --> 01:04.360
O erro visual mais fácil de identificar de
longe é, sem dúvida, a bagunça dos ícones.

01:04.780 --> 01:06.880
Desse lado, a gente tem o cenário do caos.

01:06.880 --> 01:10.980
Misturar várias bibliotecas diferentes e
chumbar a cor ali direto no código

01:10.980 --> 01:11.980
hexadecimal.

01:11.980 --> 01:14.660
Mas o nosso padrão para 2026 é outro.

01:14.840 --> 01:18.980
A regra agora é usar uma única família de
ícones por projeto, a Lucide,

01:19.180 --> 01:23.240
e amarrar as cores estritamente por
tokens, como a variável Color Icon.

01:23.240 --> 01:27.240
Por que isso importa? Porque se a cor for
fixada direto no código, sabe quando o

01:27.240 --> 01:30.240
celular muda para o modo escuro e o ícone
simplesmente some?

01:30.240 --> 01:33.590
Pois é, o token resolve esse problema
automaticamente para a gente.

01:33.880 --> 01:37.800
Agora, o que é realmente interessante
sobre a Lucide são os dados bem precisos

01:37.800 --> 01:39.200
dessas últimas atualizações.

01:39.220 --> 01:42.980
A versão atual, que saiu agora em 9 de
agosto de 2026, traz melhorias

01:42.980 --> 01:46.830
fantásticas, incluindo aquele atributo
aria-hidden já configurado por padrão.

01:46.830 --> 01:50.940
Outro aviso super importante para a galera
de design e front -end, os ícones de

01:50.940 --> 01:51.940
marcas

01:51.940 --> 01:56.000
famosas foram removidos da Lucide lá na
versão 1 .0 .1 em 23 de março de

01:56.000 --> 01:57.000
2026.

01:57.000 --> 01:59.500
Então, precisou colocar o logo de uma rede
social?

01:59.500 --> 02:02.050
A gente vai usar a biblioteca Simple
Icons, beleza?

02:02.140 --> 02:07.080
Além disso, essa arquitetura nova entregou
uma redução gigante de 32 ,3 % no peso do

02:07.080 --> 02:08.080
pacote lá no React.

02:08.320 --> 02:12.960
E, não menos importante, sobre a
acessibilidade, a norma WCAG 2 .2

02:12.960 --> 02:14.460
exige um alvo de clique mínimo

02:14.460 --> 02:16.080
de 24 por 24 pixels.

02:16.520 --> 02:20.800
Pensa comigo, o dedo da pessoa precisa
literalmente conseguir tocar no botão sem

02:20.800 --> 02:22.000
esbarrar em outra coisa.

02:22.600 --> 02:26.760
Frente número 2. Licenças, fontes e
ilustração.

02:27.200 --> 02:30.900
Aqui a gente precisa de muita atenção,
porque a palavra grátis na internet

02:30.900 --> 02:32.900
costuma esconder umas armadilhas legais.

02:32.900 --> 02:34.620
Por exemplo, a biblioteca Undraw.

02:34.880 --> 02:38.760
Ela é maravilhosa, livre para uso
comercial, mas a licença proíbe

02:38.760 --> 02:41.460
explicitamente pegar os vetores deles para
treinar IA.

02:41.820 --> 02:45.840
Já o Storyset é grátis, só que exige
atribuição obrigatória.

02:46.080 --> 02:49.680
A única forma de tirar os créditos é
pagando assinatura Flaticon Premium.

02:49.680 --> 02:53.140
Por outro lado, a humanas é domínio
público, famoso CC0,

02:53.400 --> 02:55.460
então o uso é 100 % livre de burocracia.

02:55.640 --> 02:58.240
A moral da história é, a gente precisa ler
a licença

02:58.240 --> 03:00.690
antes de importar qualquer coisa para a
campanha.

03:00.690 --> 03:03.500
E isso ilustra brilhantemente o nosso
próximo ponto.

03:03.820 --> 03:07.120
Essa é uma sentença real do Tribunal
Regional de Munique,

03:07.460 --> 03:09.360
lá de 20 de janeiro de 2022.

03:09.720 --> 03:13.720
O tribunal deixou claríssimo que o
endereço IP é um dado pessoal SIM,

03:13.720 --> 03:17.320
e eles condenaram um site simplesmente
porque o Google Fonts

03:17.320 --> 03:20.620
estava enviando os IPs dos visitantes para
os servidores do Google

03:20.620 --> 03:21.960
sem o consentimento deles.

03:22.300 --> 03:26.020
Aqui no Brasil, a LGPD e a Autoridade
Nacional de Proteção de Dados

03:26.020 --> 03:28.040
seguem exatamente a mesma lógica.

03:28.280 --> 03:31.580
Então, qual era essa solução técnica e
jurídica para 2026?

03:31.920 --> 03:34.620
Servir as fontes direto do nosso próprio
servidor,

03:34.780 --> 03:36.380
usando os pacotes do FontSource.

03:36.540 --> 03:39.790
Nada de ficar fazendo chamada externa para
servidor de terceiros.

03:40.060 --> 03:44.120
Ainda falando de vetores, tem um detalhe
técnico, mas que salva vidas.

03:44.520 --> 03:49.020
Anota aí essa atualização específica de 21
de junho de 2025 do

03:49.020 --> 03:50.020
SVGO,

03:50.060 --> 03:53.410
que é aquele pacote que limpa os SVGs que
a gente exporta do Figma.

03:53.580 --> 03:58.000
Na versão 4, eles finalmente tiveram um
bom senso de desativar, por padrão,

03:58.120 --> 04:01.240
a remoção daquele atributo viewBox e da
tag Title.

04:01.500 --> 04:02.500
Isso é vital.

04:02.680 --> 04:06.130
Se o projeto de vocês estiver rodando uma
versão mais antiga do SVGO,

04:06.130 --> 04:09.920
Ele vai simplesmente destruir a
escalabilidade e a acessibilidade daquela

04:09.920 --> 04:10.920
arte.

04:10.920 --> 04:12.720
Chequem os empacotadores, por favor.

04:12.780 --> 04:15.840
Vamos para a parte 3, a escada de
animação.

04:16.220 --> 04:20.920
Para não pesar a mão, a gente trabalha com
uma hierarquia estrita de 4

04:20.920 --> 04:21.920
degraus

04:21.920 --> 04:23.720
para implementar qualquer movimento.

04:23.900 --> 04:28.280
Tudo, absolutamente tudo, começa no degrau
1, CSS

04:28.280 --> 04:29.280
puro.

04:29.380 --> 04:32.030
Vai fazer um botão mudar de cor quando
passa o mouse?

04:32.030 --> 04:33.280
CSS e pronto.

04:33.280 --> 04:37.840
Se não der, a gente vai para o degrau 2,
usando os recursos nativos do navegador.

04:38.080 --> 04:42.400
Só se essas duas opções falharem, a gente
sobe para dependências externas,

04:42.520 --> 04:46.540
como a biblioteca Motion 13, que saiu
agora em 10 de agosto de 2026.

04:46.820 --> 04:49.770
E lá no topo, para aquelas linhas do tempo
super complexas,

04:49.820 --> 04:53.740
a gente tem o GSAP, que virou 100 %
gratuito em abril de 2025.

04:54.100 --> 04:59.100
O resumo é, não vamos instalar pacote
pesado para fazer fetinhos

04:59.100 --> 05:00.100
simples.

05:00.100 --> 05:02.650
Mas o ponto crucial da animação é esse
número aqui.

05:02.650 --> 05:04.040
Sabe o que isso significa?

05:04.440 --> 05:09.300
Um estudo de 2009 da doutora Yuri Agrawal
revelou que 35 ,4 %

05:09.300 --> 05:12.200
dos adultos nos Estados Unidos com 40 anos
ou mais

05:12.200 --> 05:14.280
têm algum nível de disfunção vestibular.

05:14.480 --> 05:18.440
Isso quer dizer que animações bruscas ou
movimento em excesso na tela causam

05:18.440 --> 05:20.400
tontura, náusea e enxaqueca

05:20.400 --> 05:22.580
em uma fatia gigantesca do nosso público.

05:22.800 --> 05:26.850
Por isso, respeitar aquela configuração do
sistema operacional de Prefers Reduced

05:26.850 --> 05:27.850
Motion

05:27.850 --> 05:30.000
não é detalhe para deixar o site
bonitinho.

05:30.000 --> 05:32.050
É uma regra inegociável na nossa esteira.

05:32.050 --> 05:36.020
Ponto número 4, geração por IA e a lei de
direitos autorais.

05:36.240 --> 05:38.120
Todo mundo aqui usa IA no dia a dia,

05:38.340 --> 05:41.740
então a gente precisa acompanhar o que os
tribunais estão decidindo.

05:41.740 --> 05:43.490
E essa linha do tempo é definitiva.

05:43.490 --> 05:47.240
Lá em janeiro de 2025, o Escritório de
Direitos Autorais dos Estados Unidos

05:47.240 --> 05:50.990
declarou que só escrever um prompt de
texto não dá controle suficiente para

05:50.990 --> 05:51.990
gerar autoria.

05:51.990 --> 05:55.340
Em março do mesmo ano, naquele famoso caso
Taylor contra Permutter,

05:55.340 --> 05:56.640
a justiça bateu o martelo.

05:56.820 --> 06:00.260
Direito autoral exige, obrigatoriamente,
autoria humana.

06:00.260 --> 06:04.880
E em março de 2026, a Suprema Corte
Americana basicamente encerrou o debate

06:04.880 --> 06:06.280
negando recurso para o caso.

06:06.500 --> 06:10.520
O que a gente tira de lição, um prompt
gera apenas um rascunho sem dono.

06:10.700 --> 06:15.140
A proteção jurídica só vai existir sobre a
edição, a modificação humana que a gente

06:15.140 --> 06:16.940
fizer depois em cima dessa imagem.

06:17.140 --> 06:19.080
E as próprias ferramentas sabem disso.

06:19.360 --> 06:24.340
Olhando para os termos de serviço agora,
em agosto de 2026, a coisa fica mais

06:24.340 --> 06:25.340
séria.

06:25.340 --> 06:27.740
A OpenAI fala que o usuário é dono do
resultado,

06:27.940 --> 06:31.740
mas faz a ressalva de que a mesma imagem
pode ser gerada para outras pessoas

06:31.740 --> 06:35.300
e que o contrato deles não passa por cima
da lei de direitos autorais.

06:35.780 --> 06:37.540
O MidJourney tem uma pegadinha.

06:37.760 --> 06:40.910
Se a nossa empresa fatura mais de um
milhão de dólares por ano,

06:40.910 --> 06:43.480
a gente é obrigado a assinar o plano Pro
ou Mega

06:43.480 --> 06:45.680
para ter a propriedade comercial dos
ativos.

06:45.700 --> 06:48.100
E o Google Cloud tem até uma cláusula
legal

06:48.100 --> 06:51.050
onde eles prometem indenizar o cliente em
caso de processo,

06:51.200 --> 06:52.200
mas olha o detalhe.

06:52.200 --> 06:55.820
Essa proteção some imediatamente se a
imagem for modificada

06:55.820 --> 06:58.200
ou se a gente tentar burlar os filtros
deles.

06:58.740 --> 07:02.040
Tem que checar essas regras sempre antes
da campanha ir para o ar.

07:02.040 --> 07:05.620
E aqui no Brasil, a gente tem o PL 2338
rolando.

07:05.820 --> 07:08.360
Ele já passou pelo Senado em dezembro de
2024

07:08.360 --> 07:12.120
e está parado lá na Câmara desde 17 de
junho de 2026.

07:12.380 --> 07:16.500
O texto atual exige que conteúdos
sintéticos tenham um identificador muito

07:16.500 --> 07:17.500
claro.

07:17.500 --> 07:20.100
Para não ter que refazer todo o nosso
acervo amanhã,

07:20.100 --> 07:22.320
a gente já adota hoje o padrão técnico
C2PA,

07:22.360 --> 07:27.360
que saiu em janeiro de 2026 para embutir
essas credenciais direto no arquivo.

07:27.620 --> 07:29.820
E mais uma regra de ouro de design,
pessoal.

07:30.160 --> 07:34.940
Nunca, jamais, coloquem texto diagramado
direto dentro de uma imagem gerada por IA.

07:35.140 --> 07:39.290
Além da fonte sair toda torta, o leitor de
tela para pessoas com deficiência visual

07:39.290 --> 07:40.390
não consegue ler nada.

07:40.390 --> 07:44.320
A imagem tem que ficar lá no fundo e o
texto vai sempre limpinho, com HTML por

07:44.320 --> 07:45.320
cima.

07:45.320 --> 07:48.940
E finalmente chegamos à frente número 5,
formato, peso e

07:48.940 --> 07:49.940
desempenho.

07:49.940 --> 07:54.660
Todo mundo que trabalha com marketing já
ouviu ou até já falou em alguma

07:54.660 --> 07:56.460
reunião aquela frase clássica

07:56.460 --> 08:01.280
53 % dos usuários de celular abandonam uma
página se ela demorar

08:01.280 --> 08:02.930
mais de 3 segundos para carregar.

08:03.120 --> 08:05.680
Mas vem cá, será que isso ainda é verdade?

08:06.060 --> 08:07.560
A resposta é não.

08:07.900 --> 08:10.940
Esse dado é na verdade um zumbi
estatístico.

08:10.940 --> 08:15.400
Ele vem de um estudo super antigo da
DoubleClick, lá de março de 2016,

08:15.860 --> 08:19.300
inclusive a página original dessa pesquisa
nem existe mais.

08:19.520 --> 08:24.100
Então, por favor, a gente não pode basear
as métricas de performance de 2026

08:24.100 --> 08:26.580
usando dados de uma década atrás.

08:26.880 --> 08:29.780
A nossa realidade hoje é bem diferente.

08:30.200 --> 08:35.100
Olhando os dados do Web Almanac de 2025, o
peso mediano de uma página inicial

08:35.100 --> 08:40.080
no desktop está na casa de impressionantes
2 .862

08:40.080 --> 08:41.080
kilobytes.

08:41.080 --> 08:42.300
É muita coisa.

08:42.620 --> 08:45.220
E adivinha quem é o maior responsável por
esse peso?

08:45.260 --> 08:46.260
As imagens.

08:46.500 --> 08:49.880
Elas sozinhas comem mais de mil kilobytes
desse total.

08:50.500 --> 08:54.940
Imagem mal otimizada destrói a performance
muito mais rápido do que excesso de

08:54.940 --> 08:55.940
script.

08:55.940 --> 08:59.890
Por conta disso, a gente tem uma regra de
ouro absoluta para os assets visuais.

08:59.890 --> 09:03.440
Nunca vamos servir para o usuário uma
imagem que seja fisicamente maior

09:03.440 --> 09:05.840
do que o espaço que ela vai ocupar na tela
dele.

09:05.840 --> 09:08.340
Se a caixinha do design tem 400 pixels de
largura,

09:08.340 --> 09:12.490
mandar um banner de 2 mil pixels é jogar
nossa conversão no lixo por pura lentidão.

09:12.490 --> 09:15.740
E para fotos de produto, o nosso padrão
principal agora é o AVIF,

09:15.740 --> 09:19.940
que desde 25 de julho de 2026 tem suporte
total em todos os navegadores modernos.

09:20.360 --> 09:24.500
Então, para consolidar todo esse
aprendizado num checklist diário para as

09:24.500 --> 09:25.500
nossas campanhas,

09:25.680 --> 09:28.360
a gente precisa sempre documentar e ler as
licenças,

09:28.640 --> 09:32.040
usar apenas uma família de ícone
controlada por tokens de cor,

09:32.400 --> 09:36.600
garantir acessibilidade cortando animações
para quem usa o Prefers Reduced Motion,

09:36.800 --> 09:39.700
adotar as credenciais C2PA nas imagens
sintéticas

09:39.700 --> 09:43.520
e, claro, cortar todo o peso inútil das
imagens antes de subir para o ar.

09:43.720 --> 09:47.670
A pergunta que fica para a gente pensar
antes de dar o próximo publicar é essa.

09:47.670 --> 09:51.270
A campanha de hoje vai refletir aquele
velho padrão amador e improvisado

09:51.270 --> 09:54.220
ou vai exibir a consistência técnica e o
rigor profissional

09:54.220 --> 09:56.960
que o mercado da Leadlovers exige agora
em 2026?

09:57.280 --> 09:58.940
A escolha está nas nossas mãos.

09:59.180 --> 10:01.080
Valeu, time! A gente se vê na próxima!