Do Figma ao código: as decisões por trás do site da Finalv1

O Jason McCall comanda a Finalv1, um estúdio de design de marca com clientes como Dribbble, R/GA e Baskin Robbins. Ele chegou com o site novo já desenhado no Figma e com o movimento descrito nos comentários do arquivo. A ideia era montar no Framer.

Código em vez de Framer

A gente sugeriu fazer em código. Construtor de site cobra todo mês enquanto o site existir, e o site só vive lá dentro. Em código, o site, o CMS e a hospedagem ficam no nome do estúdio, sem nada para alugar. Do sim ao site no ar, foram 12 dias.

O site antigo era em WordPress, e cada projeto manteve o mesmo endereço, então os links que já circulavam por aí continuaram funcionando no site novo.

O design, do jeito que foi desenhado

O arquivo do Jason tinha o site desenhado para quatro telas: celular, tablet, notebook e monitor grande. O site bate com cada uma delas e se ajusta sem saltos no meio do caminho, então nenhuma tela cai num buraco que o design não previu.

A tipografia grande cresce junto com a tela. O texto pequeno, como rótulos e menus, mantém um tamanho confortável de ler em qualquer lugar.

Claro e escuro

Dois pontinhos no topo trocam o site inteiro entre claro e escuro. As cores e os pontos mudam juntos, num movimento só, e o site lembra da escolha na próxima visita.

Uma abertura que continua no site

O Jason desenhou a abertura como animação, e ela foi refeita a partir dela quadro a quadro: uma linha de luz abre, o F sobe e sai pelo topo, e o site entra já em movimento, sem pausa no meio.

Ela toca uma vez só, na primeira visita, e nunca deixa ninguém esperando: numa conexão lenta, o site entra do mesmo jeito.

O trabalho nunca é cortado

Num portfólio, o trabalho vem primeiro. Em vez de forçar todo projeto na mesma caixa, cada um ocupa o formato da própria imagem, e os vídeos seguem a mesma regra. Nada do que o estúdio fez é cortado para caber no layout.

Leve e rápido

As imagens vão no formato mais leve que cada navegador aceita, no tamanho que a tela realmente pede, e só quando estão para aparecer. Passar o mouse sobre um projeto já começa a carregar a página dele, então a primeira foto costuma estar pronta quando ela abre.

O Jason publica sozinho

Projetos, imagens e textos saem de um painel simples. Quando o Jason publica, o site se atualiza sozinho em poucos minutos, e o painel mostra quando a mudança já está no ar. Se uma atualização fosse quebrar o site, ela simplesmente não sai.

Até o ícone da seção About fica na mão dele. Cada ícone sobe uma vez só, e o site adapta para o tema escuro por conta própria.

Astro no front-end, Sanity no CMS e GSAP com Lenis no movimento. Design da Finalv1.