13 sites de referência para criar sites incríveis

Se você já começou a desenhar uma landing page com uma folha em branco na frente e acabou montando a mesma estrutura genérica de três colunas com ícones azuis e um formulário cinza no canto direito, você sabe como a falta de referência empurra o layout para o genérico.

Neste guia, a gente selecionou e organizou 13 sites de referência fundamentais para web designers, desenvolvedores front-end e profissionais de marketing digital. Eles vão muito além da inspiração superficial: cobrem galerias especializadas por componente (menus de navegação, tabelas de preços e rodapés), arquivos de experiência de compra baseados em pesquisas de usabilidade e ferramentas matemáticas para calibrar curvas de animação e paletas responsivas.

O problema real: você domina o construtor de páginas, mas falta referência de interface

Hoje qualquer profissional consegue colocar uma página no ar em poucas horas usando ferramentas como WordPress com Elementor, Framer ou Webflow. O gargalo da produção de sites não é mais o código nem o construtor visual. O gargalo é a arquitetura de informação e o critério de design.

Um site que realmente converte e constrói valor para a marca depende de decisões de interface como estas:

• Como organizar um menu de navegação denso sem sobrecarregar o visitante no celular?
• Qual é a forma mais clara de apresentar três planos de assinatura complexos sem confundir a decisão do usuário?
• Como dosar o ritmo das transições de CSS para que o site pareça fluido e sofisticado, e não lento ou exagerado?

Quando você recorre aos sites de referência certos, não precisa reinventar a roda nem copiar cegamente o concorrente direto. Você estuda soluções consolidadas pelos produtos digitais mais bem-sucedidos do mercado e adapta esses padrões ao contexto do seu negócio.

Como a gente escolheu estes 13 sites

Dentre centenas de diretórios e agregadores visuais na internet, ficamos com 13 ferramentas, escolhidas por cinco critérios:

1. Especialização por problema de interface: Priorizamos acervos que dissecam componentes específicos (como navegação, páginas de erro ou checkout), em vez de apenas mostrar prints gerais de homepages.
2. Evidência de uso em ambiente real: Demos preferência a sites que documentam páginas que estão ativas e gerando receita no mercado, e não apenas conceitos experimentais que nunca foram testados com usuários.
3. Disponibilidade pública: Todas as fontes permitem consulta gratuita e exploração detalhada de padrões de interface.
4. Viabilidade técnica de implementação: Os exemplos analisados podem ser implementados tanto em código limpo (HTML, Tailwind CSS e React) quanto em construtores visuais avançados.
5. Complementaridade no ciclo de desenvolvimento: A lista cobre desde a pesquisa de direção de arte até a validação de curvas de aceleração de transições.

Abaixo, apresentamos os 13 sites divididos nas etapas cronológicas de trabalho: descobrir e planejar.

A lista de sites por etapa do trabalho

Etapa 1: Descobrir

1. Awwwards

• O que faz: O principal prêmio global de design e desenvolvimento web, que julga e premia diariamente sites internacionais por critérios de design visual, usabilidade, criatividade e conteúdo.
• Quando escolher: Escolha quando o projeto demandar direção de arte sofisticada, narrativa visual imersiva (storytelling) e referências de microinterações e transições de página que fogem do lugar-comum.
• Site oficial: awwwards.com/websites
• Repositório GitHub: Não aplicável (plataforma proprietária de premiação)
• Como usar no fluxo de trabalho: Use os filtros de busca avançada para selecionar projetos por tecnologia (ex.: WebGL, GSAP, Three.js) ou por setor de atuação, observando como os vencedores trabalham a tipografia em escala gigante e as animações de rolagem.
• Combina com: Lapa Ninja, cubic-bezier.com, Typewolf.

2. Lapa Ninja

• O que faz: Biblioteca viva com mais de 7.500 capturas completas de landing pages reais, registradas do topo ao rodapé e organizadas por categorias de mercado (SaaS, finanças, educação, e-commerce, consultoria).
• Quando escolher: Escolha quando precisar desenhar páginas de conversão de ponta a ponta e quiser estudar a sequência lógica dos blocos: abertura hero, prova social, benefícios, depoimentos, demonstração do produto e fechamento de oferta.
• Site oficial: lapa.ninja
• Repositório GitHub: Não aplicável (acervo público de landing pages)
• Como usar no fluxo de trabalho: Filtre por “SaaS” ou “Education” e examine a contagem de blocos que as páginas com melhor acabamento utilizam antes de pedir a conversão principal.
• Combina com: SaaS Landing Page — Pricing, Navbar Gallery, Curated.

3. Mobbin

