Como criar vídeos comparativos de antes e depois

Algumas melhorias são difíceis de explicar e fáceis de mostrar. Uma página que levava oito segundos para carregar agora leva um. Um painel poluído ficou legível. Um checkout confuso perdeu três etapas. Descrever essas mudanças em palavras exige um parágrafo; mostrá-las exige seis segundos de vídeo.

Comparativos de antes e depois estão entre os formatos mais persuasivos que você pode produzir com um gravador de tela — e também entre os mais fáceis de errar. Se as duas gravações não combinarem, o espectador gastará a atenção nas diferenças que você não pretendia mostrar, em vez daquela que você queria.

Este guia mostra como planejar, gravar e editar vídeos comparativos no Recorded para que a melhoria fale por si.

Quando usar um vídeo comparativo

• Ganhos de desempenho: tempos de carregamento, tempos de build, velocidade de renderização, duração da sincronização
• Redesigns: um novo layout, navegação ou estilo visual ao lado do antigo
• Mudanças de fluxo de trabalho: sete cliques reduzidos a dois
• Correções de bugs: primeiro o comportamento quebrado, depois o corrigido
• Antes e depois do seu próprio trabalho: limpezas de design, refatorações, migrações, reescritas de conteúdo

Se a sua mudança é invisível na tela — uma refatoração de backend com saída idêntica —, um comparativo não vai ajudar. Use-o quando a diferença for algo que o espectador realmente consegue ver.

A regra de ouro: mude apenas uma coisa

Todo o poder de convencimento de um comparativo vem do fato de que tudo, exceto a melhoria, permaneceu igual. Isso significa que as duas gravações devem compartilhar:

• O mesmo tamanho de janela e a mesma resolução de tela
• O mesmo modo de captura e a mesma taxa de quadros
• O mesmo estado inicial (mesma página, mesmos dados, mesma conta)
• As mesmas ações, na mesma ordem e no mesmo ritmo
• O mesmo tema — não grave o “antes” no modo claro e o “depois” no modo escuro

Qualquer descompasso dá ao espectador um motivo para duvidar do resultado. Defina tudo isso antes de apertar gravar pela primeira vez.

Planejando o comparativo

1. Escreva o roteiro exato das ações. Não a narração — os cliques. “Abrir o painel, clicar em Relatórios, selecionar os últimos 30 dias, clicar em Exportar.”
2. Decida o que você vai medir. Tempo, número de etapas, número de erros ou clareza subjetiva. Diga isso em voz alta no vídeo.
3. Prepare dados de teste idênticos. Uma conta de demonstração com os mesmos registros nos dois ambientes elimina a objeção “mas aquele tinha menos dados”.
4. Fixe um tamanho de janela. Ajuste uma vez e não mexa mais entre as gravações.
5. Ensaie cada versão. Tropeçar em uma gravação e ir liso na outra exagera silenciosamente o seu resultado.

Gravando as duas versões

Grave o “antes” e o “depois” como duas gravações separadas, e não como uma tomada longa. Arquivos separados são mais fáceis de cortar, alinhar e refazer se um deles der errado.

1. Configure a captura no Recorded — escolha o mesmo monitor, janela ou área para as duas
2. Escolha uma taxa de quadros e mantenha nas duas gravações
3. Grave a versão “antes” seguindo exatamente o seu roteiro de ações
4. Troque de ambiente — o novo build, o novo design, a URL de staging
5. Confirme que a janela continua com o mesmo tamanho
6. Grave a versão “depois” com o roteiro de ações idêntico

Dica: se estiver comparando tempos de carregamento, comece a gravar um instante antes do clique que dispara o carregamento e pare um instante depois de terminar. Esses quadros extras facilitam muito o corte em um ponto de partida justo.

Editando o comparativo

Corte no mesmo ponto de início

Abra cada gravação no editor e corte as duas para que comecem exatamente no mesmo momento de disparo — normalmente o quadro do clique. Um comparativo que começa meio segundo antes de um lado parece mais lento mesmo quando não é.

Rotule cada lado com clareza

Use sobreposições de texto para marcar Antes e Depois na tela. Mantenha-as:

• Na mesma posição nos dois clipes
• Visíveis durante todo o trecho, não só no primeiro segundo
• Com alto contraste, para sobreviverem à compressão e a telas pequenas

Acrescentar uma duração corrente ou uma contagem de etapas como segunda sobreposição torna a melhoria mensurável, e não apenas perceptível.

Use zoom para direcionar a atenção

Se a diferença acontece num canto da tela — um indicador de carregamento, um contador, um menu —, adicione um efeito de zoom no mesmo momento nos dois clipes. Ampliar em um lado e não no outro quebra a simetria, então espelhe suas regiões de zoom nas duas gravações.

Cuidado com mudanças de velocidade

Acelerar é ótimo para tutoriais e arriscado para comparativos. Se você acelerar qualquer um dos clipes, o espectador não pode mais confiar no tempo mostrado. Se precisar comprimir uma espera longa, aplique exatamente a mesma velocidade aos dois clipes e diga isso na tela.

Escolha um layout

• Sequencial: primeiro o “antes”, depois o “depois”. Simples, honesto e funciona em qualquer proporção — o padrão mais seguro.
• Lado a lado: os dois clipes juntos, ideal quando as durações são parecidas e as telas são simples o bastante para serem lidas em meia largura.
• Corte no momento-chave: mostre os dois até o instante decisivo e depois alterne. Eficaz quando a diferença de desempenho é dramática.

Para formatos verticais ou de redes sociais, empilhe os dois clipes em cima e embaixo em vez de lado a lado, para que cada um mantenha um tamanho legível.

Mantendo a honestidade

Vídeos comparativos são marketing, mas também são evidência. Um resultado que é questionado e não se sustenta custa mais confiança do que o vídeo conquistou.

• Não limpe o cache em uma execução e na outra não
• Não rode o “antes” com a conexão limitada
• Não pule discretamente uma etapa no “depois”
• Mencione as condições: qual máquina, qual rede, quanto de dados
• Mostre um caso típico, não a sua tentativa mais sortuda

Exportando e compartilhando

• MP4 para qualquer lugar onde você incorpore ou envie um vídeo
• GIF para comparativos curtos em um README, changelog ou mensagem de chat — mantenha em poucos segundos
• Corte vertical para redes sociais, com o layout empilhado descrito acima

Dê ao arquivo um nome que sobreviva ao download: checkout-flow-before-after-2026-09.mp4 é melhor que comparativo-final-v3.mp4.

Checklist rápido

[ ] Mesmo tamanho de janela, resolução, taxa de quadros e tema nas duas gravações
[ ] Mesmo estado inicial e mesmos dados de teste
[ ] Roteiro de ações idêntico, ensaiado nas duas versões
[ ] Os dois clipes cortados no mesmo quadro de disparo
[ ] Sobreposições Antes/Depois em posições coincidentes
[ ] Efeitos de zoom espelhados nos dois clipes
[ ] Nenhuma mudança de velocidade aplicada a apenas um lado
[ ] Condições indicadas na tela ou na descrição

Conclusão

Um bom vídeo comparativo não argumenta que algo melhorou — ele deixa o espectador ver e decidir por conta própria. Aproxime as duas gravações o máximo possível, mude apenas aquilo que você está demonstrando e rotule o resultado com clareza. Na próxima vez que você lançar um redesign, uma correção de desempenho ou um fluxo mais simples, grave os dois lados antes que a versão antiga desapareça. Essa é a cena que não dá para voltar e capturar.