Refiz o site de um cliente — antes e depois
O gancho (adapte com a tua voz): "Esse é o site do meu cliente hoje. [pausa no site velho] Guarda essa imagem — porque daqui a alguns minutos ele não vai existir mais."
Checklist de preparação
Tudo isso pronto antes de ligar a câmera — grava com confiança, não improviса.
- Autorização do cliente: confirma que pode mostrar o site antigo e o nome do negócio no vídeo. Sem autorização, usa um negócio fictício ou o próprio.
- Screenshots do site atual em desktop e mobile — são o "antes" que vai na edição final.
- Uma referência visual escolhida: um site que tem a vibe que o cliente quer ("quero parecer com esse aqui"). Guarda a URL.
- Squad Cinema Site configurado no Overclock (ou processo manual de copy → build → imagens → QA separados em panes).
- A gravação deve ser em tela — o processo ao vivo é o produto. Grava tudo e edita pra encaixar no tempo do vídeo.
- Serviço de deploy pronto pra mostrar o site no ar (não só local).
- Reação do cliente se possível: uma mensagem real de WhatsApp ou email reagindo ao novo site é ouro — pede permissão pra mostrar.
A estrutura que segura view até o fim
Proporções sobre a duração total — num vídeo de 10 min, 10% ≈ 1 min.
Tour honesto e específico pelo site atual: o que espanta cliente, o que não funciona no celular.
- Abre o site atual no navegador em tela cheia.
- Navega lentamente pelas seções principais — não corre.
- Aponta os problemas específicos: "esse botão de contato não funciona no celular", "essa foto está pixelada", "esse texto não explica o que vende".
- Abre no celular (ou redimensiona a janela) e mostra o problema de responsividade.
- Fecha com a pergunta retórica: "qual cliente chega nesse site e contata?"
- 💡 Seja específico nos problemas, não genérico. "Site feio" não ensina nada. "O contraste de texto aqui está tão baixo que não passa de nenhum critério de acessibilidade" ensina algo.
- 💡 Seja respeitoso: o site atual foi feito com o que havia disponível. A crítica é técnica, não ao cliente.
A referência visual e o que o squad vai fazer com ela.
- Abre a referência visual na tela: "quero a vibe desse site aqui — olha essa hierarquia, essas fontes, esse espaçamento."
- Explica o que vai extrair da referência: paleta, tipografia, ritmo de seções — não o conteúdo, só o DNA visual.
- Define o objetivo do site novo: qual é a ação principal que o visitante deve tomar? WhatsApp? Formulário? Ligação?
- Inicia o squad: "vou dar essa referência pro squad e o briefing do negócio — ele extrai o DNA visual e aplica no conteúdo real do cliente."
Briefing pro squad: Negócio: [nome]. Vende: [o que]. Público: [quem]. Ação: [o que deve acontecer ao entrar no site]. Referência visual: [URL]. Tom: [adjetivo]. Entregue um site com essa estética mas com o conteúdo do negócio.O processo em 2-4x com narração — styleboard, build e imagens em destaque.
- Grava o processo completo em tempo real. Na edição, acelera as partes de espera e mantém em 1x os momentos de decisão.
- Momentos pra manter em velocidade normal: a aprovação do styleboard (gate 1), o primeiro preview do build, a geração das imagens.
- Narra por cima enquanto acelera: "o squad está aplicando a paleta da referência aqui, olha as fontes sendo ajustadas..."
- Momento de pico: mostre 3+ panes trabalhando simultaneamente pelo menos uma vez — esse frame é o ponto de maior impacto.
- 💡 A aceleração 2-4x é pra respeitar o tempo do espectador, mas os momentos de "gate" (você aprovando algo) devem ser em 1x — é onde o espectador aprende o processo de revisão.
Reveal em tela cheia + comparação seção por seção.
- Abre o site novo em tela cheia no navegador — não mostra o Overclock ainda, só o resultado.
- Navega devagar: header, hero, seções de benefício, CTA, rodapé.
- Abre no celular ou redimensiona — mostra que é responsivo.
- Coloca o antes e o depois lado a lado: screenshot do antigo vs o novo no mesmo ponto de rolagem.
- Se tiver a reação do cliente (mensagem, email), mostra aqui.
- 💡 O reveal precisa de pausa — não vai navegando sem parar pra falar. Deixa o site aparecer, fica em silêncio 3 segundos, depois comenta.
O que ainda falta pro site ser 100% do cliente. Fecho.
- Lista o que está faltando: foto real do produto/serviço do cliente, depoimentos reais, domínio personalizado, integração do WhatsApp com número real.
- Explica por quê: "o squad fez a estrutura e a estética — o conteúdo autêntico do cliente é o que eu não consigo gerar por ele."
- Pergunta pro espectador: "o que você faria diferente no layout? Comenta."
- Fecho puxando o squad Cinema Site em detalhe.
O número que ancora o vídeo
O antes/depois lado a lado — desktop e mobile. O contraste visual é a prova principal desse vídeo.
A limitação dita de frente
Design novo não resolve conteúdo velho: texto genérico e foto de stock continuam parecendo genérico mesmo num layout lindo. O conteúdo real do cliente é o que transforma o resultado.
Puxando o próximo vídeo
"Quer ver o squad que fez isso por dentro, gate por gate? É o próximo vídeo da série."
O que trava — e como sair
Todo builder bate nesses pontos. Saber antes economiza uma regravação.
| O erro | O fix |
|---|---|
| O site novo ficou muito parecido com a referência — parece uma cópia. | O squad deve extrair o DNA (ritmo, tipografia, proporções), não copiar o layout. No briefing, adiciona: "adapta o DNA pra identidade do negócio [nome] — não copia a estrutura, aplica o estilo." Se ficar igual, ajusta em pane separado pedindo variação. |
| O antes/depois ficou fraco — o site novo não era visivelmente melhor. | Escolhe um site com mais contraste: algo nitidamente datado ou com problemas graves de usabilidade. Ou foca no problema de mobile — antes vs depois em celular geralmente tem contraste visual muito mais forte. |
| O cliente não deu autorização e você usou o site real mesmo assim. | Sem autorização, usa o próprio negócio, cria um negócio fictício plausível, ou borreia o nome do cliente na edição. Expor cliente sem autorização pode gerar problema real — não vale o risco. |
Como saber que ficou bom
O vídeo está pronto quando: (1) o site atual é mostrado claramente com problemas específicos apontados, (2) o antes/depois lado a lado aparece com o mesmo ponto de rolagem no desktop e no celular, (3) pelo menos um momento de 3+ panes simultâneos aparece na demo acelerada. Antes de publicar: confirma autorização do cliente se for site real.
Outras formas de gravar este roteiro
- Versão speed run: declara um limite de tempo no início ("em 20 minutos") — tudo igual mas com pressão de tempo.
- Versão série: faz 3 befores de sites diferentes em 3 vídeos, cada um com ângulo diferente (loja, prestador de serviço, portfólio). A série constrói audiência de nicho.
Três títulos prontos
Escolhe um, ou usa como base — número e promessa concreta sempre na frente.
| 01 | Refiz o site de um cliente com IA — ANTES e DEPOIS |
| 02 | De site de 2015 pra site de cinema — com um squad de IA |
| 03 | O antes/depois que fez meu cliente responder na hora |
Publicou e bateu 1.000 views? Comprova antes dos outros.
São 5 assinaturas Ultra pros 5 primeiros — 4 vídeos com 1.000+ views cada (ou 10.000+ num Shorts) e a vaga é sua.