Aqui estão 64 websites bonitos, oito em cada uma das oito categorias, de estúdios e portfólios a restaurantes, museus e marcas de saúde. Não escolhi pelo meu gosto. Sorteei todos os 64 aleatoriamente de 227 sites ao vivo e revisados à mão, verifiquei que cada um carrega, medi cada um em um telefone e anotei o que vale a pena copiar. O achado constrangedor é velocidade: apenas 11 dos 35 sites com dados suficientes de visitantes reais passam nas três Core Web Vitals do Google, e a pontuação mediana móvel do Lighthouse é 61.
Como estes 64 foram escolhidos e testados
A maioria das listas de "melhor website" são os favoritos de uma pessoa. Isso funciona para inspiração, mas esconde o custo de velocidade de páginas bonitas, porque os exemplos lentos tendem a desaparecer da lista curta. Usei o método oposto.
- O conjunto: 227 websites ao vivo de um banco de dados de design curado que mantenho. Cada um foi revisado à mão, tem uma captura desktop e móvel, e passou uma verificação de disponibilidade nos últimos 30 dias.
- O sorteio: oito sites aleatoriamente de cada uma das oito categorias, com no máximo dois de qualquer estúdio. Nada aqui é meu trabalho de cliente, e ninguém pagou para ser 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. Dois sites no sorteio original ficavam atrás de telas de verificação de idade que ocultam todo o design, então foram trocados pelos próximos sites em suas categorias.
- O teste de laboratório: um teste móvel do Lighthouse por site entre 12 e 31 de outubro de 2026, registrando a pontuação de performance, Largest Contentful Paint e peso total da página.
- Os dados de visitantes reais: números do Chrome UX Report para telefones, que o Google coleta de usuários reais do Chrome em uma janela móvel de 28 dias. Sites pequenos muitas vezes não têm visitantes suficientes para aparecer, então 26 dos 64 mostram "sem dados".
- Não é uma classificação: a ordem dentro de cada categoria é a ordem do sorteio.
O que 64 websites bonitos custam em velocidade
Google chama um LCP de 2,5 segundos ou menos, um INP de 200 milissegundos ou menos e um CLS de 0,1 ou menos de "bom", medido no 75º percentil de carregamentos de página (web.dev). Uma página passa em Core Web Vitals quando atende aos três. Os 64 sites caíram assim.
| Achado | Resultado |
|---|---|
| Pontuação mediana de desempenho mobile do Lighthouse | 61 |
| Pontuação 90 ou superior | 7 de 64 |
| Pontuação abaixo de 50 | 16 de 64 |
| Peso mediano da página | 4.25 MB |
| Páginas acima de 10 MB | 15 de 64 |
| Página mais pesada | 104,4 MB (ERA Residence) |
| Sites com dados de visitantes reais (CrUX) | 38 de 64 |
| Passam em todos os três Core Web Vitals, dos 35 com dados suficientes para avaliar | 11 |
| LCP de visitante real dentro de 2,5 segundos | 20 de 38 |
Para comparação, o relatório Chrome UX Report de setembro de 2026 do Google coloca a participação de origens com Core Web Vitals bons em 55,9% entre 18.376.044 origens (notas de lançamento do Chrome UX Report). Estes 64 sites passam em pouco mais da metade dessa taxa, 11 de 35 ou cerca de 31%. Sites bonitos não precisam ser lentos, mas a maioria destes é.
A pontuação em lab e o resultado de visitantes reais frequentemente discordam, o que importa se você julgar um site pelo seu número de Lighthouse. O Lighthouse não consegue medir INP (web.dev), e executa uma vez, em um ambiente controlado, em vez de em dispositivos reais e redes. Heron AI marca 52 em lab mas passa em todos os três Core Web Vitals para visitantes reais. Fauna Robotics pesa 68,6 MB e ainda assim passa, porque a parte visível da página chega rapidamente.
As categorias diferem menos do que você poderia esperar. Os estúdios tiveram a melhor pontuação mediana em lab com 69,5, e os sites de cultura, educação e sem fins lucrativos tiveram a menor com 50,5. Sites de comida, bebida e hospitalidade, que dependem muito de fotografia e vídeo em tela cheia, não tiveram nenhum site que passou em todos os três Core Web Vitals.
O que os 64 foram construídos com
Next.js roda 13 dos 64 e Nuxt 10. WordPress tem 9 e Webflow 8, Shopify 3 e Framer 2, com um site cada em Astro, Craft CMS, Gatsby, Remix e SvelteKit. Para 14 sites, a stack não estava visível no HTML. Se você está escolhendo um framework para sua própria construção, Astro vs Next.js e o hub de frameworks web cobrem os trade-offs.
O que os 64 têm em comum
Cada site no banco de dados recebe uma tag de estilo durante a revisão, e a stack é detectada a partir do HTML ao vivo, então esses padrões são contagens em vez de impressões.
- Contenção vence. 23 dos 64 são marcados como minimalistas, mais que qualquer outro estilo. Muito espaço, uma família de fontes e uma paleta curta fazem a maior parte do trabalho.
- Fotografia carrega a página. 22 começam com fotografia. Uma única imagem forte em largura total vence uma colagem quase sempre.
- Movimento é comum, e custa. 20 sites carregam uma biblioteca de smooth-scroll ou animação, Lenis em 14 e GSAP em 11. Sua pontuação mediana de Lighthouse é 56,5, contra 64 para os sites sem uma.
- Escuro e colorido são igualmente populares. 14 sites são marcados como escuros e 14 coloridos. Escolha um deliberadamente e se comprometa com ele.
- Tipo é a marca. 12 são marcados como tipográficos, onde um headline oversized ou uma fonte distintiva faz o trabalho que uma imagem hero faria.
Estúdios e agências
Sites de estúdio e agência são a própria vitrine do designer, então geralmente correm os maiores riscos com tipo e movimento. Este grupo teve a melhor pontuação de lab mediana dos oito em 69,5, ajudado pelo DATT Studio, que marca 100 em uma página de 0,1 MB. Se você está contratando um estúdio, seu próprio site é uma prévia justa de seus hábitos de trabalho, e a página agência de design web de Londres explica como abordo o mesmo briefing.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 1 | Little Plains | 55 | sem dados | sem dados | sem dados | 11.5 MB | Next.js |
| 2 | DATT Studio | 100 | sem dados | sem dados | sem dados | 0.1 MB | Astro |
| 3 | Ad Astra Marketing | 91 | sem dados | sem dados | sem dados | 0.7 MB | Next.js |
| 4 | Hattenberger Partner | 59 | sem dados | sem dados | sem dados | 3.8 MB | Gatsby |
| 5 | GM Studios | 67 | sem dados | sem dados | sem dados | 7.8 MB | Next.js |
| 6 | Boc.Studio | 72 | 2,5 s | 122 ms | 0.00 | 7.3 MB | Next.js |
| 7 | LxL Creative | 63 | 3,3 s | 442 ms | 0.02 | 1.9 MB | Webflow |
| 8 | Outfit | 95 | 2,2 s | sem dados | 0.00 | 0.9 MB | Next.js |
1. Little Plains
Um painel branco com cantos arredondados fica sobre uma fotografia desfocada de céu e mar, dando à página uma sensação calma e descluttered. O desenho linear solto de duas pessoas em um barco a remo e o título em brush-script adicionam calor artesanal, enquanto a cópia de corpo serif simples mantém a mensagem legível. A paleta de cores permanece principalmente marinho, com alguns acentos suaves.
Empreste isso: Combine uma ilustração desenhada à mão com um título em script e um parágrafo serif simples, para que um pequeno estúdio ganhe uma personalidade reconhecível sem precisar de um ensaio fotográfico.
Cuidado com: O teste em laboratório ficou mediano e a página é muito pesada, o que é bastante para uma tela que contém um desenho, um título e um parágrafo. Google não tinha dados suficientes de visitantes reais para mostrar como se sente para usuários reais.
Projetado internamente. Visite littleplains.com.
2. DATT Studio
Um D maiúsculo serif branco oversized, largo e nitidamente contrastado em seus traços grossos e finos, fica em preto puro e desempenha o papel de um logo. O título abaixo usa uma grotesca apertada e em negrito, com a última linha sublinhada como dica de link. Espaço vazio generoso dá espaço a ambos os elementos.
Empreste isso: Combine uma forma de letra display distintiva com um título sans-serif em negrito simples, e deixe um fundo de cor única e plano carregar o resto.
Cuidado com: A página foi testada rapidamente em laboratório e é leve, o que combina com um layout sem imagens, embora Google não tivesse dados suficientes de visitantes reais para mostrar como ela se comporta para usuários reais.
Projetado internamente. Visite dattstudio.com.
3. Ad Astra Marketing
Uma fotografia de um caminhante do espaço acima da curva da Terra carrega toda a ideia, e o título responde diretamente. O serif alto condensado, com uma palavra em itálico, dá à página preta calor, enquanto pequenos rótulos monospace espaçados mantêm o resto organizado. Espaço vazio generoso ao redor do texto deixa a imagem respirar.
Empreste isso: Combine uma fotografia forte e relevante com um grande título serif que coloque uma única palavra em itálico, e mantenha o texto de suporte pequeno e discreto.
Cuidado: O teste de laboratório foi rápido e a página é leve, então o grande herói escuro custa pouco, mas o Google não tinha dados suficientes de visitantes reais para mostrar como funciona para usuários de verdade.
Projetado internamente. Visite adastramarketing.com.au.
4. Hattenberger Partner
Uma enorme manchete preta em uma sans-serif pesada e larga fica em branco puro, então a mensagem chega antes de qualquer outra coisa. Uma mancha azul elétrica macia e desfocada vaza da borda esquerda, e um badge azul redondo com texto ao redor de sua borda dá à página um ponto focal tipo carimbo. Pequeno texto de corpo no estilo de máquina de escrever e ícones de colchete em azul adicionam sabor de programador sem desordem.
Pegue emprestado: Coloque a manchete em uma sans-serif pesada em tamanho muito grande em branco puro, depois adicione uma única forma de cor desfocada atrás dela para profundidade.
Cuidado: A página é leve, o que ajuda, mas o teste de velocidade do laboratório saiu mediano e o Google tem poucos dados de visitantes reais para mostrar como se sente no uso cotidiano.
Projetado internamente. Visite hattenbergerpartner.de.
5. GM Studios
Uma fotografia de sangue completo e escuro do estúdio, com dois apresentadores em uma mesa redonda sob luzes de softbox, estabelece o tom imediatamente. A enorme manchete sans estendida e pesada em branco desaparece em uma base vermelho-preta profunda, para que permaneça legível. Uma fina linha de script acima adiciona contraste sem amontoar o layout.
Pegue emprestado: Use uma fotografia real do seu próprio espaço de trabalho atrás de uma manchete curta e muito grande, e desbote o fundo da imagem para uma cor sólida para que o texto permaneça legível.
Cuidado: O teste de laboratório saiu mediano e a página é mais pesada que a média, o que combina com uma imagem ou vídeo de tela cheia do estúdio. O Google não tinha dados suficientes de visitantes reais para mostrar como se sente para usuários de verdade.
Construído por tonsiteweb.io. Visite lesgmstudios.com.
6. Boc.Studio
Uma faixa laranja saturada corta um pano de fundo rosa empoeirado macio, com duas esferas translúcidas vítreas nas bordas como adereços. O wordmark usa uma sans geométrica limpa com espaçamento apertado, e pequenas linhas em negrito e normal ao lado estabelecem uma clara hierarquia. Grandes áreas vazias deixam o contraste de cores carregar a tela.
Pegue emprestado: Use uma faixa horizontal fortemente colorida para carregar seu nome e uma breve descrição sobre um fundo calmo e tom único, para que a primeira tela tenha um ponto focal claro.
Cuidado: A página é mais pesada que a média e obtém uma pontuação mediana no teste de laboratório, mas visitantes reais têm uma boa experiência em todos os três Core Web Vitals, então o peso não está prejudicando as pessoas na prática.
Projetado internamente. Visite boc.studio.
7. LxL Creative
Um único retrato em moldura arredondada repousa sobre um fundo marrom escuro, e as letras largas em cor creme e o script manuscrito em laranja extraem sua cor da fotografia e da jaqueta. A marca oversized sobrepõe a borda da imagem, unindo fotografia e tipografia. Muito espaço vazio mantém o slogan tranquilo.
Pegue emprestado isto: Combine um retrato forte com um sans pesado e largo em cor creme e um único acento manuscrito em uma cor brilhante, tudo sobre um fundo plano escuro.
Cuidado com: A página em si é leve, mas visitantes reais veem carregamento lento do conteúdo principal e resposta lenta a toques e cliques, o que se adequa a um site repleto de animações baseadas em script e transições de página.
Criado por Jordan Gilroy. Visite lxlcreative.co.uk.
8. Outfit
Uma palavra gigantesca em um sans serif pesado e largo preenche toda a largura em vermelho saturado sobre um fundo off-white quente. Tudo o mais é pequeno, em vermelho e alinhado de forma compacta a uma grade de coluna, portanto a hierarquia é imediata. As fotos de roupas pretas, fotografadas contra cinza pálido, fornecem o único contraste.
Pegue emprestado isto: Escolha uma cor forte, defina o nome da empresa em largura total em um sans serif pesado e mantenha todos os outros elementos pequenos, nessa mesma cor, sobre um fundo plano quente.
Cuidado com: A página foi testada rapidamente no laboratório e permanece leve, o que combina com um layout construído a partir de tipografia, cor plana e algumas fotos, embora Google não tenha dados suficientes de visitantes reais para julgar como ele funciona para usuários reais.
Criado por ++hellohello. Visite outfit.hellohello.is.
Portfolios
Portfolios geralmente pertencem a uma pessoa ou um time muito pequeno, e os melhores deixam o trabalho preencher a tela. Nenhum dos oito passou em todas as três Core Web Vitals, e dois pesam mais de 35 MB, o que acontece quando trabalho em resolução total vai direto para a página. Para o seu, veja portfolio web design.
Para uma amostra maior, com 20 portfólios extraídos do mesmo grupo e medidos da mesma forma, veja os 20 melhores sites de portfólio.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 9 | Vivien's Creative | 57 | sem dados | sem dados | sem dados | 2.2 MB | Next.js |
| 10 | Studio K95 | 58 | 5,5 s | 245 ms | 0.00 | 2.3 MB | Nuxt |
| 11 | Jesper Landberg | 60 | 1,1 s | 219 ms | 0.00 | 36.1 MB | Nuxt |
| 12 | House of Honey | 74 | 3,0 s | sem dados | 0.00 | 1 MB | Next.js |
| 13 | Félix Péault | 76 | sem dados | sem dados | sem dados | 1.4 MB | SvelteKit |
| 14 | Nordpixel | 79 | sem dados | sem dados | sem dados | 4.1 MB | Não detectado |
| 15 | Oimachi | 47 | sem dados | sem dados | sem dados | 35.4 MB | Webflow |
| 16 | Matthäus Jandl | 61 | sem dados | sem dados | sem dados | 6.9 MB | Framer |
9. Vivien's Creative
Uma ampla fotografia de duas figuras atravessando dunas pálidas preenche a tela, com a pesada marca branca assentada na borda inferior. A linha de introdução usa uma serifada clara em estilo book, centralizada contra o céu cinzento-esverdeado. A navegação cai para três pequenas maiúsculas, então a fotografia faz quase todo o trabalho.
Tome emprestado isto: Combine uma fotografia full-bleed forte com uma única marca superdimencionada e uma breve linha de introdução em serifas, para que um pequeno negócio possa dizer quem é e o que faz sem painéis extras.
Fique atento a: A página é leve, mas o teste do laboratório voltou mediano, e o Google não tinha dados suficientes de visitantes reais para mostrar como se comporta para usuários reais.
Criado por Christopher Doyle & Co.. Visite vivienscreative.com.au.
10. Studio K95
Um azul saturado preenche a tela, então a rosa semelhante a vidro pálido construída a partir de blocos grandes se lê instantaneamente como o ponto focal. Cartazes de projetos orbitam em anéis, e no telefone o cartão ativo incha para preencher metade da tela com uma etiqueta vermelha suave. A navegação permanece em pequenas maiúsculas simples com espaçamento generoso, deixando a obra de arte carregar a tela.
Tome emprestado isto: Escolha uma única cor de marca plana para todo o pano de fundo, coloque uma imagem central ousada nela e mantenha a navegação pequena e branca.
Fique atento a: A página em si é leve, mas o resultado do laboratório é apenas mediano e visitantes reais relatam carregamento lento do conteúdo principal (LCP) e resposta lenta a toques e cliques (INP), o que se encaixa em uma página construída em torno de uma cena interativa em movimento.
Desenvolvido internamente. Visite k95.it.
11. Jesper Landberg
A sala preta com uma grade de perspectiva fraca dá aos painéis de projeto toda a atenção, e a luz âmbar quente no painel central puxa o olho direto para ela. Uma serifada itálica alta e fina fica sobre uma esfera brilhante e uma piscina, dando à página uma sensação calma e tátil. Os links encolhem para pequenas maiúsculas nos cantos, então nada compete com as imagens.
Pegue isso emprestado: Use um fundo escuro e simples com links minúsculos nos cantos para que algumas imagens fortes carreguem toda a página.
Cuidado com: A página é muito pesada e obteve uma nota intermediária no teste de laboratório, e visitantes reais relatam respostas lentas a toques e cliques (INP), que é o custo usual de movimento rico e imagens grandes.
Desenvolvido internamente. Visite jesperlandberg.com.
12. House of Honey
O logotipo se estende de borda a borda em um sans pesado e largo, sem serifa black-letter, com um delicado "of" em itálico fino cortando através. Rosa pó e marrom profundo são as únicas cores no cabeçalho, então a fotografia carrega todo o calor abaixo. Pequenas capitais com serifa nos cantos mantêm o slogan discreto e equilibrado.
Pegue isso emprestado: Combine um rosto de título muito pesado com uma única palavra de sotaque itálico delicada, e mantenha o cabeçalho em duas cores planas para que sua fotografia faça a fala.
Cuidado com: A página é leve, mas visitantes reais veem carregamento lento do conteúdo principal (LCP), que se encaixa em uma grande fotografia full-width logo abaixo do cabeçalho, então essa imagem é a primeira coisa a comprimir e dimensionar com cuidado.
Construído por Edoardo Lunardi. Visite houseofhoney.com.
13. Félix Péault
Um gradiente azul a verde desvanece em off-white morno, dando atmosfera à página sem um enfeite decorativo. As iniciais pretas gigantes ficam em cantos opostos, e o título sem serif alto e condensado está centrado e firmemente definido. Tudo mais fica vazio, deixando a única fotografia carregar o peso no celular.
Pegue isso emprestado: Use um par oversized de iniciais ou um logotipo curto nos cantos, com um único gradiente suave atrás, em vez de uma imagem hero de banco de dados.
Cuidado com: O teste de laboratório voltou intermediário mesmo que a página seja leve, e o Google não tinha dados suficientes de visitantes reais para mostrar como se sente para usuários reais.
Desenvolvido internamente. Visite felixpeault.com.
14. Nordpixel
Uma fotografia de montanha enevoada em azul profundo e ardósia preenche toda a tela, com uma cabine frontal de vidro brilhando levemente no canto inferior direito. O logotipo fica no meio em capitais geométricas pesadas com espaço largo, terminando em um ponto azul que ecoa os botões. A barra de navegação arredondada branca se destaca com clareza contra a imagem escura, e a visualização móvel mantém a mesma composição calma.
Pegue isso emprestado: Use uma grande fotografia calma com um único logotipo pesado sobre ela, e mantenha um botão colorido na barra de navegação para a ação principal.
Cuidado com: O teste de laboratório saiu intermediário e a página é mais pesada que o normal, o que se encaixa em uma abertura fotográfica full-screen, e o Google não tinha dados suficientes de visitantes reais para mostrar como ele funciona na prática.
Construído por Michael Schnyder. Visite nordpixel.ch.
15. Oimachi
A manchete usa uma grande sans grotesca leve, com uma palavra em serif itálico para contraste sem outra cor. Uma página cinza claro, um painel hero escuro e uma coluna estreita de cards criam zonas claras. No mobile, a grade de pictogramas pretos em linhas de construção desenhadas parece deliberada e precisa.
Pegue emprestado isto: Misture uma única palavra em serif itálico em uma manchete sans simples para dar um ponto de diferença à página sem adicionar cor ou assets extras.
Fique atento a: O teste de lab descobriu a página lenta e muito pesada, e o Google não tinha dados suficientes de visitantes reais para mostrar como se sente para usuários reais.
Projetado internamente. Visite oimachi.co.
16. Matthäus Jandl
Uma grade de símbolos pretos em negrito em fundo cinza claro faz todo o trabalho, e o nome abaixo usa uma grotesca gigante e larga que corre pela largura inteira da página. Tudo é uma cor, então os ícones carregam a personalidade. Espaços generosos mantêm um conjunto ocupado de formas calmo e legível.
Pegue emprestado isto: Defina seu nome ou marca em uma única linha gigante de texto sans serif pesado na largura inteira, e deixe um único conjunto consistente de gráficos simples acima dela.
Fique atento a: A página é mais pesada que a média e apenas mediana no teste de lab, o que é um preço justo para um hero construído de muitos gráficos grandes e uma linha de imagens de projetos em rolagem, e não havia dados suficientes de visitantes reais para mostrar como se sente na prática.
Projetado internamente. Visite matthaeusjandl.com.
Tecnologia e finanças
Sites de tecnologia e finanças precisam explicar algo abstrato e ganhar confiança ao mesmo tempo. Possible Finance e Fauna Robotics passam em todos os três Core Web Vitals, e Fauna faz isso em uma página de 68,6 MB. Para sites de produtos, veja design de web SaaS e design de site de serviços financeiros.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 17 | Possible Finance | 74 | 1,6 s | 87 ms | 0.00 | 2.7 MB | Framer |
| 18 | Linearity | 46 | 2,9 s | 403 ms | 0.01 | 4.3 MB | Nuxt |
| 19 | MagicShot.ai | 89 | 1,9 s | 213 ms | 0.00 | 3.8 MB | Não detectado |
| 20 | Maxima Finance | 54 | sem dados | sem dados | sem dados | 2.7 MB | Não detectado |
| 21 | Clarvos | 46 | sem dados | sem dados | sem dados | 1.9 MB | Webflow |
| 22 | Finance/able | 83 | sem dados | sem dados | sem dados | 4.3 MB | Webflow |
| 23 | Fauna Robotics | 88 | 1.3 s | 180 ms | 0.01 | 68.6 MB | Não detectado |
| 24 | Serve Robotics | 41 | 4.6 s | 152 ms | 0.00 | 15.6 MB | Não detectado |
17. Possible Finance
Um azul elétrico saturado preenche a metade esquerda e a barra de navegação, com uma manchete sans serif muito grande e bem compacta em branco e quase preto que se lê num relance. A metade direita usa uma fotografia quente de uma mulher rindo contra tijolos e folhas, que contrasta bem com o azul frio. Um botão verde brilhante e um ícone de dólar verde dão pontos de pouso claros para o olho.
Pegue emprestado isto: Combine uma cor de marca plana com uma grande manchete e uma fotografia quente de um cliente real, depois mantenha uma cor de destaque contrastante apenas para o botão principal.
Cuidado com: O teste de laboratório classificou a página como mediana, mas a página em si é leve e visitantes reais têm uma boa experiência em todos os Core Web Vitals, então a compilação do Framer se sustenta onde importa.
Visite possiblefinance.com.
18. Linearity
Uma página quase preta deixa a manchete carregar a tela. Palavras de conexão cinza ficam ao lado de chips em forma de pílula brilhante contendo um avatar e ícones, então a frase se lê como um formulário sendo preenchido. O botão laranja quente e a seta de envio laranja são a única cor forte, dizendo ao olho exatamente onde clicar.
Pegue emprestado isto: Transforme a manchete em uma frase com chips destacados para as palavras-chave, e combine um botão secundário escuro com um único botão primário brilhante.
Cuidado com: A página é mais pesada que a média e lenta no teste de laboratório, e visitantes reais veem problemas com carregamento (LCP) e responsividade (INP), então os efeitos animados têm um custo em conexões mais lentas.
Construído por Konpo. Visite linearity.io.
19. MagicShot.ai
Uma página quase preta com um grande headline sem-serifa em branco, com sua última linha destacada em roxo, confere clara ordem ao topo da página. O roxo é reservado para ações: o botão Get started, o botão Create e a aba Video ativa. Um grande painel de vídeo com pequenas abas de thumbnail abaixo dele mostra o produto funcionando, enquanto uma linha de stats em espaço único adiciona uma nota técnica.
Pegue emprestado isto: Use uma única cor de destaque apenas para botões e a escolha ativa, para que o próximo passo se destaque contra um fundo escuro ou neutro.
Cuidado com: A página é clara, mas o teste de laboratório teve resultado mediano e visitantes reais relatam problemas com responsividade (INP), então toques e cliques podem parecer lentos para responder.
Projetado internamente. Visite magicshot.ai.
20. Maxima Finance
Uma estátua cinza recortada de uma figura vestida sem cabeça fica no meio de uma página branca simples, com o headline correndo diretamente sobre ela. O tipo mistura um sans fino e largo com um serif itálico de alto contraste, para que as duas palavras importantes se destaquem. Tudo mais é contido, dando espaço à imagem.
Pegue emprestado isto: Combine uma imagem forte e bem-recortada com um headline que se sobrepõe a ela, e defina as palavras-chave em um itálico contrastante para que a mensagem seja lida rapidamente.
Cuidado com: O teste de laboratório teve resultado mediano apesar de a página ser clara, e Google não tinha dados de visitantes reais suficientes para mostrar como ela se sai com usuários de verdade.
Construído por Dirty Martini. Visite maximafinance.co.uk.
21. Clarvos
Um painel quase preto com uma barra de navegação entalhada em creme confere ao frame da página um aspecto confiante e contido. O headline usa um grande sans geométrico limpo, com a última frase destacada em amarelo quente. Cards de dashboard brancos no canto inferior direito, com um card amarelo entre eles, mostram o produto de uma vez e mantêm as cores rigidamente controladas.
Pegue emprestado isto: Destaque a frase-chave do seu headline em uma única cor de destaque contra um fundo escuro, depois repita essa cor em um card e no botão principal.
Cuidado com: O teste de laboratório avaliou a página como lenta apesar de a página em si ser clara, e a visualização móvel abre em uma grande área escura vazia antes dos cards aparecerem, o que se encaixa com animação com script (GSAP e Lenis foram ambos detectados) retendo conteúdo; Google tinha dados de visitantes reais insuficientes para julgar.
Construído por BRIGHTSCOUT. Visite clarvos.com.
22. Finance|able
Uma página pálida, quase branca, deixa o headline fazer o trabalho, definido em um grande sans serif arredondado e centralizado acima de um botão pill azul. Abaixo, triângulos metálicos cinza flutuam em volta de uma forma facetada vítrea, sugerindo uma cena renderizada com profundidade e movimento. A barra de menu arredondada escura na borda superior confere uma âncora firme e ecoa a forma do botão.
Pegue emprestado isto: Combine um headline curto e simples com um botão pill brilhante em um fundo quase branco, e deixe uma imagem decorativa preencher o espaço abaixo.
Cuidado com: A página é mais pesada que a média e teve resultado mediano no teste de laboratório, que é o custo usual de uma cena renderizada construída com Spline e GSAP, e não havia dados de visitantes reais suficientes para julgar melhor.
Construído por Outcrowd. Visite finance-able.com.
23. Fauna Robotics
Um fundo creme acolhedor e tipografia de manchete escura e compacta dão à página um toque amigável antes de qualquer robô aparecer. A grande foto com cantos generosamente arredondados mostra uma pessoa na bancada ao lado de um robô sentado, tornando o produto acessível em vez de clínico. A navegação em forma de pílula e o botão laranja ecoam as formas suaves.
Tome emprestado: Combine uma única manchete com uma frase simples com uma grande foto honesta do seu próprio pessoal trabalhando, e mantenha a paleta de cores em creme, quase-preto e um destaque quente.
Cuidado com: A página é muito pesada e o resultado do teste de laboratório é apenas mediano, embora os visitantes reais tenham uma boa experiência nos três Core Web Vitals, então o peso não prejudica as pessoas na prática.
Visite faunarobotics.com.
24. Serve Robotics
Um vídeo em sangue vivo preenche a tela, com uma colheita próxima do robô de entrega em branco e verde profundo que combina com o logotipo. A manchete fica no canto inferior esquerdo em uma sans serif grande e limpa com espaçamento apertado, para que você leia de uma vez sobre a filmagem escura. As pequenas abas de navegação brancas flutuam no topo e ficam fora do caminho.
Tome emprestado: Combine uma manchete branca de tamanho exagerado com um rótulo curto entre colchetes acima dela, sobre uma foto ou vídeo escurecido, para que a mensagem seja lida em um segundo.
Cuidado com: A página é muito pesada, testou lenta no laboratório, e visitantes reais veem uma imagem ou carga de vídeo lenta, que é o custo usual de filmagem em tela cheia.
Desenvolvido por WILD. Visite serverobotics.com.
Comércio eletrônico e moda
Sites de moda e comércio eletrônico vendem clima em primeiro lugar e produto em segundo. Ferm Living e EMO Altar II passam nos três Core Web Vitals, e RemyShoots marca 93 no laboratório. Para lojas, veja desenvolvimento de comércio eletrônico headless e design de site de moda.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 25 | Miu Miu, uma casa que nós moldamos | 42 | 3.4 s | 194 ms | 0.01 | 3.8 MB | Não detectado |
| 26 | Um oceano de ideias | 57 | 4.3 s | sem dados | 0.00 | 2.2 MB | Remix |
| 27 | RemyShoots | 93 | 1,6 s | sem dados | 0.00 | 3 MB | Next.js |
| 28 | Coutumes | 69 | sem dados | sem dados | sem dados | 2.6 MB | Shopify |
| 29 | Ferm Living | 61 | 1,2 s | 112 ms | 0.00 | 7.2 MB | Shopify |
| 30 | Indigo Laboratory | 49 | sem dados | sem dados | sem dados | 16.3 MB | Não detectado |
| 31 | EMO Altar II | 60 | 1,4 s | 114 ms | 0.00 | 3.9 MB | Não detectado |
| 32 | Music Sound | 61 | 4,0 s | 99 ms | 0.00 | 3.1 MB | WordPress |
25. Miu Miu, uma casa que nós moldamos
Um campo plano de azul-marinho profundo traz nada além de maiúsculas brancas em uma sans serif ampla e pesada. Cada linha é empurrada para as bordas de uma coluna estreita, e a última palavra tem o espaçamento entre letras aumentado para preencher a mesma largura, transformando a sentença em um bloco arrumado. Um aviso sonoro fino com um ícone de alto-falante fica sozinho no topo.
Tome emprestado: defina uma única declaração curta em maiúsculas pesadas dentro de uma coluna estreita, justifique cada linha até as bordas e aumente o espaçamento da linha mais curta para coincidir.
Cuidado com: a página estava lenta no teste de laboratório e visitantes reais enfrentam problemas no carregamento do conteúdo principal (LCP), mesmo que a página seja leve, então o peso da página não é a causa do atraso.
Feito por Merci Michel. Visite immersivebags.miumiu.com.
26. Um oceano de ideias
A página divide a tela ao meio, com uma figura agachada em uma saia amarela pálida e pregueada à esquerda e uma escultura escura com grão e um leque de incrustação listrada à direita. Um grande logo branco em uma serifa de alto contraste com topos afiados e acampanados fica bem no centro sobre os dois. A navegação usa pequenas maiúsculas espaçadas em branco, então a fotografia fala por si.
Tome emprestado: coloque duas fotografias contrastantes lado a lado sob um único logo centralizado para que a primeira tela mostre o que a marca faz sem precisar de texto.
Cuidado com: a página é leve, mas a pontuação de laboratório é intermediária e visitantes reais veem carregamento lento do maior elemento, o que sugere que a imagem em tela inteira leva um momento para aparecer.
Feito por Airnauts. Visite aoiofficial.com.
27. RemyShoots
Um quadro quase preto deixa a fotografia carregar tudo. A imagem central está em vermelho completo enquanto suas vizinhas estão em escala de cinza, assim o olho pousa em um único lugar. Tipo monoespacial com contagens entre parênteses e uma linha do tempo com marca adiciona uma ordem técnica e discreta que combina com um arquivo de fotógrafo.
Pegue emprestado isto: Use uma imagem em cores completas contra vizinhas em escala de cinza apagada para direcionar a atenção, com uma legenda monoespacial simples e uma contagem entre parênteses abaixo dela.
Cuidado com: O teste de laboratório mostra que a página é rápida e leve apesar da fotografia grande, embora o Google não tivesse dados suficientes de visitantes reais para mostrar como funciona para usuários de verdade.
Construído por Arc Marumo. Visite remyshoots.co.za.
28. Coutumes
Uma fotografia de sangramento total faz todo o trabalho, com um corte fechado de um brinco de prata em argola na esquerda e uma pulseira na direita. A manchete alta condensada em amarelo mostarda pega a impressão na camiseta na foto, então o tipo e a imagem parecem relacionados. A navegação em um serif leve fica discreta em branco no topo.
Pegue emprestado isto: Puxe a cor da manchete direto da fotografia do produto, assim um título condensado em negrito e a imagem se leem como um par combinado.
Cuidado com: O teste de laboratório ficou mediano, embora a página em si seja leve, e o Google não tivesse dados suficientes de visitantes reais para mostrar como funciona para clientes de verdade.
Visite coutumes.com.
29. Ferm Living
O herói é uma fotografia quente e aproximada de banquetas metalizadas em um tapete felpudo, com uma manchete serif clara e um único botão com traço definido sobre ela. Os marrons terrosos seguem pelos blocos de produtos abaixo, assim toda a página se lê como uma única paleta. Bastante espaço em branco e navegação pequena e discreta mantêm a atenção na fotografia.
Pegue emprestado isto: Use uma fotografia cortada com precisão e quente por seção com um único botão com traço, e mantenha todas as outras cores na página tiradas dessa mesma fotografia.
Cuidado com: A página é mais pesada que a média e apenas mediana no teste de laboratório, embora visitantes reais tenham uma boa experiência em todos os três Core Web Vitals, assim a fotografia grande está se mantendo na prática.
Construído por Signifly. Visite fermliving.com.
30. Indigo Laboratory
A tela de entrada é construída quase inteiramente de preto, branco e cinza suave. Uma enorme marca de palavra desfocada em um sans geométrico pesado preenche o topo, e a linha de boas-vindas fica centrada abaixo dela em um sans mais leve e amigável. O bloco branco atrás do botão enter é a única forma de arestas duras, assim o olho pousa aí imediatamente.
Pegue emprestado isto: Use um único bloco em alto contraste para o botão principal, branco em preto aqui, assim o próximo passo é óbvio sem nenhuma decoração extra.
Cuidado com: O teste de laboratório encontrou a página lenta e muito pesada, e o Google não tinha dados suficientes de visitantes reais para mostrar como ela se comporta para visitantes de verdade.
Criado pelo FPTP Studio. Visite indigo-laboratory.it.
31. EMO Altar II
Um único render de teclado preto flutua em um fundo completamente preto, então o produto é a única coisa que chama a atenção. O wordmark usa uma serifa alta e de alto contraste ao lado de uma tagline sans cinza clara, e um único botão vermelho saturado é a única cor forte. O cartão de preço é arredondado e discreto, mantendo o call to action óbvio.
Pegue emprestado isso: Dê à página uma única imagem hero em um fundo plano escuro e reserve uma única cor de destaque para o botão principal, para que o olho não tenha para onde mais olhar.
Cuidado com: O teste de laboratório saiu mediano, embora a página seja leve e visitantes reais tenham uma boa experiência em todos os três Core Web Vitals, que é o resultado que importa para uma loja.
Construído por Electronic Materials Office. Visite electronicmaterialsoffice.com.
32. Music Sound
Um gradiente de rosa quente para violeta profundo preenche a página e carrega uma manchete sans geométrica branca pesada, empilhada em quatro linhas com a terceira recuada. A mulher sorridente em luz magenta sobrepõe as letras, e os blocos de produto à direita ficam em fundos limpos rosa, verde e vermelho, então os headphones e fones de ouvido continuam fáceis de ler.
Pegue emprestado isso: Empilhe uma manchete curta em uma sans pesada sobre um gradiente de cor única e deixe uma foto sobrepor as letras para dar profundidade à página.
Cuidado com: A página é leve, mas visitantes reais relatam carregamento lento do conteúdo principal (LCP), e a grande foto lifestyle e os blocos de produto são os prováveis culpados, então comprimir e priorizar essas primeiras imagens ajudaria.
Construído por Gummy Industries. Visite musicsound.com.
Alimentos, bebidas e hotelaria
Sites de alimentos, bebidas e hotelaria vendem apetite, então dependem muito de fotografia e vídeo em grande escala. Esta foi a única categoria em que nenhum site passou em todos os três Core Web Vitals, e a pontuação de laboratório mediana foi 56.5. Para restaurantes e hotéis, consulte design de site de restaurante e design de site de hotel.
Para uma amostra maior, 20 sites de alimentos e bebidas extraídos do mesmo pool e medidos da mesma forma, consulte os 20 melhores sites de restaurante e alimentos.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 33 | Vamvalis Foods | 54 | 3,0 s | 90 ms | 0.26 | 3.8 MB | WordPress |
| 34 | Best Bean Best Cup | 75 | 1,4 s | sem dados | 0.00 | 19.3 MB | Shopify |
| 35 | Benvenusa Italian Wines | 79 | sem dados | sem dados | sem dados | 4.9 MB | Não detectado |
| 36 | White Desert | 20 | 2.3 s | 194 ms | 0.23 | 8.5 MB | Next.js |
| 37 | Don Molinico | 48 | 3,8 s | 136 ms | 0.16 | 2.6 MB | Nuxt |
| 38 | Meyers | 43 | 2,1 s | 161 ms | 0.12 | 2.6 MB | Nuxt |
| 39 | Qissa | 87 | 2,7 s | 137 ms | 0.00 | 5.2 MB | WordPress |
| 40 | Pier88 Coast By MONARQ | 59 | sem dados | sem dados | sem dados | 39.3 MB | WordPress |
33. Vamvalis Foods
Um único campo azul plano carrega toda a primeira tela, com logo branco centralizado e uma headline em uma sans sem serifa leve e arredondada que se lê facilmente em tamanho grande. Pequenas maiúsculas espaçadas em uma fonte monoespacial cuidam da navegação e da linha de introdução. Uma borda curva suave separa o azul do cinza-claro abaixo, e no celular as formas de folha coloridas emolduram uma foto redonda de uma barra de sementes.
Pegue isso emprestado: Combine uma grande headline clara com pequenas maiúsculas espaçadas para rótulos, para que a hierarquia seja clara usando apenas dois estilos de tipo e uma cor de fundo.
Cuidado com: A página em si é clara, mas visitantes reais veem carregamento lento do conteúdo principal e elementos se movimentando conforme carregam, então o hero vazio e a imagem tardia valem a pena apertar.
Criado por Point Blank. Visite vamvalisfoods.com.
34. Best Bean Best Cup
Um verde profundo saturado preenche a página, com uma pesada headline preta em tipo sans-serif apertado e em maiúsculas definido diretamente nela. Atrás dela, uma faixa de semicírculos e formas de quarto em verde-cinza muted dá ao hero um senso gráfico e impresso. A navegação em forma de pílula e o botão de carrinho preto permanecem simples, deixando a obra de arte carregar a personalidade.
Pegue isso emprestado: Use uma única cor de fundo em negrito com um padrão repetido construído a partir de formas geométricas simples, para que a marca pareça reconhecível sem precisar de fotografia.
Cuidado com: A página é muito pesada, e as ferramentas de animação detectadas (gsap e lottie) adicionam a isso, então o resultado do teste do laboratório foi mediano e não havia dados de visitante real suficientes para julgar como se sente para clientes.
Criado por Nam Bui. Visite bestbeanbestcup.com.au.
35. Benvenusa Italian Wines
Uma marca tipográfica em maiúsculas pretas, pesadas e largas segue de ponta a ponta, depois uma faixa plana de roxo saturado carrega uma pequena declaração em serifa e uma lista de regiões. A paisagem em preto e branco abaixo une tudo. Três cores planas e uma serifa mantêm confiança e legibilidade.
Pegue emprestado: Configure o nome da empresa em uma única linha enorme e pesada no topo, depois dê à sua mensagem principal um único bloco de cor plana com maiúsculas em serifa simples.
Cuidado com: A página é mais pesada que a média e apenas regular no teste de laboratório, o que combina com as fotografias grandes, e o Google não tinha dados suficientes de visitantes reais para mostrar como se sente para usuários reais.
Criado por Sons & Co. Visite benvenusa.com.
36. White Desert
Uma única vista pela janela de avião de uma plataforma de gelo preenche a tela, emoldurada por bordas quase pretas que fazem os azuis pálidos brilharem. As enormes maiúsculas brancas condensadas do headline repousam na base, e uma pequena linha em serifa itálica oferece um contraponto tranquilo. Linhas de guia verticais finas adicionam estrutura sem desorganização.
Pegue emprestado: Emparelhe um grande headline condensado com uma pequena linha em serifa itálica sobre uma única fotografia ou clipe em loop forte, e mantenha a navegação em botões simples com contorno.
Cuidado com: A página é mais pesada que a média e lenta no teste de laboratório, e visitantes reais relatam mudanças de layout conforme carrega, então o filme em sangra total e o tipo grande têm um custo em estabilidade e velocidade.
Criado por Malvah. Visite white-desert.com.
37. Don Molinico
Uma fotografia aérea em sangra total de uma mesa posta com carnes curadas, queijo, potes e pratos patterned preenche a tela, então o produto fica dentro de uma refeição real em vez de em um fundo branco. O bloco de logo vermelho pende da borda superior no centro, e as enormes maiúsculas condensadas em creme leem limpamente sobre a imagem atarefada. Tons quentes de terra-cota, vermelho e mostarda todos puxam na mesma direção.
Pegue emprestado: Pendure um bloco de logo de cor sólida da borda superior sobre uma fotografia em largura total do seu produto em uso, depois configure um headline curto em grandes maiúsculas creme por cima.
Cuidado com: O teste de laboratório classifica a página como lenta, e visitantes reais veem problemas com a rapidez com que o conteúdo principal aparece e com a mudança de layout conforme carrega, mesmo que a página em si seja leve.
Criado por AUGE EXPERIENCE. Visite donmolinico.es.
38. Meyers
Uma fotografia em sangra total de batatas assadas, couve escura e sementes de romã preenche a tela, e o headline repousa direto sobre ela em um tipo pesado, largo e similar a laje. Tipo em mostarda e creme leem claramente contra a imagem escurecida. A barra superior marrom escuro e a aba de conta cor de areia mantêm a paleta quente e consistente.
Pegue emprestado: Use uma grande fotografia de comida bem iluminada com uma sobreposição escura suave e configure um headline em duas cores sobre o terço inferior para que permaneça legível.
Cuidado com: A página é leve, mas o teste de laboratório rodou lentamente e visitantes reais relatam problemas de estabilidade de layout, então o deslocamento de conteúdo enquanto a página carrega é o problema a resolver primeiro.
Desenvolvido por Dwarf. Visite meyers.dk.
39. Qissa
Um fundo azul-marinho profundo com um único acento metálico dourado dá à página um clima calmo de jantar ao anoitecer. A marca tipográfica usa uma serifa leve e de alto contraste com pequenas maiúsculas amplamente espaçadas acima dela, e o empilhamento centralizado deixa espaço generoso ao redor do texto. Em dispositivos móveis, um suave leque de talheres fica atrás do texto como uma marca d'água.
Pegue emprestado: Escolha uma cor de acento, use-a apenas para a ação principal e pequenos rótulos, e mantenha tudo mais discreto para que o botão de reserva seja a primeira coisa que o olho vê.
Cuidado com: A página é mais pesada que a média e visitantes reais veem carregamento lento do conteúdo principal (LCP), então o herói escuro provavelmente aparecerá mais tarde do que deveria, muito provavelmente em conexões móveis.
Desenvolvido por Red Dash Media. Visite qissa.co.uk.
40. Pier88 Coast By MONARQ
Um único camarão recortado em um garfo fica sobre um mar calmo e céu pálido, então o olho pousa em uma forma laranja quente contra azul e azul-petróleo calmos. O título se curva em finas maiúsculas brancas acima dele no desktop, depois fica em script handwritten solto no mobile. Uma borda branca ondulada na base suaviza o acabamento.
Pegue emprestado: Combine uma fotografia clara e bem iluminada do seu melhor prato com um fundo simples e calmo e um título curto em letras brancas finas.
Cuidado com: A página é muito pesada e apenas mediana no teste de laboratório, o que combina com um herói fotográfico full-bleed com bibliotecas de animação de scroll carregadas, e não havia dados suficientes de visitantes reais para avaliar como se parece para visitantes reais.
Visite pier88coast.com.
Cultura, educação e organizações sem fins lucrativos
Museus, escolas, instituições de caridade e projetos culturais tendem a ter muito a dizer e os orçamentos mais apertados. Este grupo teve a menor pontuação mediana de laboratório em 50,5, embora o Musée de Rochechouart passe em todas as três Core Web Vitals. Veja design de site educacional e design de site sem fins lucrativos.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 41 | Musée de Rochechouart | 64 | 1.8 s | 136 ms | 0.00 | 2.8 MB | WordPress |
| 42 | RPA Comunicación | 56 | sem dados | sem dados | sem dados | 10.5 MB | Não detectado |
| 43 | Colonia Zacamil | 22 | 4.2 s | 438 ms | 0.00 | 6.8 MB | Nuxt |
| 44 | CauseHouse | 92 | sem dados | sem dados | sem dados | 0.8 MB | Next.js |
| 45 | NCCER | 45 | 3.5 s | 235 ms | 0.04 | 21.8 MB | WordPress |
| 46 | CalArts Graphic Design 2026 | 68 | sem dados | sem dados | sem dados | 1.6 MB | Nuxt |
| 47 | Primer | 28 | 4.7 s | 362 ms | 0.00 | 2.4 MB | Webflow |
| 48 | Beyond Spacesuit | 28 | sem dados | sem dados | sem dados | 11.8 MB | Next.js |
41. Musée de Rochechouart
Um bloco de logo em azul-marinho ousado com uma linha de telhado de castelo estilizada ancora o topo esquerdo, e a navegação fica em pequenas maiúsculas em uma sans geométrica limpa. Abaixo, um par dividido de imagens leva a página: uma fotografia de performance em alto contraste preto e branco ao lado de um close-up quente de colunas de pedra retorcidas. Texto em ciano pálido e espaço em branco generoso mantêm a página calma.
Pegue emprestado isto: Use um par apertado de fotografias contrastantes lado a lado sob um cabeçalho simples, para que a página transmita como é o lugar antes de qualquer texto ser lido.
Cuidado com: O teste do laboratório avalia a velocidade como mediana, mas a página é leve e os visitantes reais têm uma boa experiência em todas as medidas do Core Web Vitals.
Criado por OCITOCINE. Visite musee-rochechouart.com.
42. RPA Comunicación
Azul-marinho profundo e lima ácida são as únicas cores planas, então a fotografia em rosa quente se lê como o ponto focal. O corte angular, com palavras de título caídas em seus cantos, sente-se solto e energético em vez de encaixotado. O logo sans largo e pesado e o botão do menu com canto cortado repetem essa geometria de corte.
Pegue emprestado isto: Corte uma fotografia do hero em forma angular e repita esse ângulo nos botões e ícones, para que uma paleta apertada e um pouco de CSS deem à página uma identidade clara.
Cuidado com: A página é muito pesada e apenas mediana no teste do laboratório, e o Google tem muito poucos dados de visitantes reais para mostrar como funciona para os visitantes reais, então a introdução vale a pena pesar contra a espera.
Criado por LaNegrita. Visite rpacomunicacion.com.
43. Colonia Zacamil
Uma manchete preta condensada alta corre de borda a borda em um fundo de pedra quente, com uma faixa arredondada de filmagem aérea cortada na frase como uma palavra. O pequeno botão mono e a legenda serif deixam bastante espaço calmo. No celular, a filmagem preenche a tela sob um logotipo modular em bloco em branco-sujo.
Pegue emprestado isto: Substitua uma palavra do seu título principal por uma colheita arredondada de uma fotografia real, e mantenha tudo o mais em um fundo liso e de uma única cor.
Cuidado com: A página é mais pesada que a média e lenta no teste de laboratório, e visitantes reais enfrentam carregamento lento do conteúdo principal e resposta lenta aos toques, portanto a gravação em tela cheia tem um custo mensurável.
Desenvolvido por Adoratorio Studio. Visite coloniazacamil.com.
44. CauseHouse
Um título serif pesado e de alto contraste em verde escuro fica em um fundo creme quente, com uma palavra destacada em lima e uma sombra de deslocamento duro. A colina, casa, árvore e galinha desenhadas à mão dão à página um caráter amigável que combina com o nome. Botões e rótulos em forma de pílula compartilham o mesmo lima e contorno, então a página se sente consistente.
Pegue emprestado isto: Escolha uma cor de destaque, aplique-a a uma palavra do título e aos botões principais, e deixe uma ilustração simples carregar a marca em vez de fotografias de banco de imagens.
Cuidado com: O teste de laboratório mostra uma página rápida e leve, que é um retorno justo por usar ilustração plana em vez de fotografias, embora o Google não tivesse dados suficientes de visitantes reais para mostrar como funciona para usuários reais.
Projetado internamente. Visite causehouse.co.
45. NCCER
O solo azul marinho escuro e o destaque laranja queimado dão à página uma paleta firme e prática que combina com o logotipo. O título usa um grande geométrico redondo sem serifa com espaçamento de linha generoso, e a fotografia de um homem apontando para um desenho de estrutura mostra o ofício sem uma aparência de foto de banco de imagens. O pop-up empresta o mesmo gradiente azul marinho para laranja.
Pegue emprestado isto: Use uma única cor de destaque contra um fundo escuro, repetida no logotipo, botões e regras de borda, para que cada página se sinta relacionada sem gráficos extras.
Cuidado com: O teste de laboratório classifica a página como lenta e muito pesada, e visitantes reais enfrentam problemas com carregamento (LCP) e capacidade de resposta (INP), portanto a grande imagem do herói e as sobreposições empilhadas têm um custo.
Desenvolvido por Isadora Digital Agency. Visite nccer.org.
46. CalArts Graphic Design 2026
Um grande sans branco em maiúsculas, apertadamente configurado, preenche a tela preta, com um único amarelo ácido usado para o ano, a aba ativa e os sublinhados de links. O rabisco manuscrito traçado no título adiciona uma marca humana, e muda de cor entre desktop e mobile. O espaço preto vazio generoso mantém tudo claro.
Pegue emprestado isto: Combine um título gigantesco com uma única cor de destaque em um fundo escuro simples, e reserve esse destaque para o ano, o item do menu atual e sublinhados de links.
Cuidado com: O teste de laboratório saiu mediano apesar de a página ser leve, e o Google tinha poucos dados de visitantes reais para julgar como funciona para pessoas reais.
Visite design2026.calarts.edu.
47. Primer
Uma única fotografia recortada de crianças, cada uma segurando um adereço como uma corda de pular, um arco ou um púlpito, vai de borda a borda em uma página branca. Finas linhas de grade pretas e alguns blocos de azul, amarelo, laranja e verde a emolduram como um caderno escolar. O alto e apertado título em serifa fica calmamente no centro.
Pegue emprestado isto: Use uma única fotografia de grupo recortada e ampla em um fundo branco simples, depois adicione alguns blocos de cor plana e finas linhas para dar à página uma estrutura reconhecível.
Fique atento a: A página é leve, mas foi lenta no teste de laboratório, e visitantes reais relatam problemas com o carregamento da imagem principal e com a responsividade a toques e cliques, portanto uma grande fotografia hero ainda precisa de tratamento cuidadoso.
Criado por newkid. Visite primer.com.
48. Beyond Spacesuit
Um enorme título sans geométrico em off-white quente fica sobre preto puro, então o nome é legível à primeira vista. Pequenas ilustrações planas em laranja e verde hortelã, um planeta anelado, estrelas de quatro pontas e uma fina linha de órbita, adicionam brincadeira sem desorden. O texto centralizado curto e um único botão deixam muito espaço vazio.
Pegue emprestado isto: Combine um título oversized com um único botão contrastante e algumas formas de acento planas em duas cores, para que a página tenha uma ação principal clara e uma aparência memorável.
Fique atento a: O teste de laboratório encontrou a página lenta e muito pesada, e o Google não tinha dados suficientes de visitantes reais para mostrar como é para usuários reais, portanto os extras animados vale a pena pesar contra o tempo de carregamento.
Criado por Airnauts. Visite beyondspacesuit.org.
Arquitetura, imóveis e viagens
Arquitetura, imóveis e viagens são negócios visuais, e os melhores sites deste grupo se afastam do caminho da fotografia. KAAN Architecten e Colours of Istria passam em todos os três Core Web Vitals e obtêm pontuações de 93 e 91 no laboratório. Para imóveis, veja design de site imobiliário.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 49 | Storey Architecture | 69 | sem dados | sem dados | sem dados | 4.9 MB | Nuxt |
| 50 | LPAS | 64 | 2.0 s | 138 ms | 0.50 | 4.9 MB | WordPress |
| 51 | arcoglobal | 61 | sem dados | sem dados | sem dados | 5.2 MB | Nuxt |
| 52 | Warren & Mahoney Architects | 69 | sem dados | sem dados | sem dados | 10.9 MB | Não detectado |
| 53 | Lithuania Travel | 47 | 4.2 s | 172 ms | 0.00 | 4.2 MB | Não detectado |
| 54 | GetYourGuide Trend Tracker | 38 | 2.6 s | 370 ms | 0.10 | 6.4 MB | Webflow |
| 55 | Cores da Ístria | 91 | 2.0 s | 125 ms | 0.00 | 7.5 MB | Next.js |
| 56 | KAAN Architecten | 93 | 1,1 s | 62 ms | 0.00 | 4.1 MB | Craft CMS |
49. Storey Architecture
Uma fotografia em sangra total de uma casa com frente de vidro, ripas de madeira e tijolos claros, emoldurada por altos pinheiros e céu azul claro, fala por si só. O texto usa um sans serif leve e uniforme em branco, posicionado sobre a folhagem mais escura para manter a legibilidade. Linhas de progresso finas acima da introdução sugerem que a imagem muda em um carrossel.
Pegue emprestado: Use uma única fotografia grande e bem iluminada do seu melhor trabalho concluído atrás de um texto branco curto posicionado sobre sua área mais escura, com um botão simples abaixo.
Cuidado com: A página é mais pesada que a média e teve resultado mediano no teste de laboratório, o que se adequa a um carrossel fotográfico em tela cheia, e não há dados suficientes de visitantes reais para mostrar como ela funciona para usuários reais.
Criada por Dirty Martini. Visite storeyarchitecture.co.uk.
50. LPAS
Uma fotografia em sangra total de uma cozinha com paredes de tijolos, janelas altas e banquetas de madeira clara faz a venda antes de qualquer texto aparecer. No celular, uma sobreposição escura mantém o grande título branco legível, em um sans geométrico limpo. A marca fina, o pequeno botão de menu e um único aviso sublinhado deixam muito espaço para a imagem.
Pegue emprestado: Use uma fotografia honesta do seu próprio espaço de trabalho ou trabalho concluído como a abertura em largura total, depois aplique um tom escuro e uma única frase grande sobre ela.
Cuidado com: A página é mais pesada que a média e o teste de laboratório teve resultado mediano, e visitantes reais veem o layout mudar enquanto carrega, o que é um custo comum de grandes imagens hero e vídeos.
Criada por Studio Naam. Visite lpas.com.
51. arcoglobal
A visualização de desktop usa preto e branco, com um único cinza escuro para a marca oversized que se estende por quase toda a largura na parte inferior. A manchete usa um sans geométrico leve com formas de letra redondas, centralizado sob uma barra de menu em forma de pílula flutuante. Muito espaço vazio torna a mensagem legível instantaneamente, e o logo enorme dá presença à marca sem nenhuma fotografia.
Pegue emprestado: Use o nome da sua empresa como uma marca oversized de baixo contraste no pé da tela de abertura, que não precisa de nada além de um estilo de texto e um fundo escuro.
Cuidado com: A página é mais pesada que a média e recebeu resultado mediano no teste de laboratório, e o Google não tinha dados suficientes de visitantes reais para mostrar como ela funciona para usuários reais.
Criada por workattack. Visite arcoglobal.com.
52. Warren & Mahoney Architects
Um fundo azul plano sustenta tudo, então o título branco em uma sans serif leve e aberta é lido instantaneamente. Abaixo do parágrafo curto, barras verticais altas contêm fotografia aérea de espuma do mar, e os espaços entre elas sobem e descem como uma forma de letra em bloco. O azul da água corresponde ao fundo, dando à página calma e uma forma clara.
Empreste isto: Recorte uma fotografia em barras altas sobre uma cor de marca plana, para que uma página simples de texto ganhe uma forma gráfica distinta sem ilustração customizada.
Cuidado com: A página é muito pesada e obteve apenas uma pontuação intermediária no teste de laboratório, e o Google não tinha dados suficientes de visitantes reais para mostrar como ela se comporta para visitantes reais.
Criado por Sons & Co. Visite wam.studio.
53. Lithuania Travel
Um painel arredondado branco contém o título e um botão, posicionado sobre uma fotografia de floresta outonal em sangra total com uma torre de observação de madeira. Blocos roxo-lilás suave na borda enquadram a imagem sem competir com ela. Os laranjas quentes contra verde profundo dão à página um tom claro, e a tipografia é uma sans geométrica amigável.
Empreste isto: Coloque um único cartão branco arredondado sobre uma fotografia grande e mantenha-o em um título, uma linha de apoio e um botão sólido.
Cuidado com: O teste de laboratório constatou que a página é lenta e mais pesada que a média, e visitantes reais veem carregamento lento da imagem principal (LCP), então uma fotografia hero tão grande precisa de compressão mais apertada.
Visite lithuania.travel.
54. GetYourGuide Trend Tracker
Recortes de fotos circulares de pessoas fazendo snorkel, cozinhando, paraquedismo indoor e montando um touro mecânico deixam o tema claro antes de qualquer texto ser lido. Pequenos pontos de ícones rosa pastel e azul e uma linha em zigue-zague fraca sugerem dados sem bagunça. O título azul marinho escuro pesado fica centralizado em espaço branco generoso, com um botão azul em formato de pílula como a única ação.
Empreste isto: Recorte fotos de clientes em círculos e combine-os com pequenos pontos de ícones tingidos para dar a uma página branca simples uma sensação amigável e ordenada.
Cuidado com: O teste de laboratório constatou que a página é lenta e mais pesada que a média, e visitantes reais veem problemas com carregamento (LCP) e responsividade (INP), então o herói animado rico em imagens custa velocidade.
Criado por Vovi. Visite getyourguide.supply.
55. Cores da Ístria
Uma foto aérea escura e tingida de uma aldeia no topo de uma colina fica atrás de um grande título branco em uma sans redonda e geométrica, para que o texto seja lido com clareza. Um botão azul saturado em formato de pílula se destaca contra o azul marinho enfraquecido. Quatro pequenos ícones de seta coloridos em laranja, verde e rosa ecoam o logo de pétala multicolorido e dão ao herói um código de cor tranquilo.
Empreste isto: Tinja uma única fotografia com uma sobreposição escura, depois coloque um título ousado e um botão pílula brilhante em cima para que a ação principal seja óbvia.
Cuidado com: A página é mais pesada que a média, o custo de cards baseados em imagens e um carrossel, mas testou rápido no laboratório e visitantes reais têm boa experiência nos três Core Web Vitals.
Feito por ALT_digital. Visite coloursofistria.com.
56. KAAN Architecten
Toda a tela é dedicada a uma fotografia full-bleed de uma escada em espiral branca e um teto de treliça, fotografados de baixo, para que o edifício fale por si. A paleta mantém cinzas pálidos e branco, e o wordmark é o único outro elemento. Uma sans em maiúsculas em negrito combinada com um peso leve para o descritor cria uma hierarquia discreta.
Copie isto: Comece com uma fotografia em tela cheia do seu melhor trabalho finalizado e coloque o nome sobre ela em branco, usando um peso em negrito e um peso leve para separar as duas partes.
Cuidado com: A página é rápida no teste de laboratório e visitantes reais obtêm bom resultado em todas as medidas do Core Web Vitals, embora seja mais pesada que a média, o custo usual de uma tela de abertura baseada em imagem.
Feito por Humans & Machines. Visite kaanarchitecten.com.
Negócios e saúde
Sites de negócios e saúde precisam conquistar confiança rápido. Três destes oito passam nos três Core Web Vitals, o máximo de qualquer categoria, e este grupo também inclui a página mais pesada da amostra, ERA Residence com 104.4 MB. Para clínicas e consultórios, veja design de website de saúde.
| # | Site | Lighthouse (mobile) | LCP, visitantes reais | INP | CLS | Peso da página | Construído com |
|---|---|---|---|---|---|---|---|
| 57 | Twelve | 70 | sem dados | sem dados | sem dados | 5.4 MB | WordPress |
| 58 | Gielly Green | 73 | 1,9 s | 115 ms | 0.00 | 2.4 MB | Nuxt |
| 59 | DVO | 62 | 5.0 s | 170 ms | 0.01 | 24.5 MB | WordPress |
| 60 | Rejuvenation Health | 81 | 2,2 s | 96 ms | 0.00 | 0.7 MB | Não detectado |
| 61 | Enerblock | 63 | sem dados | sem dados | sem dados | 24 MB | Não detectado |
| 62 | Seasats | 49 | 3,3 s | 359 ms | 0.00 | 5 MB | Next.js |
| 63 | ERA Residence | 58 | 2.3 s | 339 ms | 0.54 | 104.4 MB | Webflow |
| 64 | Heron AI | 52 | 1.8 s | 172 ms | 0.01 | 1.7 MB | Webflow |
57. Twelve
Um fundo creme quente e uma única manchete sans arredondada grande dão à página um início calmo e confiante. A fotografia é cortada em um leve ângulo, e barras de cores soltas em coral, menta e azul sobrepõem a borda do texto para adicionar movimento. A marca de faixa do logotipo em preto e coral é repetida pelo ícone de menu em coral.
Pegue emprestado isto: use um fundo branco quente e único com uma cor de destaque repetida no logotipo e ícone de menu, para que uma página simples ainda pareça marcada.
Cuidado com: o teste de laboratório saiu mediano e a página é mais pesada que a média, o que se encaixa com um layout construído em fotografias grandes, e o Google não tinha dados suficientes de visitantes reais para mostrar como funciona na prática.
Criado pela Pixelfish. Visite twelvefutures.com.
58. Gielly Green
Uma única fotografia do produto preenche a tela, com frascos em borgonha profundo e tampas em ouro rosado contra um fundo quente e de pedra pálida. As cores são rigidamente limitadas, portanto a embalagem faz toda a conversa. O serif alto e leve nos rótulos é repetido no pequeno monograma, e os botões de navegação em forma de pílula ficam silenciosamente ao redor das bordas.
Pegue emprestado isto: escolha uma fotografia bem iluminada do seu próprio produto, coloque-a contra um fundo simples em um único tom neutro e mantenha a navegação em alguns botões arredondados pequenos.
Cuidado com: o teste de laboratório saiu mediano, embora a página seja leve e os visitantes reais tenham uma boa experiência em todas as três Core Web Vitals, portanto a velocidade que importa está se mantendo.
Criado pela Lovelace Studio. Visite giellygreen.co.uk.
59. DVO
Uma manchete geométrica sans muito grande e leve fica baixa à esquerda sobre um gradiente cinza suave, com um pequeno rótulo em maiúsculas acima e um botão delineado fino abaixo. A contenção é o apelo: tipo branco, espaço vazio generoso e uma paleta silenciosa dão uma sensação calma e arquitetônica. Uma barra esbelta ao longo da parte inferior com títulos de slides numerados e pequenos botões de seta mantém os controles arrumados.
Pegue emprestado isto: defina uma manchete curta em um sans leve e com espaçamento largo sobre um fundo atenuado e adicione um botão delineado simples, para que a mensagem seja lida antes de qualquer outra coisa na página.
Cuidado com: a página é muito pesada, o teste de laboratório saiu mediano e visitantes reais veem problemas com a rapidez do carregamento do conteúdo do herói principal, portanto a parte do herói grande é a que deve ser mantida leve.
Criado pelo Studio Idee Materia. Visite dvo.it.
60. Rejuvenation Health
Um grande retrato em preto e branco do dentista preenche a tela inteira, para que a primeira impressão seja uma pessoa e não um sorriso genérico. A manchete usa um serif sans limpo e largo em branco e se estende pelo rosto, dando movimento à página sem gráficos extras. Uma barra de menu principal em marrom chocolate escuro e botões correspondentes mantêm a paleta calma e quente.
Pegue emprestado isto: use um retrato honesto e bem iluminado do proprietário atrás de uma sobreposição escura com texto branco por cima, para que os visitantes vejam imediatamente com quem estão lidando.
Cuidado com: o resultado do teste de laboratório é mediano, mas a página é leve e visitantes reais têm uma boa experiência em todas as medidas de Core Web Vitals, portanto a grande fotografia não está custando na prática.
Construído pelo Studio 3 Marketing. Visite rejuv-health.com.
61. Enerblock
Um campo de vermelho-coral saturado e plano sustenta uma manchete grotesca apertada e pesada em quase-preto, para que a mensagem seja lida de imediato. Linhas de grade fina traçada enquadram uma grande marca de logo angular, dando um ar de desenho técnico. Uma fotografia de uma bobina de aço atrás de uma gaiola de arame fica abaixo, ancorando a metade gráfica superior na indústria real.
Pegue isso emprestado: combine uma única cor de fundo em negrito com uma manchete superdimensionada e uma marca gráfica forte, depois coloque uma fotografia real diretamente abaixo para provar que o trabalho é físico.
Cuidado com: as notas mostram uma página muito pesada e apenas resultados medianos em laboratório, então as imagens industriais em largura total e o vídeo em movimento provavelmente custam tempo de carregamento aos visitantes, e há dados insuficientes de visitantes reais para dizer como se sente na prática.
Construído pelo BANILA Studio. Visite enerblock.net.
62. Seasats
Uma fotografia calma e sangrante de pequenos barcos não tripulados em água parada preenche a tela, com céu cinza-azul suave desbotando para azul-marinho escuro. A manchete usa um serif leve e espaçado em branco e se lê claramente contra o céu pálido. A coluna do lado direito de abas empilhadas muda de areia para sálvia para verde profundo, dando ao menu uma ordem clara.
Pegue isso emprestado: use uma grande fotografia silenciosa com uma única manchete curta e um botão claro, e mantenha o céu ou o fundo vazio o suficiente para o texto branco ser lido.
Cuidado com: a página é lenta no teste de laboratório e mais pesada que a média, e visitantes reais enfrentam problemas com carregamento (LCP) e responsividade (INP), que é um custo comum de uma grande imagem hero em movimento e rolagem com script.
Construído pela Raw Materials. Visite seasats.com.
63. ERA Residence
Um campo aubergine profundo com tipo off-white quente dá à página uma sensação calma e cara. As capitais de espaçamento amplo para a região flanqueiam um nome centrado grande, e a palavra estilo-script inclinada para a cidade acrescenta um toque manuscrito. Uma assinatura gigante tênue fica atrás de tudo, e uma borda de inserção fina enquadra a tela como um cartão impresso.
Pegue isso emprestado: use uma única cor profunda como o fundo todo e defina um nome curto em capitais pálidas grandes, com uma palavra levemente inclinada como o único toque de elegância.
Cuidado com: a página é muito pesada, e visitantes reais relatam problemas com responsividade e estabilidade do layout, o que se encaixa em uma construção que se apoia em bibliotecas de animação e muitos ativos carregados.
Construído por The First The Last. Visite era-residence.com.
64. Heron AI
A página parece uma folha de desenho de arquiteto. Uma elevação com sombreamento pontilhado de uma casa de concreto repousa em papel bege quente, emoldurada por linhas finas, marcas de medida e cantos com mira. O título usa grotesco pesado em maiúsculas apertadas, a navegação usa uma fonte monoespacial pequena, e um único acento laranja aparece com moderação no link de contato e botões.
Pegue emprestado isto: Combine uma única ilustração com bordas finas, um fundo neutro quente e uma cor de destaque contida para dar caráter a um layout simples sem um ensaio fotográfico.
Cuidado com: O resultado do teste de laboratório é mediano, mas a página é leve e os visitantes reais têm uma boa experiência em todas as medidas do Core Web Vitals.
Construído pela Bearplus Agency. Visite heronaiapp.com.
Websites bonitos não duram
Listas de inspiração de design envelhecem mal. Abri todos os sites vinculados de uma lista popular de 2026 dos melhores designs de websites, 48 no total, em um navegador em 31 de outubro de 2026.
Oito dos 48 não carregam mais o site apresentado. Quatro domínios não resolvem mais, duas páginas retornam um 404, uma retorna um erro de servidor e uma agora redireciona para uma empresa diferente. Microsites de campanha são os mais frágeis: são construídos para um lançamento, ganham atenção, e depois o orçamento de manutenção acaba. Os sites que duram são o website principal de uma empresa, cuidado ano após ano.
Como obter um website bonito e rápido também
Os 11 sites que passam nos três Core Web Vitals apontam para alguns hábitos, e nenhum exige abrir mão de ficar bonito.
- Deixe a primeira tela leve. A página pode ser pesada contanto que a primeira coisa que as pessoas veem chegue rapidamente. Fauna Robotics prova em 68,6 MB.
- Trate toda biblioteca de animação como um custo. A rolagem suave é agradável, mas os sites que a usam tiveram pontuações mais baixas no laboratório. Use movimento quando ele explica algo.
- Uma ótima imagem supera dez boas. Os sites mais rápidos comandados por imagem aqui, como KAAN Architecten, abrem com uma única fotografia e quase nada mais.
- Meça visitantes reais, não apenas o laboratório. Uma pontuação Lighthouse é um ponto de partida. Os dados de visitantes reais são o que o Google usa para a experiência de página (Chrome UX Report).
- Planeje para o longo prazo. Coloque o esforço no site que você manterá, não em um microsite que desativará.
Se seu site atual parece desatualizado, ou parece bom mas carrega lentamente, isso é exatamente o que um redesign de website deve corrigir: um design que as pessoas lembram, construído para passar no Core Web Vitals desde o primeiro dia. Se o design é bom e apenas a velocidade é o problema, otimização de desempenho web é o trabalho menor.
Perguntas que as pessoas fazem
O que torna um website bonito?
Entre estes 64, o fio condutor é o comedimento: uma paleta curta, uma ou duas fontes usadas com confiança, espaço generoso e uma imagem ou título forte por tela. Os sites que parecem caros geralmente têm menos elementos na primeira tela, não mais.
Um website bonito também pode ser rápido?
Sim. KAAN Architecten tem 93 de pontuação no laboratório e passa nos três Core Web Vitals para visitantes reais, e Rejuvenation Health passa nos três em uma página de 0,7 MB. Os sites lentos nesta amostra são lentos por causa de mídia pesada, bibliotecas de animação e scripts grandes, não porque parecem bons.
Quais são boas pontuações de Core Web Vitals?
O Google classifica um LCP de 2,5 segundos ou menos, um INP de 200 milissegundos ou menos e um CLS de 0,1 ou menos como bom, medido no percentil 75 dos carregamentos de página. Uma página passa quando todos os três são bons (web.dev).
Por que as pontuações de Lighthouse e os dados de visitantes reais discordam?
Lighthouse é um teste de laboratório executado em um ambiente controlado, e não consegue medir INP. Os dados de visitantes reais do Chrome UX Report refletem dispositivos e redes reais ao longo de 28 dias (web.dev). É por isso que Heron AI pode marcar 52 no laboratório e ainda passar nos três Core Web Vitals.
Onde posso encontrar mais inspiração para design de website?
Estes 64 são uma amostra. Para navegar por layout, setor ou componente, o artigo sites de inspiração em web design lista as galerias que valem a pena marcar, e a neurociência do design UX explica por que alguns layouts simplesmente se sentem melhor.