Case real, para um cliente de verdade
Do Behance a um site com voz própria
Derik Stefaisk é designer e estrategista de marcas em São Paulo, e o portfólio dele morava só no Behance. Fiz o site próprio de ponta a ponta: direção visual aprovada entre cinco propostas, 22 cases reescritos com o texto fora das imagens e um site estático publicado em derikstefaisk.cc.
- Cliente
- Derik Stefaisk, designer e estrategista de marcas
- Entrega
- Site publicado: home, índice de cases, 22 páginas de case, sobre e 404
- Meu papel
- Direção visual, organização do conteúdo, textos dos cases, desenvolvimento e publicação
- Ferramentas
- Claude Code · Astro · Python para o conteúdo · GitHub e Cloudflare Pages
- Data
- 31 out 2026
Todo o portfólio do Derik estava no Behance: 30 projetos, a maioria com o texto dentro das imagens. Funciona como vitrine, mas não é dele. Não dá para controlar a ordem, a cara do perfil nem o que o Google lê. O pedido era um site próprio que mostrasse o trabalho e a personalidade dele e deixasse o contato fácil de achar.
O site tinha que parecer do Derik, e não um template de portfólio. Por isso, nenhuma imagem foi gerada: todo o visual vem do trabalho dele.
Objetivo: apresentar os trabalhos, comunicar a identidade do designer e facilitar o contato para novos projetos.
Público: potenciais clientes, marcas, estúdios, agências e recrutadores.
Estrutura: início com destaques, galeria com todos os projetos do Behance, página de projeto com contexto, desafio, conceito, participação e créditos, sobre, e rodapé com e-mail e redes, sem formulário.
Referências: Rachel Denti, Pánico, Colletivo e Casa Rex, para orientar uma identidade própria.
Requisitos: celular, tablet e computador, imagens otimizadas, contraste adequado, configuração para buscadores e estrutura pronta para novos projetos e para a versão bilíngue.
Plataforma: GitHub e Cloudflare.Briefing do site portfólio · Derik Stefaisk
- Cliente real. A frase de abertura, a bio, a lista de serviços e as fotos vêm do Derik.
- O site está publicado no domínio dele, derikstefaisk.cc. No lançamento, site e domínio ficam na conta Cloudflare dele, comigo como membro.
- O lançamento é em português, com a estrutura pronta para a versão em inglês.
Antes de escrever código, mostrei a Home em cinco direções visuais num canvas, cada uma com os textos e os projetos reais do Derik. A aprovação foi só da Home, para decidir a linguagem antes de abrir o resto.
A direção E ganhou. Na hora de fechar a paleta, o Derik vetou a combinação de azul com vermelho, porque lembrava a bandeira dos Estados Unidos. A paleta ficou só em vermelhos, com neutros quentes por baixo.
Paleta aprovada
Vermelhos a partir de #F50800 e #A30500, com os derivados #CC0600, #7A0400, #5C0300, #FF6B5E e #FFD1CC · neutros #F7F7F2, #111111, #333333, #4A4A4A, #E9E9E3 e #FFFFFF
O asterisco é o marcador da marca: aparece depois do nome, nas etiquetas e na faixa de serviços. Um detalhe de ajuste fino: na Archivo ele precisa descer 0,16 em para alinhar com a caixa alta. Na DM Mono, não.
O Behance bloqueia leitura automática, então a extração foi feita pelo navegador. Um script em Python baixou as imagens na maior resolução disponível e montou um arquivo de dados por projeto, com título, ano, áreas, ferramentas, créditos e blocos de texto e imagem.
Depois o Derik subiu os arquivos abertos de cada case numa pasta compartilhada: os PNG originais, PDFs de apresentação e as fontes de verdade. Foi isso que mudou o tamanho do site.
Entraram só os cases que tinham arquivo aberto: 22 dos 30. Com os originais em mãos, cada case deixou de ser uma pilha de imagens e virou uma página com capítulos, paletas clicáveis, tipografia na fonte real e explorador de versões da marca.
- Um arquivo de dados por case, com capítulos de texto e mídia, carrosséis, paletas, tipografia, galerias e fechamento.
- O texto que estava dentro das imagens do Behance foi para o HTML. Agora o Google lê, e o leitor de tela também.
- As imagens vêm do Behance, de páginas de PDF ou dos arquivos abertos, com recorte definido em frações.
- A tipografia aparece na fonte real: o arquivo que o Derik mandou ou a mesma família no Google Fonts.
- Somando os 22 cases: 52 capítulos, 23 carrosséis, 21 paletas, 6 blocos de tipografia e 2 exploradores de versões.
WTF NerdStore · explorador de versões
Um case inteiro
O site é estático, feito em Astro, com o código no GitHub e a publicação no Cloudflare Pages. Os textos ficam num arquivo só, com as mesmas chaves que a versão em inglês vai usar. A ordem dos cases, os pares da Home e as telas que aparecem no hover ficam num arquivo de curadoria, fácil de mudar sem mexer no código.
Índice de cases · prévia no hover
O índice começou como grade de capas e virou uma lista de faixas em tipografia grande. Na primeira versão, a prévia seguia o cursor. Na seguinte, passou a abrir dentro da própria faixa.
- O perfil do Behance carrega a grade aos poucos, conforme a rolagem. A primeira extração pegou 12 projetos. Na segunda, rolando até o fim, vieram os 18 que faltavam.
- A pasta compartilhada pelo iCloud criou arquivos duplicados. Removi as cópias para nenhum case repetir imagem.
- O Derik vetou o azul com vermelho, que lembrava os Estados Unidos. A paleta ficou só em vermelhos e neutros.
- Quatro cases chegaram só com imagens, sem texto nenhum: A Turquesa, João Bruxão, Unique e ZyGO. Os textos foram escritos a partir das peças e estão com o Derik para revisão.
- A prévia no endereço .pages.dev ficou fora do Google com noindex, para não competir com o domínio final.
O site está publicado em derikstefaisk.cc. A Home abre com o nome em letra enorme e passa direto para oito cases em pares de tamanhos diferentes. Depois vêm os serviços numa faixa vermelha, a apresentação e o contato.
No celular
- Sitemap, robots.txt e imagem de compartilhamento em todas as páginas.
- Dados estruturados de pessoa, para o Google ligar o site ao Derik.
- Textos dos cases em HTML, e não mais dentro das imagens.
- Imagens em WebP e site estático, sem banco de dados nem servidor para manter.
O que ficou
- Num portfólio de designer, o site não pode competir com o trabalho. A direção aprovada é a mais seca das cinco, e é a que deixa as marcas do Derik aparecerem.
- Mostrar cinco Homes com o conteúdo real decidiu a linguagem antes de abrir o resto do site. Ninguém precisou imaginar como ficaria.
- Arquivo aberto vale mais que mais projetos. Cortar de 30 para 22 cases deixou o site menor e cada case muito melhor.
- O que está escrito dentro de uma imagem não existe para o Google. Passar o texto das peças para o HTML resolve isso.
Continue
Próximo