Pular para o conteúdo
Júlio Folli

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
Eduarda — interface em produçãoPré-visualização ao vivo

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.

  1. 01Pôsteres dimensionados com proporção fixa, eliminando deslocamento de layout durante o carregamento.
  2. 02Carregamento diferido da mídia pesada, acionado por proximidade de viewport e por intenção explícita de reprodução.
  3. 03Hospedagem de vídeo delegada a serviço especializado, mantendo o bundle da aplicação enxuto.
  4. 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.