A tarefa
Um estúdio de design é julgado pelo site antes de alguém abrir o portfólio. Um template com fotos de banco de imagem diz que o estúdio compra o próprio visual em outro lugar, o oposto do que ele vende.
A outra metade do trabalho é comum. O site precisa mostrar os projetos, dizer o que o estúdio faz, trazer o que os clientes falam depois e recolher um briefing, tudo em uma página.
O que construímos
O nome ocupando a tela e arte própria
A primeira tela é o nome do estúdio na largura inteira, letra por letra, em um azul só sobre fundo claro. Embaixo, dois blocos: o que o estúdio faz e um retrato ilustrado que define a linguagem visual da página.
Nenhuma imagem foi comprada. Os retratos, a cena do estúdio, a loja e a página impressa são desenhados na mesma paleta e com a mesma espessura de linha, e é isso que faz a página se ler como um trabalho.
Três projetos em vez de uma parede de miniaturas
A vitrine tem três casos, cada um em um cartão de largura total: uma linha de geleias, a identidade de um mercadinho e um anuário impresso em papel sem revestimento. Uma etiqueta diz o tipo de trabalho, uma palavra grande nomeia o objeto, e duas ou três frases contam qual era a limitação.
Três bastam. Um estúdio que mostra trinta projetos pede que o visitante escolha sozinho; um estúdio que mostra três já escolheu.
Depoimentos como retratos ilustrados
As palavras dos clientes passam em um carrossel, com um depoimento aberto por vez e o nome e o cargo embaixo. Abaixo do carrossel, as mesmas pessoas aparecem em uma fileira de cartões inclinados com retratos, desenhados no mesmo estilo do resto da página.
Um site de portfólio costuma colocar uma foto de banco de imagem ao lado da citação, e ninguém acredita nela. Um retrato ilustrado não faz esse tipo de afirmação e mantém os depoimentos dentro da mesma linguagem visual.
Serviços em palavras simples e um formulário de briefing
Os serviços são uma lista numerada, e não uma grade de ícones: embalagem, identidade, direção de arte, varejo, editorial. Cada linha diz o que o estúdio entrega no fim, que é o que o cliente está comprando.
A página termina no briefing. O formulário aceita até um rascunho e diz que o estúdio responde em dois dias úteis; se o trabalho não for para eles, costumam indicar para quem é.
Por dentro do projeto
A página é escrita à mão e conferida por scripts antes de ir para o ar: contraste, erros de console, as animações. Aqui estão as conferências e os números que elas produzem.
Velocidade
Desempenho 98 no desktop
O Lighthouse mede a versão de desktop em 98 de desempenho, com o maior elemento na tela em menos de um segundo.
A página inteira tem 730 KB
Tudo o que está na página — as ilustrações, as fontes, o código — dá cerca de 730 kilobytes em 27 requisições.
Logos desenhados em vetor
Os seis logos de empresas na página são feitos em SVG, e não exportados como imagem.
Nada pula enquanto carrega
O deslocamento de layout medido no celular é 0,001, praticamente nada nessa métrica.
Acessibilidade
Acessibilidade 94 nos dois testes
A checagem de acessibilidade volta com 94 no celular e 94 no desktop: ordem dos títulos, descrição das imagens, o nome de botões e campos.
Contraste conferido por script
Um script mede cada par de texto sobre fundo no nível de contraste WCAG AA e roda em todas as sete paletas da marca para as quais o site pode mudar.
Confiabilidade
Checagem de console e animações
Antes de publicar, um script abre a página compilada no navegador, junta qualquer erro de console ou requisição que falhou, e confirma que as animações de entrada realmente disparam.
HTTPS sem caminho de volta
O endereço inseguro redireciona para HTTPS, e o servidor manda um cabeçalho HSTS com preload, então o navegador para de tentar o inseguro.
Busca
Nota cheia em SEO e boas práticas
O Lighthouse dá 100 em SEO e 100 em boas práticas, no celular e no desktop, sem nenhum item reprovado nas duas seções.
Versão mobile
Conferido na tela do celular
Com 390 pixels de largura a página tem exatamente 390 pixels, então não existe rolagem lateral.
No celular
O que saiu disso
- Trabalhos, serviços e depoimentos em uma página, e o briefing sai dali mesmo.
- Toda imagem do site foi desenhada para ele, sem nada de banco de imagem.
- Um projeto novo entra como um cartão, sem mexer no layout.
O site agora faz a primeira reunião sozinho. O cliente vê como o estúdio pensa, lê três projetos com as limitações de cada um, ouve quem já trabalhou com ele e manda um briefing pela mesma página.
