Como designers e desenvolvedores transformam sites no ar em vídeos de portfólio: o que capturar, por quanto tempo, que formato usar em cada plataforma e como deixar um conjunto de projetos coerente.
Aviral LakhanpaulAtualizado em 4 min de leitura
Capture cada site como um vídeo de rolagem curto, não como uma captura de tela: de 10 a 20 segundos, com pausas nas duas ou três seções que carregam o trabalho, no formato do lugar onde ele vai aparecer. Use a mesma moldura, o mesmo fundo e o mesmo movimento em todos os projetos para o portfólio parecer um conjunto. Uma ferramenta de URL para vídeo faz isso a partir do link no ar; um gravador de tela resolve para sites que já não são públicos.
Uma captura da página inteira ou é reduzida até nada poder ser lido, ou é cortada no hero, o que deixa de fora a maior parte do que você fez. Um vídeo de rolagem mostra a página num tamanho legível e ainda chega ao rodapé, e mostra o que uma imagem parada não consegue: o ritmo entre as seções, os elementos fixos, os estados de hover e, com o motor certo, as animações de rolagem.
Quem navega por um portfólio dá a cada projeto alguns segundos antes de decidir se fica. Comece a rolagem logo de cara, ou depois de segurar mais ou menos um segundo no hero, e mantenha a rolagem inteira entre 10 e 20 segundos.
As pausas fazem mais por um vídeo de portfólio do que qualquer outra coisa. Pare por um ou dois segundos em cada seção que mostra uma decisão: o hero, a grade de recursos, a tabela de preços. Cabem até 6 pausas em um vídeo, cada uma entre 0,5 e 5 segundos. Se a página for longa, corte a rolagem para terminar antes do rodapé em vez de acelerar tudo.
| Onde vai ficar | Proporção | Formato |
|---|---|---|
| O seu próprio site de portfólio | 16:9 ou 4:3 para desktop, 4:5 ou 9:16 para a versão de celular | MP4, ou WebM para arquivos menores |
| Dribbble, Behance, Peerlist | 4:3 ou 16:9 | MP4 |
| Uma página de estudo de caso | 16:9, com a moldura do navegador | MP4 |
| Feed do LinkedIn ou do Instagram | 4:5 ou 1:1 | MP4 |
| Um e-mail de proposta para um cliente | 16:9 ou 1:1, curto | GIF, que toca dentro da mensagem na maioria dos apps de e-mail |
Confira os limites de upload de cada plataforma antes de exportar em 4K: um arquivo em 1080p costuma ser a escolha mais segura para tudo que vai ser recodificado no upload.
Doze projetos capturados de doze jeitos diferentes parecem trabalho de doze pessoas diferentes. Decida a apresentação uma vez e repita.
Um vídeo mudo em loop se comporta como uma imagem animada e começa sozinho em todos os navegadores modernos, desde que esteja sem som e possa tocar dentro da página. Use Descer e voltar na Reprodução para o último quadro coincidir com o primeiro e o loop não dar salto.
<video autoplay muted loop playsinline preload="metadata"
poster="project-poster.jpg" width="1920" height="1080">
<source src="project.webm" type="video/webm" />
<source src="project.mp4" type="video/mp4" />
</video>A largura e a altura evitam que o layout pule enquanto o arquivo carrega, e o poster dá ao espaço algo para mostrar antes de o primeiro quadro chegar.
Cole um link e veja a prévia da rolagem de graça. 51 créditos grátis ao criar a conta, sem cartão e sem marca d’água em nada que você exportar.
Os dois, para trabalhos diferentes. Uma imagem parada dá uma miniatura nítida; um vídeo de rolagem mostra a página inteira num tamanho legível, além dos estados de hover e do movimento. A maioria dos designers abre com o vídeo e usa uma imagem parada como poster.
Uma ferramenta de URL só captura o que está no ar hoje. Se você guardou uma cópia da versão, hospede-a num endereço público temporário e grave esse, ou grave localmente com um gravador de tela.
Pode. Leia a página na largura de celular em vez de reduzir uma captura de desktop, para o site servir o layout mobile de verdade, e exporte em 9:16 ou 4:5.
Automatize gravações de sites com movimento personalizável, controles inteligentes e opções de exportação pensadas para criadores de hoje.
