# Vídeo demo de produto: mostre tudo em menos de 1 minuto [Canonical HTML page](https://gradiently.design/pt-br/guide/product-demo-video) As melhores demonstrações não percorrem todos os recursos. Mostram uma pessoa resolvendo uma tarefa, rápido. Veja uma estrutura de sessenta segundos, um roteiro para adaptar e os detalhes que dão acabamento. ## The short version - Um vídeo de demonstração de produto funciona melhor quando mostra uma tarefa real, do problema ao resultado, em vez de um passeio por todos os recursos. - Menos de um minuto basta para uma demonstração em uma landing page ou no feed; tutoriais mais longos pertencem aos artigos de ajuda. - Mostre o resultado nos primeiros segundos, para os espectadores saberem o que vão receber antes de ver como. - Legendas são essenciais porque demonstrações de produto costumam ser assistidas sem som, em landing pages e feeds. - Faça um corte vertical separado para vídeo social em vez de cortar a versão widescreen. Um bom **vídeo de demonstração de produto** mostra uma pessoa fazendo uma tarefa real com o seu produto, do problema ao resultado final, em menos de um minuto. Abra com o resultado, mostre os três ou quatro passos que levam até ele e feche com uma única ação seguinte. Use uma tela limpa, texto legível, legendas para quem assiste sem som e um cartão de título e um cartão final curtos, com a marca. Resista ao passeio por recursos: o espectador lembra de um resultado, não de um menu. ## Escolha uma tarefa, não todos os recursos Antes de abrir qualquer ferramenta de gravação, escreva uma frase: "Uma [pessoa] usa [produto] para [obter resultado] em [pouco tempo]." Por exemplo: a dona de um café usa um app de reservas para preencher uma mesa cancelada em dois minutos. Essa frase é o vídeo inteiro. Tudo o que não a serve vai para outro vídeo. ### Passeio por recursos - Começa na tela de login - Visita todas as abas em ordem - Explica configurações que ninguém perguntou - Termina com "e muito mais" - Três minutos e subindo ### Demonstração de tarefa - Começa no resultado final - Acompanha uma tarefa real, do começo ao fim - Mostra só os cliques que importam - Termina com um próximo passo claro - Quarenta a sessenta segundos ## Estrutura de um vídeo de demonstração de produto para 60 segundos Esta estrutura serve para uma landing page, um post de lançamento ou um e-mail de vendas. Os tempos são uma referência; o que importa é a ordem. | Segundos | Momento | O que aparece na tela | | --- | --- | --- | | 0 a 5 | O resultado | A coisa pronta: a agenda cheia, a fatura enviada, a página publicada | | 5 a 12 | O problema | O antes bagunçado, em um plano, com uma frase de voz ou legenda | | 12 a 45 | Três ou quatro passos | Só os cliques que fazem a tarefa avançar, com as pausas cortadas | | 45 a 55 | De volta ao resultado | O resultado de novo, agora que o espectador sabe como foi feito | | 55 a 60 | Um próximo passo | Um cartão final com uma única ação e o seu endereço | Resultado, problema, passos, resultado, ação. Mostrar o resultado primeiro dá ao espectador um motivo para ver os passos. ## Escreva um roteiro de demonstração que caiba na tela Escreva o roteiro em duas colunas: o que é dito e o que é mostrado. Cada fala deve descrever algo visível naquele momento. Se você se pegar explicando algo que não está na tela, corte a fala ou mude o plano. ```text FALAR MOSTRAR Sexta, 7pm. Uma mesa para seis cancela. Agenda com um espaço vermelho às 7:30 Antes, isso significava mesa vazia. Mesmo espaço, foto do salão tranquilo Abra a lista de espera. Clique em Lista de espera Escolha o horário. Toque em Oferecer. Selecione 7:30, clique em Oferecer à lista de espera O primeiro cliente que aceitar fica. Notificação no celular, toque em Aceitar Mesa cheia de novo. Dois minutos. Agenda, espaço preenchido, cronômetro 1:52 Experimente nas suas reservas. Cartela final: tablefull.app ``` Um roteiro em duas colunas para uma demonstração de 45 segundos. Cada linha é curta o bastante para ser dita enquanto a ação acontece. Leia em voz alta com um cronômetro antes de gravar. Se passar do tempo, corte passos inteiros em vez de acelerar a fala. ## Como gravar uma demonstração limpa 1. **Prepare dados de demonstração realistas** Preencha o produto com nomes, números e imagens críveis. Telas vazias e "Teste teste 123" fazem o produto parecer sem uso. 2. **Organize e amplie a tela** Esconda favoritos e notificações, feche outras abas e aumente a interface para 125% ou mais, para o texto sobreviver à tela de um celular. 3. **Grave um passo por take** Takes curtos são fáceis de refazer e cortar. Mova o ponteiro devagar e faça uma breve pausa depois de cada clique. 4. **Grave a voz separadamente, se puder** Ler o roteiro sobre as imagens prontas dá um ritmo mais suave do que falar enquanto clica. 5. **Aproxime onde importa** Corte ou amplie o botão ou o campo em uso, para o espectador não ter de procurar em uma área de trabalho inteira. [Gravação de tela](https://gradiently.design/pt-br/guide/screen-recording-tips) cobre em detalhe permissões, áudio e o que compartilhar. ## Legendas, cartão de título e cartão final Demonstrações em landing pages costumam começar sozinhas e sem som, e os feeds também começam sem som, então as legendas contam a história. Mantenha cada legenda em uma linha curta que acompanhe a voz, colocada onde não cubra a parte da interface que você está mostrando. [Legendas em vídeo](https://gradiently.design/pt-br/guide/video-captions-design) cobre estilo e posicionamento. Abra e feche a demonstração com dois quadros desenhados com a sua marca: um cartão de título que nomeia o resultado e um cartão final com uma ação. É isso que faz uma captura de tela parecer um vídeo de produto e não uma gravação, e é o que as pessoas veem como quadro de capa antes de apertar o play. Um cartão de título 16:9 de demonstração de produto com o texto Ocupe a mesa cancelada em 2 minutos, sobre um gradiente da marca O cartão de título nomeia o resultado, não o recurso. Ele também serve de imagem de capa do vídeo na landing page. Um cartão final 16:9 com o texto Teste com as suas reservas e o endereço do produto embaixo, no mesmo gradiente O cartão final pede uma coisa só. Dois botões e um perfil social dividem a atenção em três. ## Uma demonstração, todos os lugares Uma demonstração costuma precisar viver em vários lugares: a landing page, um post de lançamento, um e-mail de vendas e vídeos curtos nas redes. Faça primeiro o corte widescreen e depois monte um corte vertical para as redes, com a gravação da tela centralizada sobre o seu fundo, um título acima e legendas abaixo. Cortar uma demonstração widescreen para vertical elimina metade da interface. - Landing page 1920×1080: 1920 × 1080 - Feed 1080×1350: 1080 × 1350 - Reels e Shorts 1080×1920: 1080 × 1920 - LinkedIn 1200×1200: 1200 × 1200 Quatro lugares para a mesma demonstração. A gravação widescreen fica dentro de cada quadro, sobre o seu fundo, em vez de ser cortada. Em um site, comprima o arquivo, dê ao vídeo uma imagem de capa e deixe os visitantes iniciarem sozinhos se ele tiver som. [Vídeo de fundo em site](https://gradiently.design/pt-br/guide/video-background-website) explica tamanhos de arquivo e formatos, e [design de landing page](https://gradiently.design/pt-br/guide/landing-page-design) mostra onde uma demonstração se encaixa na página. Para os posts que a anunciam, veja [artes de lançamento de produto](https://gradiently.design/pt-br/guide/launch-day-graphics). ## Como fazer a demonstração no Gradiently Com o Pro, você pode gravar a tela e a sua voz no navegador, revisar os clipes, depois cortá-los na linha do tempo do Gradiently, adicionar legendas e música e desenhar os cartões de título e final sobre o mesmo Mark, para todos os quadros combinarem. Faça as versões vertical e quadrada a partir do mesmo design em um só passo, e o Designer pode redigir as linhas de legenda e o texto dos posts na voz do kit de marca. ## FAQ ### Quanto tempo deve ter um vídeo de demonstração de produto? Menos de um minuto para landing pages e vídeos sociais. Tutoriais mais longos, de dois a cinco minutos, servem para centrais de ajuda e conversas de vendas, onde o espectador já quer aprender o produto. ### O que um vídeo de demonstração de produto deve incluir? O resultado logo de início, o problema em um plano, três ou quatro passos de uma tarefa real, o resultado de novo e uma única ação seguinte, com legendas do começo ao fim. ### Um vídeo de demonstração deve ter narração? Ajuda, mas escreva legendas também, porque demonstrações em landing pages e feeds costumam rodar sem som. O vídeo deve fazer sentido com o som desligado. ### Qual deve ser o tamanho de um vídeo de demonstração de produto? 1920×1080 para sites e YouTube, mais uma versão vertical 1080×1920 e uma de feed 1080×1350, com a gravação sobre um fundo da marca.