• O que faz: Arquivo de telas e fluxos reais de produtos digitais, com centenas de milhares de capturas em alta definição de aplicativos mobile e aplicações web em produção.
• Quando escolher: Escolha quando o seu site ou produto digital precisar resolver desafios profundos de experiência do usuário (UX): fluxos de cadastro passo a passo (onboarding), modais de confirmação, painéis de conta e estados vazios (empty states).
• Site oficial: mobbin.com
• Repositório GitHub: Não aplicável (plataforma de documentação de produto)
• Como usar no fluxo de trabalho: Pesquise pela jornada de “Sign Up” ou “Account Settings” para entender como plataformas como Notion, Airbnb ou Stripe diminuem o esforço cognitivo do usuário em etapas complexas.
• Combina com: Baymard — Ecommerce Design Examples, Relume, Curated.

4. Baymard — Ecommerce Design Examples

• O que faz: Galeria de estudos de caso e exemplos reais de e-commerce mantida pelo Baymard Institute, o principal centro de pesquisas de usabilidade de compras online do mundo.
• Quando escolher: Escolha quando estiver projetando páginas de catálogo, filtros de produtos, páginas de detalhes de produto (PDP), carrinhos de compras ou etapas de checkout.
• Site oficial: baymard.com/ecommerce-design-examples
• Repositório GitHub: Não aplicável (instituto de pesquisa de UX)
• Como usar no fluxo de trabalho: Consulte a seção de checkout para identificar os principais pontos de atrito que fazem os clientes abandonarem carrinhos (como excesso de campos obrigatórios e falta de clareza nos prazos de frete).
• Combina com: Mobbin, Footer Design.

5. Typewolf

• O que faz: Guia de tipografia para a web mantido pelo designer Jeremiah Shoaf, que cataloga sites reais em produção e identifica as fontes utilizadas em títulos, subtítulos e textos corridos.
• Quando escolher: Escolha para encontrar combinações tipográficas profissionais que funcionem perfeitamente no ambiente digital, evitando fontes difíceis de ler ou pares tipográficos que brigam visualmente entre si.
• Site oficial: typewolf.com
• Repositório GitHub: Não aplicável (guia editorial e diretório de tipografia)
• Como usar no fluxo de trabalho: Explore a seção “Site of the Day” para ver quais fontes sans-serif geométricas estão sendo combinadas com serifs clássicas na criação de páginas corporativas de alto impacto.
• Combina com: Realtime Colors, Lapa Ninja.

Etapa 2: Planejar

6. SaaS Landing Page — Pricing

• O que faz: Acervo especializado exclusivamente em telas de preços, comparação de tabelas de planos e modelos de precificação de empresas de software e assinaturas digitais.
• Quando escolher: Escolha no momento em que estiver desenhando a tabela de preços do seu site ou serviço, um dos blocos que mais causam desistências quando mal estruturados.
• Site oficial: saaslandingpage.com/pricing
• Repositório GitHub: Não aplicável (galeria especializada de seções de pricing)
• Como usar no fluxo de trabalho: Analise como empresas líderes diferenciam o plano recomendado (destaque visual por cor e elevação), como apresentam descontos no faturamento anual e como estruturam o comparativo detalhado de recursos.
• Combina com: Lapa Ninja, Curated, Relume.

7. Navbar Gallery

• O que faz: Diretório focado exclusivamente na anatomia de barras de navegação (menus), classificando exemplos reais por tipos: barras fixas flutuantes, menus transparentes, dropdowns expansíveis e mega menus densos.
• Quando escolher: Escolha para planejar a estrutura do cabeçalho do site conforme o número de páginas e links que a sua empresa precisa exibir, garantindo que o visitante encontre as seções prioritárias em um clique.
• Site oficial: navbar.gallery
• Repositório GitHub: Não aplicável (galeria de componentes de navegação)
• Como usar no fluxo de trabalho: Compare modelos de menus minimalistas para landing pages focadas em uma única ação com mega menus voltados a portais institucionais com dezenas de serviços.
• Combina com: Footer Design, Relume.

8. Footer Design

• O que faz: Galeria dedicada exclusivamente ao design e hierarquia de rodapés de sites, analisando a distribuição de links secundários, informações regulatórias, seletores de idioma e caixas de captura de newsletter.
• Quando escolher: Escolha quando a sua página tiver chegado ao fim do conteúdo principal e você precisar de referências elegantes para organizar os links legais e o mapa do site sem poluir a área final da página.
• Site oficial: footer.design
• Repositório GitHub: Não aplicável (galeria especializada de rodapés)
• Como usar no fluxo de trabalho: Filtre por rodapés com grids de quatro a seis colunas e observe como grandes marcas usam pesos visuais diferentes para separar navegação de avisos de privacidade e copyright.
• Combina com: Navbar Gallery, 404s Design.

