Aqui estão 20 dos melhores sites de portfólio online agora: designers, desenvolvedores, um fotógrafo e um arquiteto apresentando seu próprio trabalho, estúdios e agências vendendo o deles, além de alguns sites de projetos como um brand book e um relatório da indústria. O gosto não decidiu a lista. Sorteei todos os 20 aleatoriamente entre 23 sites de portfólio ao vivo, revisados manualmente, verifiquei que cada um carrega, medi em um telefone e registrei o que você poderia adaptar para seu próprio site. A surpresa: nenhum dos 8 sites com dados suficientes de visitantes reais passa nos três Core Web Vitals do Google, e a pontuação média do Lighthouse móvel é 61,5. Este é o raio de portfólio de 64 sites bonitos, verificados ao vivo e testados de velocidade.
Como estes 20 foram escolhidos e testados
A maioria das listas dos melhores sites de portfólio são favoritos curados. Isso não diz nada sobre o que essas escolhas custam em tempo de carregamento, então usei um sorteio aleatório em vez disso.
- O conjunto: 23 sites de portfólio ao vivo de um banco de dados de design curado que mantenho. Cada um foi revisado manualmente, possui capturas para desktop e mobile, e passou em uma verificação de disponibilidade nos últimos 30 dias.
- O sorteio: 20 sites em ordem aleatória fixa, no máximo dois do mesmo estúdio. Nenhum precisou de troca. Nada aqui é trabalho de cliente meu, e ninguém pagou para estar incluído.
- A verificação ao vivo: cada site foi aberto em um navegador (Chromium) em 31 de outubro de 2026 e carregou o mesmo site para o qual foi listado.
- O teste de laboratório: uma execução do Lighthouse móvel por site entre 12 e 20 de outubro de 2026, registrando a pontuação de desempenho, Largest Contentful Paint e peso da página.
- Os dados de visitantes reais: números do Chrome UX Report para celulares, que o Google coleta de usuários reais do Chrome. Uma página aparece apenas quando tem visitantes suficientes (Chrome UX Report), o que muitos portfólios pessoais nunca alcançam, então 11 dos 20 mostram "sem dados".
- Não é uma classificação: a ordem abaixo é a ordem do sorteio.
O que 20 sites de portfólio custam em velocidade
O Google marca uma página como boa quando seu Largest Contentful Paint (LCP) é 2,5 segundos ou menos, seu Interaction to Next Paint (INP) é 200 milissegundos ou menos e seu Cumulative Layout Shift (CLS) é 0,1 ou menos, medido no percentil 75 dos carregamentos de página. Uma página passa no Core Web Vitals apenas quando atende aos três (web.dev).
| Achado | Resultado |
|---|---|
| Pontuação mediana de desempenho mobile do Lighthouse | 61.5 |
| Pontuação 90 ou superior | 1 de 20 |
| Pontuação abaixo de 50 | 5 de 20 |
| Peso mediano da página | 3.4 MB |
| Páginas acima de 10 MB | 5 de 20 |
| Páginas com menos de 2 MB | 7 de 20 |
| Sites com dados de visitantes reais (CrUX) | 9 de 20 |
| Passam nos três Core Web Vitals, dos 8 com dados suficientes para avaliar | 0 |
| LCP de visitante real dentro de 2,5 segundos | 2 de 9 |
Para comparação, o lançamento do Chrome UX Report de setembro de 2026 do Google coloca a fatia de origens com bom Core Web Vitals em 55,9% entre 18.376.044 origens (notas de lançamento do Chrome UX Report). Nenhum dos 8 portfólios avaliados aqui passa. Desses 8, 7 perdem a meta de LCP de 2,5 segundos, 5 respondem muito lentamente a toques e 2 movem seu layout demais.
Uma página leve não garante uma boa pontuação, e uma página pesada não garante uma ruim. O portfólio de Karl Barnard pesa 0,7 MB mas marca 37 no lab, onde o teste registrou 908 ms de tempo bloqueante enquanto scripts rodavam. Glitch&Grit pesa 47,4 MB e marca 66. A menor página do sorteio, GØDN.studio com 0,2 MB, é também a única a marcar 90 ou acima.
O lab e os visitantes reais discordam aqui também. Gionatan Nese marca 37 no lab, mas visitantes reais veem o conteúdo principal em 1,2 segundos; o site falha apenas em responsividade, com 232 ms contra a linha de 200 ms do Google. Lighthouse é uma execução em um celular emulado, e quando entra em conflito com o Chrome UX Report, web.dev diz que os dados de visitantes reais são provavelmente a visão mais precisa (web.dev).
Com o que esses 20 foram construídos
Next.js roda 6 dos 20. Nuxt e Webflow rodam 2 cada, e Framer, SvelteKit e WordPress rodam um cada. Para os outros 7, a stack não pôde ser lida do HTML. O portfólio de fotografia de Félix Péault em SvelteKit marca 76 em uma página de 1,4 MB. Se você está escolhendo um framework para seu próprio site, Astro vs Next.js aborda o trade-off.
O que os 20 têm em comum
Todo site no banco de dados recebe tags de estilo durante a revisão, e a stack é detectada do HTML ao vivo, então esses são contagens, não impressões.
- Big type é a assinatura. 11 dos 20 usam um nome ou um título em tipo muito grande, a tag mais comum do grupo. Em um portfólio o nome é frequentemente a tela inteira.
- Interação sobre decoração. 7 recebem tag interativa, mais que qualquer outro estilo: cenas 3D, fundos que reagem ao cursor e anéis de projeto que você pode reorganizar. Minimal e tipográfico vêm depois com 6 cada.
- O trabalho é o que vende. 9 começam com fotografia e 8 com ilustração, e os melhores deles mostram uma peça grande em vez de dez pequenas.
- Movimento não é o que os deixa lentos. 6 carregam uma biblioteca de scroll suave ou animação como GSAP ou Lenis. Sua pontuação mediana em lab é 77, contra 57,5 para os outros 14, então neste caso a animação em si não explica os scores lentos.
Os 20 sites de portfólio
Todos os 20 aparecem abaixo em ordem de draw, com medições primeiro, depois uma análise mais próxima de cada um com captura da homepage, o padrão vale a pena emprestar e o trade-off para entender. Números de visitantes reais são de celulares; "sem dados" significa que o Google teve poucos visitantes para reportar. Para seu próprio site, veja design web de portfólio.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 1 | Hobro Digital | 60 | 2,7 s | 282 ms | 0.06 | 6.1 MB | Não detectado |
| 2 | Valentin Gassend | 46 | sem dados | sem dados | sem dados | 1.7 MB | Next.js |
| 3 | Vivien's Creative | 57 | sem dados | sem dados | sem dados | 2.2 MB | Next.js |
| 4 | Oimachi | 47 | sem dados | sem dados | sem dados | 35.4 MB | Webflow |
| 5 | Squarespace Foundations | 56 | 4.5 s | 217 ms | 0.00 | 62.8 MB | Nuxt |
| 6 | AI in Design Report 2026 | 63 | 6.4 s | 98 ms | 0.36 | 7.9 MB | Framer |
| 7 | Julia Stafi | 55 | sem dados | sem dados | sem dados | 9.8 MB | Não detectado |
| 8 | Studio K95 | 58 | 5,5 s | 245 ms | 0.00 | 2.3 MB | Nuxt |
| 9 | Direct Design | 78 | sem dados | sem dados | sem dados | 7.5 MB | Webflow |
| 10 | House of Honey | 74 | 3,0 s | sem dados | 0.00 | 1 MB | Next.js |
| 11 | Félix Péault | 76 | sem dados | sem dados | sem dados | 1.4 MB | SvelteKit |
| 12 | Karl Barnard | 37 | sem dados | sem dados | sem dados | 0.7 MB | Não detectado |
| 13 | Gionatan Nese | 37 | 1,2 s | 232 ms | 0.00 | 14.4 MB | Next.js |
| 14 | SUSO Digital | 79 | 2.8 s | sem dados | 0.00 | 2.7 MB | WordPress |
| 15 | Nordpixel | 79 | sem dados | sem dados | sem dados | 4.1 MB | Não detectado |
| 16 | Alvara House | 79 | sem dados | sem dados | sem dados | 1 MB | Next.js |
| 17 | Haoqi Wen | 28 | 9.7 s | 238 ms | 0.15 | 15.4 MB | Não detectado |
| 18 | Warm & Fuzzy | 76 | 2,4 s | sem dados | 0.00 | 1.1 MB | Next.js |
| 19 | Glitch&Grit | 66 | sem dados | sem dados | sem dados | 47.4 MB | Não detectado |
| 20 | GØDN.studio | 90 | sem dados | sem dados | sem dados | 0.2 MB | Não detectado |
1. Hobro Digital
O nome está em um sans serif muito pesado e largo em branco, esticado quase de borda a borda sobre um rosto desfocado, recortado bem perto, em vermelho profundo e âmbar. A cor quente fica dentro de uma mesma família, então o texto branco é legível de uma vez. Uma pequena linha em monospace embaixo dá o descritor da agência e o lugar, e o contraste entre o tipo de exibição robusto e o texto estilo máquina de escrever leve mantém a hierarquia clara.
Inspire-se: Coloque o nome do seu estúdio em um único tipo de exibição pesado em largura total sobre uma fotografia desfocada com tons quentes ou um quadro de vídeo, e acompanhe com uma pequena linha descritiva em monospace.
Cuidado com: A página é mais pesada que a média e fica no meio dos resultados do teste. Visitantes reais também veem carregamento lento do conteúdo principal e resposta lenta aos toques e cliques, o que corresponde a um pano de fundo em tela cheia com movimento e animação por script.
Desenvolvido internamente. Visite hobro.digital.
2. Valentin Gassend
O nome faz o trabalho. Um sans pesado e alto condensado em preto se empilha em um bloco fechado, e o G e o N final mudam para um script pincelado verde, o que dá personalidade a uma marca simples. Linhas de grade verde finas dividem o terreno rosa pálido em células, enquanto pequenas legendas em maiúsculas ficam nos cantos e deixam o centro limpo.
Inspire-se: Coloque seu nome em um tamanho gigante em um único tipo pesado, substitua um par de letras por um tipo script em uma cor de destaque, e repita essa cor em linhas de grade finas atrás dele.
Cuidado com: O teste de laboratório classificou a página como lenta apesar do seu peso leve, e o Google tem dados muito limitados de visitantes reais para confirmar como ela se comporta para usuários de fato.
Desenvolvido internamente. Visite valentingassend.com.
3. Vivien's Creative
Uma fotografia em sangramento total de dunas pálidas preenche a tela, com dois caminhantes em casacos escuros posicionados pequenos contra a areia, dando à página escala e calma. A intro fica em um serif leve e literário sobre o céu cinza-verde, enquanto o nome abaixo usa um sans gigante e pesado em branco que vai de borda a borda. Os pequenos links do menu em maiúsculas ficam fora do caminho, então a imagem e o nome levam a abertura.
Inspire-se: Combine uma fotografia em sangramento total com um wordmark de tamanho exagerado recortado na borda inferior e uma intro serif curta acima, para que um pequeno estúdio tenha uma tela de abertura confiante a partir de uma boa imagem e um par de tipos de letra.
Cuidado com: A página é leve, mas o resultado do teste é apenas mediano, e o Google não tem dados suficientes de visitantes reais para julgar como ela se comporta para pessoas de verdade.
Criado por Christopher Doyle & Co.. Visite vivienscreative.com.au.
4. Oimachi
A manchete define um grande grotesco simples contra uma única palavra serif itálica, dando à página uma voz clara antes de qualquer pessoa ler a cópia do corpo. Um terreno cinza pálido, margens fechadas e um grande painel escuro com duas formas arredondadas bege mantêm a paleta quieta, enquanto uma coluna estreita de cartões postais à direita adiciona fotografia e um destaque laranja. Em dispositivos móveis, a mesma manchete se empilha nitidamente acima de uma grade de ícones pretos em negrito desenhados sobre grades de construção desbotadas.
Inspire-se: Combine uma manchete em sans simples com uma única palavra serif itálica para dar a uma seção principal orientada para texto uma voz reconhecível, depois mostre trabalho de processo como ícones sobre grades de construção desbotadas.
Cuidado com: O teste de laboratório achou a página lenta e muito pesada, com movimento GSAP detectado junto com Webflow, e não havia dados suficientes de visitantes reais do Google para dizer como ela se comporta para usuários de fato.
Projetado internamente. Visite oimachi.co.
5. Fundações Squarespace
Um campo preto profundo sustenta uma breve declaração centrada em uma sans serif limpa e de peso uniforme, sem nada que compita com ela. Pequenos tiles de imagem, inclinados em um ângulo isométrico, ficam ao redor das bordas como uma órbita solta, misturando uma marca de logo branca, uma jarra de cerâmica em sombra quente e uma tira metálica pálida. A contenção e o espaçamento amplo fazem a página parecer calma e segura, e os tiles inclinados sugerem movimento.
Pegue emprestado isto: Combine uma única frase curta em uma sans serif limpa com um punhado de tiles de imagem inclinadas em um fundo escuro e plano, que precisa apenas de algumas imagens recortadas e uma transformação CSS.
Cuidado com: Este é um livro de marca imersivo em vez de uma página de vendas, e sua imagética cria um grande download: visitantes reais esperam mais do que os objetivos do Google pelo conteúdo principal e pela resposta aos toques.
Criado por Resn. Visite brand.squarespace.com.
6. Relatório IA em Design 2026
Uma fotografia de flor invertida e desbotada em cinza e pêssego fica atrás de um espalhamento de cards com gradiente granulado em laranja, lilás e verde. Cada card traz um pequeno rótulo em espaçamento fixo nomeando uma função de trabalho, dando à colagem uma ordem editorial discreta. O painel central preto com uma marca geométrica sans branca pesada ancora a composição, e a visualização móvel mantém a paleta com um bloco de logo preto ao lado de uma barra de menu laranja brilhante.
Pegue emprestado isto: Combine um grande headline sans com espaçamento apertado com pequenos rótulos em espaçamento fixo, e construa a colagem hero a partir de um punhado de imagens com gradiente granulado em camadas sobre uma única fotografia colorida.
Cuidado com: A página é mais pesada que a média, e visitantes reais veem carregamento lento do conteúdo principal e alguma mudança de layout, então a colagem grande é a primeira coisa a inspecionar.
Criado por ++hellohello. Visite stateofaidesign.com.
7. Julia Stafi
A página é quase todo espaço em branco, com uma marca wordmark centrada em uma serif de alto contraste e uma breve introdução definida em uma serif de texto mais leve. As linhas de introdução atravessam a página em um padrão escalonado e diagonal, dando movimento a um parágrafo simples sem decoração. Abaixo dela, um retrato alto da arquiteta em preto contra uma parede desgastada e manchada adiciona o único tom forte, então a imagem escura e a página pálida se equilibram uma à outra.
Pegue emprestado isto: Escalone as linhas da sua introdução pela página com recuos à esquerda simples, e emparelhe-as com um retrato alto em um fundo branco simples.
Cuidado com: A página é mais pesada que a média e apenas na média nos testes do laboratório, o que se adequa a um layout construído em torno de uma grande fotografia, e não há dados suficientes de visitantes reais do Google para dizer como funciona para usuários reais.
Criado por Sasha Khudova. Visite juliastafi.com.
8. Studio K95
Um azul plano e saturado preenche a tela, e uma rosa pixelada construída a partir de blocos semelhantes a vidro pálido fica no meio sem nada competindo com ela. Pequenos cards de projeto fluem ao seu redor em anéis, e os cartazes vermelho e creme se destacam contra o azul na visualização do telefone. A navegação usa tiny sans serif em maiúsculas em branco, então a obra de arte lidera e a interface permanece discreta.
Pegue emprestado isto: Use um bloco plano de cor forte como palco e adicione um pequeno toggle estilo Rings and Spiral que reorganiza suas miniaturas de projeto, para que o mesmo trabalho possa ser navegado em um layout diferente.
Cuidado com: A página em si é leve, mas o teste de laboratório é apenas mediano e visitantes reais veem carregamento lento do conteúdo principal e resposta lenta a toques e cliques, então a cena 3D é a primeira coisa a verificar.
Desenvolvido internamente. Visite k95.it.
9. Direct Design
Um semáforo renderizado e brilhante fica contra um gradiente amarelo suave, com uma lâmpada de rosto sorridente verde e uma placa de diamante que transformam a ideia de direção da agência em uma imagem. O título usa um sans grotesco grande e apertado em preto sobre branco, então é lido de uma vez ao lado da imagem. Uma barra de navegação arredondada preta e um pequeno botão de contato amarelo mantêm a paleta em preto, branco, amarelo e verde.
Pegue isso emprestado: Combine um único objeto renderizado sob medida com um título muito grande, depois leve suas cores para a barra de menu e o botão para que a página pareça marcada sem precisar de muitos assets.
Cuidado com: A página é mais pesada que a média e apenas mediana no teste de laboratório, o que se encaixa com a imagem renderizada e as bibliotecas de animação detectadas, e não há dados de visitantes reais do Google suficientes para dizer como funciona para usuários reais.
Construído pela COSMOFLOW Agency. Visite wearedirect.co.
10. House of Honey
O wordmark se estende de ponta a ponta em um sans com peso largo e pesado, com um fino "of" itálico serifa cortando através dele em contraste. Definido em um rosa blush plano em marrom chocolate escuro, é lido de uma vez e sente-se quente. O tagline fica em pequenas maiúsculas serifa em cada canto, e a fotografia de interiores de sangramento total abaixo repete os rosas e laranjas da paleta.
Pegue isso emprestado: Combine um wordmark sans muito pesado com uma única palavra serifa itálica delicada, depois mantenha a paleta em uma única cor de fundo plano e uma tinta escura para que a fotografia carregue tudo o mais.
Cuidado com: A página em si é leve, mas visitantes reais veem carregamento lento do conteúdo principal (LCP), um custo comum quando uma grande fotografia de sangramento total é a primeira coisa na tela, e o resultado do laboratório é apenas mediano.
Construído por Edoardo Lunardi. Visite houseofhoney.com.
11. Félix Péault
A página é pouco mais que um gradiente passando de azul profundo através de um verde claro em um branco morno desaturado, e essa lavagem cuida de toda a cor. Um par de letras oversized escuras, um F e um P, ficam nos cantos como um monograma, enquanto um sans serif condensado alto carrega o tagline e o pequeno menu. Em mobile, uma fotografia de pessoas vistas de cima, com longas sombras, adiciona a única imagem.
Pegue isso emprestado: Defina suas iniciais como letras oversized em cantos opostos e preencha o fundo com um gradiente suave, para que a página tenha uma identidade sem nenhuma imagem pesada.
Cuidado com: O teste de laboratório resultou mediano, embora a página em si seja leve, e não há dados de visitantes reais do Google suficientes para dizer como funciona para usuários reais.
Desenvolvido internamente. Visite felixpeault.com.
12. Karl Barnard
O título usa uma serifa de alto contraste, com uma palavra alterada para itálico verde que carrega toda a ênfase. Todo o resto fica quieto: fundo branco morno desaturado, linhas de grade tênues e uma pequena face monoespaçada para rótulos. O retrato é construído a partir de caracteres digitados, para que a imagem ecoe o tipo e a página pareça uma ideia em vez de um monte de partes.
Pegue isso emprestado: Escolha uma palavra no seu título, defina-a em itálico e uma única cor de destaque, e deixe o resto da paleta em tons neutros.
Cuidado com: O teste de laboratório classificou a página como lenta embora a página em si seja leve, e não houve dados de visitantes reais do Google suficientes para dizer como parece para usuários reais.
Projetado internamente. Visite karlbarnard.co.za.
13. Gionatan Nese
Uma página branca, um pequeno conjunto de fotos de produtos, pôsteres e objetos dispostos em um anel solto, e quase nada mais. O minúsculo menu no topo combina uma sans simples para as iniciais com uma serif refinada para Creative Space, em abas cinza claro, criando um contraste discreto. As imagens se sobrepõem em diferentes tamanhos, então o olho se move ao redor do círculo, e as margens brancas vazias fazem cada miniatura parecer um objeto em exposição.
Tome emprestado isto: Organize um pequeno conjunto de seus melhores thumbnails de projetos em um anel solto em uma página branca simples, com sobreposições e tamanhos variados, para que o trabalho fale por si sem uma imagem destaque ou título.
Fique atento a: O teste em laboratório descobriu a página lenta e muito pesada, e visitantes reais veem respostas lentas aos toques (INP), embora o conteúdo principal em si chegue rapidamente.
Projetado internamente. Visite gionatannese.com.
14. SUSO Digital
O hero fica em um campo branco calmo com um único brilho gradiente suave de pêssego, lilás e azul pálido atrás de uma forma wireframe branca fina. O título usa uma sans serif limpa e uniforme em tamanho grande, com um pequeno rótulo monoespacial acima e dois botões claros em forma de pílula abaixo. O espaçamento é generoso, então a página se lê rapidamente e um único gráfico faz toda a decoração.
Tome emprestado isto: Combine um título sans serif limpo com pequenos rótulos monoespaciais e botões, depois coloque um gráfico gradiente suave atrás do texto para que a página pareça projetada sem precisar de fotografia.
Fique atento a: A página é leve, mas visitantes reais veem problemas em quão rapidamente o conteúdo principal carrega (LCP), e o grande gráfico gradiente no hero é um lugar provável para verificar primeiro.
Construído por Fhoke. Visite susodigital.com.
15. Nordpixel
Uma fotografia de montanha nublada e escura preenche a tela toda, com uma cabana de vidro iluminada fracamente no canto inferior direito. A logomarca fica no meio em letras maiúsculas geométricas em negrito muito espaçadas, terminando em um ponto azul que se repete no logo e nos botões. Uma barra de menu arredondada branca flutua sobre a imagem, então o destaque azul e as letras pálidas fornecem todo o contraste.
Tome emprestado isto: Combine uma fotografia sangrada na tela inteira, escurecida com uma sobreposição, com uma logomarca em negrito muito espaçada e uma única cor de destaque usada apenas para o ponto e os botões.
Fique atento a: A página é mais pesada que a média e apenas intermediária no teste em laboratório, o que é o custo de uma fotografia em tela cheia, e não há dados suficientes de visitantes reais do Google para dizer como funciona para visitantes de verdade.
Construído por Michael Schnyder. Visite nordpixel.ch.
16. Alvara House
Uma fotografia sangrada na tela inteira de uma casa com telhado plano ao entardecer fica sob uma enorme logomarca sans serif branca, e a palavra HOUSE passa semi-transparente sobre a linha do telhado para que o tipo e o edifício se leiam como uma única imagem. O céu azul dá espaço limpo e calmo para pequenos rótulos nos cantos, e o brilho quente nas janelas contrasta com o fundo fresco. Um botão em forma de pílula e um cartão fosco são os únicos elementos em competição.
Tome emprestado isto: Combine uma fotografia forte com uma logomarca gigantesca que se sobreponha ao assunto, e mantenha todos os outros elementos pequenos e escondidos nos cantos.
Fique atento a: O teste em laboratório foi intermediário mesmo que a página seja leve, então a grande fotografia do hero é o lugar mais provável para procurar melhorias, e não havia dados suficientes de visitantes reais do Google para dizer como se sente na prática.
Criado pela Visuvate Studio. Visite alvara.visuvate.com.
17. Haoqi Wen
Um script azul brilhante e inflado dizendo hello fica sobre um campo azul-céu pálido, e é o único objeto macio em uma página caso contrário governada por linhas de grade finas e pequenas marcas de mira. A manchete sans pesada e larga em preto pesado ancora o canto inferior esquerdo, enquanto uma fonte monoespacial lida com a navegação e a biografia. Esse contraste entre lúdico e técnico combina com um designer de engenharia.
Pegue emprestado isto: Combine um objeto tátil renderizado com uma grade de linhas finas rígida e uma única fonte monoespacial para texto pequeno, para que um site pessoal pareça tanto caloroso quanto preciso.
Cuidado com: O teste de laboratório descobriu a página lenta e muito pesada, e visitantes reais veem problemas com carregamento, responsividade e estabilidade de layout, que é o preço usual de um grande herói renderizado e detalhes ao vivo.
Projetado internamente. Visite haoqi.design.
18. Warm & Fuzzy
Uma imagem de filme desbordante e ligeiramente desfocada preenche toda a tela, e seus rosas de doce, amarelos mostarda e verdes frondosos carregam a abertura. A lettering de bolha brilhante fica no meio, enquanto a pequena navegação em uma simples sans serif fica fora do caminho. Uma tagline grotesca em negrito na borda inferior ancora a página e define um tom amigável e confiante.
Pegue emprestado isto: Use uma imagem em movimento em tela cheia como a abertura inteira, depois mantenha o logo, alguns links curtos e uma única linha em negrito de texto como o único mobiliário no topo.
Cuidado com: O teste de laboratório saiu regular apesar de a página em si ser leve, então o fundo em movimento em tela cheia é o provável custo, e não há dados suficientes de visitantes reais do Google para dizer como se sente para usuários reais.
Criado pela Neutral Studio. Visite warmnfuzzy.tv.
19. Glitch&Grit
A página divide a tela no meio, com uma metade preta lisa à esquerda carregando uma grande silhueta de flor cinza e uma metade cinza carvão ligeiramente mais clara à direita. Sobre ambas fica um enorme heading em uma fonte sans aberta e em negrito em verde-limão macio, que permanece legível contra o cinza e o preto igualmente. Navegação e o nome do estúdio ficam em pequenas capitais brancas tucadas nos cantos, então o centro fica limpo.
Pegue emprestado isto: Combine um enorme heading em uma única cor de destaque com um fundo dividido e plano e uma forma recortada, para que a página se sinta distintiva sem um orçamento de fotografia.
Cuidado com: A página é muito pesada e apenas regular no teste de laboratório, e o Google tem dados insuficientes de visitantes reais para dizer como se sente na prática, então os visuais grandes são o primeiro lugar para procurar economias.
Visite glitchandgrit.com.
20. GØDN.studio
Um campo quase preto traz uma única e grande afirmação em capitais grotescas pesadas e bem juntas, e a última palavra cai em um serif itálico leve que muda a voz imediatamente. Uma marca granulada e pontilhada fica atrás do tipo como ruído estático, adicionando profundidade sem fotografia. Pequenos rótulos em espaçamento monoespacial largo ficam quietos ao redor, para que o título seja lido primeiro.
Pegue este: Combine um título sans pesado com uma palavra em serif itálico leve, e mantenha todo o resto em pequenas capitais monoespaciais espaçadas em um fundo escuro.
Cuidado com: A página testou rápido no laboratório e é leve, o que é bom visto que roda GSAP e Three.js, mas não houve dados suficientes de visitantes reais do Google para dizer como ela funciona para usuários reais.
Construído por Bruno Godinho. Visite studio.godn.pt.
Como fazer um portfólio que seja bonito e rápido
Os 20 acima mostram que um portfólio pode parecer distintivo em quase qualquer stack. Os mais rápidos diferem dos mais lentos em como carregam o trabalho em si.
- Mostre três a cinco projetos adequadamente. A pesquisa do Nielsen Norman Group com 204 profissionais de UX que contratam recomenda escolher 3 a 5 projetos como estudos de caso detalhados, qualidade acima de quantidade (NN/g).
- Torne-o verificável. A mesma pesquisa descobriu que gerentes de contratação raramente lerão um portfólio inteiro de ponta a ponta (NN/g), então coloque o problema, seu papel e o resultado onde um olho que passa os olhos cai.
- Carregue a primeira imagem cedo. Nunca defina loading="lazy" na imagem que preenche a primeira tela, mantenha-a no HTML da página em vez de adicioná-la com JavaScript, e dê-lhe fetchpriority="high" (web.dev).
- Carregue com atraso tudo abaixo dela, com tamanhos definidos. Use loading="lazy" apenas para imagens fora da primeira tela, e adicione width e height a cada imagem para que o layout não pule (web.dev).
- Observe o total. No percentil 90, os sites já enviam mais de 5 MB de imagens (web.dev), e 5 destes 20 portfólios pesam mais de 10 MB no total.
- Meça visitantes reais você mesmo. Um pequeno portfólio pode nunca receber tráfego suficiente para aparecer no Chrome UX Report, e web.dev recomenda fortemente configurar seu próprio monitoramento de usuários reais (web.dev).
Se você quer um portfólio que ganhe trabalho e não apenas tenha boa aparência, design de portfólio web é como eu os construo: rápidos, encontrados em buscas e escritos em torno do trabalho. Se seu site atual apenas precisa de uma aparência nova e uma primeira tela mais rápida, um redesenho de site é o lugar para começar.
Perguntas que as pessoas fazem
O que faz um bom site de portfólio?
Mostre o trabalho grande e cedo, com contexto suficiente para explicá-lo. Entre estes 20, as primeiras telas mais fortes fazem uma coisa: um nome em tipo muito grande, um único projeto ou uma única fotografia. A pesquisa do Nielsen Norman Group acrescenta a parte que ganha empregos: alguns projetos escritos como estudos de caso, não uma parede de imagens prontas (NN/g).
Quantos projetos um portfólio deve mostrar?
O Nielsen Norman Group recomenda escolher 3 a 5 projetos como estudos de caso detalhados, com qualidade acima de quantidade (NN/g). Menos, projetos mais profundos também significam menos imagens grandes na página.
Qual é a melhor plataforma para um site de portfólio?
Estes dados não dão vitória a um stack. Next.js executa 6 dos 20, Nuxt e Webflow 2 cada, e Framer, SvelteKit e WordPress um cada, enquanto 7 são construídos de formas que não puderam ser detectadas. Next.js sozinho tem tanto um 79 quanto um 37 aqui, então escolha o que você pode manter atualizado e gaste o esforço em como suas imagens carregam.
Por que meu site de portfólio é lento?
A causa é geralmente o trabalho em si: imagens em tamanho real e vídeo na primeira tela, ou uma primeira imagem que carrega tarde porque está carregada com atraso ou adicionada por JavaScript (web.dev). Neste sorteio, 7 dos 8 portfólios julgados pelo Google perdem o alvo LCP de 2,5 segundos.
Por que meu portfólio não tem dados de Core Web Vitals?
O Chrome UX Report inclui apenas páginas e sites com visitantes suficientes para formar uma amostra estatisticamente significativa (Chrome UX Report). 11 destes 20 portfólios não têm dados de visitantes reais. Use um teste de laboratório como Lighthouse enquanto isso, e adicione seu próprio monitoramento de usuários reais se quiser números de campo.
Onde posso ver mais sites bonitos?
O pilar dos 64 sites bonitos abrange oito categorias, com os mesmos testes. Para restaurantes e marcas de alimentos, veja os 20 melhores sites de restaurantes e alimentação, e, para galerias de navegação, o compilado de sites de inspiração para web design.