Eduarda
Portfólio para videomaker
- Período
- 2026
- Atuação
- Design de interface e desenvolvimento
- Categoria
- Portfólio autoral · Mídia
- Stack
- Next.jsTypeScriptTailwind CSSOtimização de mídia
Um portfólio de videomaker tem um conflito embutido: o trabalho só se comunica em movimento, e movimento é o tipo de conteúdo mais caro que uma página pode carregar. Todo o projeto gira em torno de administrar esse conflito.
Problema
Portfólios audiovisuais costumam falhar em um de dois extremos: ou carregam reels em autoplay e punem o visitante com segundos de tela vazia, ou recuam para grades de miniaturas estáticas que não mostram aquilo que está sendo vendido.
O critério de sucesso adotado foi direto: o visitante deve enxergar a identidade do trabalho antes de qualquer vídeo terminar de carregar, e deve conseguir navegar o acervo inteiro sem esperar.
Estratégia de mídia
A solução foi tratar cada peça como dois ativos distintos: um pôster leve, responsável pela primeira impressão e pelo layout estável, e a mídia em movimento, carregada sob demanda conforme a intenção do usuário.
- 01Pôsteres dimensionados com proporção fixa, eliminando deslocamento de layout durante o carregamento.
- 02Carregamento diferido da mídia pesada, acionado por proximidade de viewport e por intenção explícita de reprodução.
- 03Hospedagem de vídeo delegada a serviço especializado, mantendo o bundle da aplicação enxuto.
- 04Rotas estáticas por peça, permitindo que cada trabalho seja compartilhado como link próprio.
Identidade visual
A interface foi deliberadamente reduzida: tipografia forte, muito espaço negativo e ausência de ornamento. Em um portfólio de vídeo, qualquer elemento decorativo compete com o material que deveria ser o único protagonista da tela.
Decisões de projeto
Pôster primeiro, vídeo depois
Nenhuma reprodução começa antes de a composição estar visualmente completa. A percepção de velocidade vem da estabilidade do layout, não do tempo total de download.
Interface neutra por contrato
A identidade visual do site cede espaço à identidade visual do trabalho exibido. A cor forte da página é a cor do frame em exibição.