# 13 sites de referência para criar sites incríveis > 13 sites de referência para desenhar sites e landing pages com estrutura própria, sem cair no layout genérico de três colunas. - Tipo: Artigo - Autor: Dionatha Rodrigues - Publicado em: 2026-11-03 · Atualizado em: 2026-11-04 - URL: https://clubmartech.com.br/blog/sites-de-referencia-para-web-design/ 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 ![Infográfico: 13 sites de referência para web design, por etapa, com os itens do guia na ordem em que aparecem no artigo.](https://clubmartech.com.br/wp-content/uploads/2026/11/infografico-sites-de-referencia-para-web-design.webp) ### 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](https://www.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](https://www.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](https://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](https://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](https://www.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](https://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](https://www.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](https://www.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](https://www.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](https://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](https://www.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](https://www.realtimecolors.com/) - **Repositório GitHub:** [juxtopposed/realtimecolors](https://github.com/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](https://cubic-bezier.com/) - **Repositório GitHub:** [LeaVerou/cubic-bezier](https://github.com/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: ```css 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. ![Diagrama: Da Arquitetura Estrutural à Landing Page no Ar. Etapas: Relume; Lapa Ninja; Curated; Realtime Colors.](https://clubmartech.com.br/wp-content/uploads/2026/11/diagrama-sites-de-referencia-para-web-design-1.webp) ### 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. ![Diagrama: Anatomia de Navegação e Interações Refinadas. Etapas: Navbar Gallery; Footer Design; Typewolf; cubic-bezier.](https://clubmartech.com.br/wp-content/uploads/2026/11/diagrama-sites-de-referencia-para-web-design-2.webp) ### 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](https://www.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](https://saaslandingpage.com/pricing/) ou o [Navbar Gallery](https://www.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](https://www.realtimecolors.com/), 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](https://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](https://clubmartech.com.br/lancamento/). 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.