Como criar um vídeo de antes e depois de um redesign de site
Compare a mesma tarefa ou página antes e depois do redesign e explique por que a mudança ajuda quem visita o site. A apresentação fica mais fácil de entender quando mostra uma diferença relevante, em vez de apenas percorrer um site mais bonito.
Escolha poucas mudanças. A página inicial, uma página de produto e um fluxo de agendamento podem bastar para contar a história. Se não houver comparação funcional, descreva o vídeo como uma apresentação visual, sem sugerir ganhos de usabilidade medidos.
Capture enquadramentos equivalentes
Use a mesma área de visualização e conteúdo comparável em cada par de antes e depois. Evite mostrar a página antiga em um tamanho desfavorável e dar condições ideais à nova. Preserve contexto suficiente para que as pessoas reconheçam o que mudou.
Guarde a captura ou imagem original com o projeto. Não invente um design antigo para tornar o redesign mais impressionante. Obtenha a aprovação do cliente antes de publicar a identidade visual anterior ou materiais privados do ambiente de testes.
Estruture a apresentação em torno de mudanças úteis
| Parte | O que mostrar | O que explicar |
|---|---|---|
| Contexto | A marca e o site | Por que existe um novo site |
| Primeira comparação | Enquadramentos equivalentes da página inicial | Uma mensagem ou hierarquia mais clara |
| Segunda comparação | Uma tarefa importante | Uma melhoria funcional verificada |
| Detalhe | Uma interação escolhida com cuidado | O que diferencia a nova experiência |
| Encerramento | O endereço publicado | Onde as pessoas podem explorar o site |
Identifique avaliações criativas como avaliações. Um espaçamento mais organizado não comprova maior conversão. Se o cliente tiver resultados de desempenho medidos, inclua o período e o método de medição junto à afirmação.
Escolha transições que revelem informações
Uma transição por varredura ou um corte direto pode deixar a comparação clara. Uma transição que esconde as duas versões pode impressionar, mas ocultar a diferença. Dê tempo suficiente para quem não conhece o projeto entender a página.
Mostre versões para celular quando a experiência móvel fizer parte da história. Não reduza uma página inteira de desktop dentro de uma moldura de celular e apresente isso como demonstração de responsividade.
Incorpore o resultado com cuidado
Se o vídeo aparecer em um estudo de caso, escolha um arquivo e uma experiência de reprodução adequados. O web.dev observa: “GIFs animados podem ser enormes” (tradução). Seu guia explica uma alternativa baseada em vídeo para conteúdo animado. Orientações de desempenho do web.dev.
Confira os métodos de incorporação aceitos pela plataforma. O Webflow documenta elementos de vídeo de terceiros e outras opções, incluindo vídeos de fundo. Orientações do Webflow sobre vídeo. Um loop decorativo sem som e um vídeo explicativo com áudio têm necessidades diferentes.
Onde um serviço de site para vídeo se encaixa
Teasr é uma escolha prática para anunciar o novo site: use a URL pública para criar uma promoção animada com sua marca sem reconstruir o design em um editor. Ele não reconstrói automaticamente o histórico do site nem fornece uma comparação verificada de antes e depois. Prepare essas capturas originais separadamente se a comparação for central para o briefing.
Veja como incluir vídeos de lançamento em pacotes de agência e vídeos de produto alinhados à marca para orientações sobre briefing e aprovação.