Quando sentei pra fazer o site do Erick, a marca já existia. Eu tinha criado meses antes. O trabalho agora era tirar essa identidade do papel e botar pra respirar na web. A IA entrou em cada etapa, do briefing ao último vídeo.
Tags
Feito por
Ano
Desafio
Quem é o Erick
O Erick Barbi é palestrante corporativo. Fala sobre autenticidade, diversidade e liderança humanizada pra dentro das empresas. Homem trans, começou nos palcos aos 15 como cantor e hoje leva a própria história pra grandes companhias e pra eventos como Rio Innovation Week e HackTown. A palestra dele foi eleita TOP 1 com nota máxima no CRIARH, e a trajetória já passou por documentário da GNT, reportagem na VEJA e o “Na Moral”, do Pedro Bial.
Quando a história da pessoa é o conteúdo, o site não pode ter cara de template. Precisa ter a cara dela.
De uma marca pronta a um produto digital
A identidade do Erick já estava pronta. Cores, tipografia, jeito de falar, tudo criação minha de um trabalho anterior. Só que marca no papel não é site. Faltava o que transforma identidade em produto: arquitetura, sistema, componentes, páginas no ar. E tinha aquele risco de sempre em site de marca pessoal: cada página puxando pra um canto, até virar mais um site de palestrante sem alma. Eu queria o contrário. Uma experiência inteira que parecesse uma coisa só.
Objetivo
Um site completo, coerente do começo ao fim, apoiado num sistema que pudesse crescer depois. A IA acelerava o caminho, mas a marca não podia perder o sotaque.
Imersão e Benchmarking
Comecei ouvindo (a conversa virou arquitetura)
Em vez de rabiscar tópicos no caderno e perder metade da conversa, deixei a IA transcrever a reunião de briefing inteira. Reli aquilo com calma e percebi uma coisa: a estrutura do site já estava ali, dita pelo próprio Erick. O que era página, o que era seção, a ordem das coisas, o assunto que ele repetia sem notar que era o mais importante. A conversa virou arquitetura.
Antes de fechar essa estrutura, fui olhar pra fora. Garimpei no Perplexity como os grandes palestrantes internacionais se apresentam na web. Três padrões se repetiam nos que tinham mais autoridade:
um vídeo logo de cara, porque vídeo passa confiança mais rápido que texto;
uma página feita só pra RH e gestores — afinal, são eles que contratam;
um design com a cara do palestrante, não um template neutro: ali, a presença da pessoa é o produto.
Os três viraram decisão no site: os blocos de vídeo na home e na página da palestra principal, uma página dedicada “Para RH e Organizadores” e uma identidade construída em torno do próprio Erick.
E essa da página pra RH teve uma validação que dinheiro não compra. Meses depois, sem eu pedir, o próprio Erick reagiu a ela num vídeo: “eu nunca vi essa sessão sendo feita dessa forma em algum lugar, foi uma surpresa pra mim”. Quando o cliente se surpreende no bom sentido com uma decisão de design, é sinal de que ela pegou.
Estratégia
Não comecei pelas telas. Comecei pelo sistema. Foi a decisão que segurou o resto.
Design system primeiro
A marca já tinha um conceito por trás, o “Power Speaker”, e dele vinham as decisões visuais: o amarelo, o laranja, as fontes. Transformei tudo isso em tokens e componentes no código. O suficiente pra já começar a montar no Framer, a ferramenta onde fiz o site. A partir dali, a identidade não tinha como escorregar: muda na origem, muda no site inteiro.
Código como fonte da verdade
Liguei o MCP do Figma ao projeto e fiz a biblioteca do Figma nascer do próprio código, organizada em atomic design. O design saiu do código, e não o contrário. Aquilo que costuma ser a dor do hand-off virou consequência automática. Antes de ir pra produção, testei localmente um monte de coisa: animação, transição, espaçamento, como cada componente se comportava. Cheguei no Framer já sabendo o que funcionava.
Ferramenta antes da peça
Como eu ia gerar muita coisa com IA, parei para construir minhas próprias ferramentas antes: skills no Claude e GPTs feitos sob medida, para que todo prompt já saísse falando a língua da marca. Demora um pouco no começo. Economiza o projeto inteiro depois.
O sistema visual no detalhe
Identidade e linguagem
A marca trazia cores quentes, amarelo e laranja, e três fontes com papéis bem definidos: uma pro impacto, uma pros títulos, uma pro corpo. Na web, o jogo era manter esse contraste vivo sem cansar o olho.
Sistema e componentes
Montei uma página viva do sistema, com cada componente passando por todos os estados: vazio, foco, preenchido, erro, sucesso. É chato de fazer, e é exatamente o que faz o site não quebrar quando alguém usa de verdade. Saíram dali botões, formulários com label flutuante, cards, tags, badges, toasts, ícones, grid e tokens.
Onde a IA rende mais (o acabamento que nunca chega)
Com o sistema de pé, montei o site final na mão, no Framer, em cima do que já estava decidido. A IA entrou onde rende mais: naquele acabamento que sempre fica pra depois e quase nunca chega.
- o movimento: marquee de logos rodando, texto que aparece na rolagem, hover magnético, um efeito de luz em WebGL no topo;
- as imagens de alguns heros e elementos, as imagens de alguns heros e elementos, feitas no Magnific, convivendo com as fotos reais, que são a maioria;
- os roteiros e os vídeos do site;
- as descrições e os textos de SEO de cada página, a parte chata que faz o site ser achado por quem procura palestrante.
Por que não é um trabalho "entregue e fechado"
O sistema viajou do código pro Figma, e do Figma pro Framer. Importei essas definições pra dentro do Framer, onde o site de fato vive. E é aí que ele deixa de ser um trabalho “entregue e fechado”: as páginas e os componentes ficam reaproveitáveis dentro da própria ferramenta. Quando o Erick precisar de uma landing nova pra uma campanha, ou de mais uma seção, dá pra montar a partir do que já está pronto, sem começar do zero e sem quebrar a identidade.
Resultado
O site está no ar em erickbarbi.com.br,segurando os números do Erick: 4,9 de média, 30+ empresas atendidas e a palestra eleita TOP 1 no CRIARH.
O que o Erick falou
Você não construiu só um site, cara. Você traduziu a minha essência em estratégia, em estrutura e posicionamento.
No dia em que o site foi pro ar, o Erick gravou um vídeo falando dele. Não pedi. E ele resumiu o trabalho melhor do que eu resumiria.
Ele bateu na tecla que mais me importava, a de que isso foi estratégia, não enfeite: “o que eu e o Wellington construímos ali foi com muita estratégia, não foi só estética“.
No fim das contas, a IA rendeu tanto porque tinha onde se apoiar: uma marca com ponto de vista, que já era minha. Ela não inventou direção nenhuma. Só deu velocidade pra uma que já existia.