9. 404s Design

• O que faz: Reúne as páginas de erro 404 mais criativas, funcionais e bem desenhadas da internet, demonstrando como transformar uma falha de navegação em uma oportunidade de encantar o usuário e mantê-lo navegando.
• Quando escolher: Escolha para desenhar a página de erro do seu site de forma profissional, garantindo caminhos claros de retorno para a página inicial ou barra de pesquisa em vez de deixar o visitante em um beco sem saída.
• Site oficial: 404s.design
• Repositório GitHub: Não aplicável (galeria especializada em páginas de erro)
• Como usar no fluxo de trabalho: Analise exemplos que combinam bom humor sutil coerente com a marca e um botão proeminente de retorno para as páginas mais importantes do negócio.
• Combina com: Navbar Gallery, Footer Design.

10. Curated

• O que faz: Plataforma que decompõe sites premiados em blocos atômicos (seção hero, grade de funcionalidades, depoimentos, call-to-action final), permitindo montar coleções de referências por seção para orientar a equipe de design ou agentes de IA de código.
• Quando escolher: Escolha quando você não quiser apenas uma referência genérica do site inteiro, mas precisar de inspiração para um bloco específico (ex.: “como mostrar 6 integrações de software de forma limpa”).
• Site oficial: curated.design
• Repositório GitHub: Não aplicável (plataforma de curadoria modular de interface)
• Como usar no fluxo de trabalho: Agrupe os blocos aprovados em uma prancheta de referências e forneça essas especificações de layout como briefing visual antes de iniciar o desenvolvimento.
• Combina com: Lapa Ninja, Relume.

11. Relume

• O que faz: Plataforma e biblioteca de componentes e arquitetura de sites que permite planejar wireframes e mapas de páginas em minutos, exportando a estrutura diretamente para ferramentas como Figma e Webflow.
• Quando escolher: Escolha na fase de arquitetura de informação e wireframe para definir a estrutura dos blocos com o cliente ou time de produto antes de gastar tempo com cores e detalhes gráficos finais.
• Site oficial: relume.ai
• Repositório GitHub: Não aplicável (ecossistema de design system e IA para wireframes)
• Como usar no fluxo de trabalho: Use o assistente para gerar a árvore estrutural da landing page e aproveite os componentes padronizados para garantir consistência de espaçamento e proporção.
• Combina com: Navbar Gallery, Curated, SaaS Landing Page — Pricing.

12. Realtime Colors

• O que faz: Simulador interativo que aplica códigos de cor e pares tipográficos diretamente em uma interface de site completa com seções reais de cabeçalho, botões de ação, cards de serviços e ilustrações.
• Quando escolher: Escolha para testar se as cores da marca funcionam harmoniosamente na prática, conferindo o contraste entre texto e fundo e a visibilidade de botões primários antes de aplicar os estilos ao construtor de páginas.
• Site oficial: realtimecolors.com
• Repositório GitHub: juxtopposed/realtimecolors (código-fonte aberto mantido por Juxtopposed)
• Como usar no fluxo de trabalho: Insira a cor principal do seu logotipo no seletor primário e teste como a página se comporta ao alternar entre paletas de alto contraste e fundos suaves.
• Combina com: Typewolf, Lapa Ninja.

13. cubic-bezier.com

• O que faz: Ferramenta gráfica e matemática criada pela engenheira Lea Verou para desenhar, testar e comparar curvas de aceleração de transições CSS (cubic-bezier), permitindo calibrar o tempo e a suavidade de animações de interface.
• Quando escolher: Escolha quando for configurar transições de botões, aberturas de acordeões ou efeitos de rolagem no CSS ou no construtor de páginas e quiser fugir das transições lineares ou padrões robóticos de ease-in-out.
• Site oficial: cubic-bezier.com
• Repositório GitHub: LeaVerou/cubic-bezier (projeto de código aberto mantido por Lea Verou)
• Como usar no fluxo de trabalho: Ajuste os nós da curva para criar transições com desaceleração suave no final (ease-out) e copie a linha de código CSS pronta diretamente para o seu projeto:

  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  

• Combina com: Awwwards, Navbar Gallery.

Como combinar: 2 cadeias de desenvolvimento de páginas

Conectar referências modulares acelera drasticamente a passagem da ideia abstrata para uma página publicada com alta performance de conversão.

Cadeia 1: Da estrutura ao acabamento da landing page

1. Esqueleto da página: Use o Relume para montar o wireframe com a quantidade ideal de seções necessárias para contar a história da oferta.
2. Referências de conversão: Consulte o Lapa Ninja para entender como outras marcas de sucesso distribuem a prova social ao longo da rolagem.
3. Detalhamento de blocos: No Curated, busque ideias para diagramar a seção de perguntas frequentes e o bloco de garantias.
4. Aplicação de identidade: Valide as proporções de cor e legibilidade de textos no Realtime Colors antes de começar a estilizar a página no seu construtor visual.

Cadeia 2: Navegação e microinterações polidas

1. Cabeçalho intuitivo: O Navbar Gallery fornece o modelo de menu fixo com botão de ação destacado que melhor se adapta à quantidade de páginas do site.
2. Fechamento consistente: O Footer Design orienta a disposição das colunas do rodapé, incluindo formulário de newsletter e certificações de segurança.
3. Ritmo de leitura: O Typewolf valida a escolha tipográfica para garantir leitura agradável tanto em monitores ultrawide quanto em celulares.
4. Suavidade de movimento: O cubic-bezier.com fornece a curva precisa de aceleração para que os botões respondam ao clique com elegância física natural.

O que ficou de fora e por quê

Vários sites populares de design foram excluídos desta seleção criteriosa:

• Plataformas de templates descartáveis de baixa qualidade: Sites que comercializam temas genéricos superlotados de plugins lentos foram deixados de fora. A web moderna exige carregamento ultrarrápido e arquitetura limpa.
• Acervos sem divisão funcional de componentes: Diretórios que jogam milhares de imagens de sites sem permitir filtrar por blocos específicos (como tabelas de preços ou cabeçalhos) foram descartados por demandarem muito tempo de busca.
• Sites de conceitos puramente estéticos não funcionais: Galerias com designs conceituais repletos de textos ilegíveis, botões minúsculos ou contrastes que violam regras básicas de acessibilidade foram eliminadas.

Como começar em 30 minutos

Você pode melhorar o design do seu próximo projeto hoje mesmo seguindo este plano prático:

1. Minutos 0 a 10 — Mapeie os blocos indispensáveis:
   Abra o Lapa Ninja e selecione 2 landing pages do seu segmento que transmitam credibilidade. Anote em uma folha a ordem exata das seções utilizadas (ex.: Hero > Clientes > Problema > Solução > Preço > FAQ).
2. Minutos 10 a 20 — Resolva a seção mais crítica da página:
   Se a sua página for de captura ou venda, acesse o SaaS Landing Page — Pricing ou o Navbar Gallery e escolha um modelo de componente que organize a decisão do usuário com total clareza.
3. Minutos 20 a 30 — Afine cores e microinterações:
   Abra o Realtime Colors, digite a cor primária da sua marca e confira se a cor de fundo escolhida garante nota máxima de contraste. No cubic-bezier.com, pegue uma curva de desaceleração suave para aplicar nas transições de hover dos botões da página.

Perguntas frequentes (FAQ)

Posso reproduzir exatamente a estrutura de uma página do Lapa Ninja?

Sim, desde que você reproduza a arquitetura de informação e a hierarquia funcional, e não o conteúdo autoral, textos, ilustrações ou logotipo da empresa de referência. Estruturas de layout (como colocar depoimentos após a demonstração de benefícios) são boas práticas públicas de usabilidade e conversão.

Essas referências funcionam bem para quem constrói sites no WordPress com Elementor?

Sim. O Elementor, assim como qualquer construtor de blocos moderno (Framer, Webflow ou Gutenberg), possui containers flexíveis que permitem implementar com facilidade as estruturas de colunas, grids de rodapé e tabelas de preços encontradas nesses sites de referência.

Por que usar uma curva personalizada no cubic-bezier.com em vez do padrão ease-in-out?

As curvas padrão dos navegadores tendem a parecer mecânicas e artificiais. Curvas personalizadas de desaceleração (onde o elemento começa o movimento rápido e desacelera suavemente no final) simulam a física do mundo real, transmitindo uma sensação imediata de sofisticação e responsividade ao toque do usuário.

O Mobbin é útil mesmo para quem desenvolve apenas landing pages e sites institucionais?

Sim. Produtos digitais de ponta investem bastante em testar a clareza de suas interfaces com usuários reais. Estudar como o Mobbin documenta o fluxo de cadastro ou apresentação de recursos de um aplicativo renomado fornece lições valiosas de síntese e redução de atrito que aumentam a conversão de qualquer página comercial.

Próximo passo na sua jornada

Um site que converte depende de entender como o usuário se comporta em cada interação.

Se você quer aprofundar nessa visão e aprender a projetar páginas e produtos digitais que geram valor para o negócio de forma consistente, conheça o módulo de UX, Produto e Persona na Formação Club Martech. Lá, a gente capacita profissionais que já atuam no mercado a transformar referências visuais em experiências digitais que convertem e retêm clientes.