Para o designer, referência é tudo. É com essa ideia que uma lista de galerias especializadas circulou no Threads nesta semana: um endereço reúne apenas páginas de erro 404, outro se dedica a rodapés, um terceiro cataloga botões de chamada para ação. O autor do post fez uma ressalva: “espero que vocês não se limitem às sugestões de links que eu estou dando aqui”. Os acervos servem para usar, mas repertório se constrói com o contexto de tudo o que cerca o projeto.
A lógica é prática. Quando o designer trava em um trecho específico do layout, não quer navegar por centenas de sites inteiros atrás de uma solução. Quer colocar dezenas de exemplos do mesmo bloco lado a lado e decidir rápido.
Uma galeria para cada pedaço da página
Os cinco endereços mais citados cobrem, cada um, uma unidade da interface. O Supahero reúne hero sections, a primeira dobra que decide se o visitante continua rolando. O site informa hoje que passou a fazer parte do Screensdesign, uma biblioteca maior voltada a interfaces de aplicativos.
O CTA.gallery faz o mesmo com chamadas para ação. A navegação é organizada por tipo, como botão, formulário, newsletter, modal e preço, além de indústria e modo claro ou escuro. O 404s.design cataloga páginas de erro e permite filtrar por estilo, como brutalist, glitchy ou ilustrado, e por interação, incluindo páginas com minijogos e cursor personalizado.
A Navbar Gallery concentra a curadoria em menus de navegação. Há filtros para mega menu, barra lateral, barra de busca e breadcrumbs. O footer.design se apresenta como a única galeria de rodapés do mundo, com exemplos organizados por tipo de projeto e estilo visual.
Um acervo puxou o outro
A história desses sites se cruza. O footer.design, mantido por Benten Woodring, Devin Fountain e Matt Cram, aparece como inspiração declarada de outros dois projetos. Salim Lunat, criador do CTA.gallery, conta que sempre quis contribuir com a comunidade de design. A oportunidade surgiu quando conheceu a galeria de rodapés e percebeu que as chamadas para ação ficavam de fora das bibliotecas maiores. A Navbar Gallery nasceu de uma faísca no Twitter provocada pelo mesmo site: Christina Liubynska percebeu que a navegação não tinha um repositório dedicado e construiu o projeto em público.
O padrão aparece em outros lugares. Existem galerias específicas de hero, bibliotecas de seções inteiras, como a Unsection, e catálogos dedicados a telas de aplicativos. A especialização deixou de ser nicho e virou método de curadoria.
O que essas galerias não entregam
O discurso de conversão é a parte mais frágil. Nenhuma das cinco entrega algo para colar no código. O que existe é captura de tela, metadados e um link para o site original. Elas servem como referência visual, não como biblioteca de componentes prontos.
Também não há prova de que os exemplos convertem melhor. O CTA.gallery usa expressões como “conversion-boosting”, mas as páginas consultadas não trazem teste A/B nem métrica de conversão. Há ainda um risco estrutural: como os catálogos apontam para páginas de terceiros, os exemplos envelhecem, mudam de layout ou desaparecem.
A discussão sobre o 404s.design no Hacker News, com 77 pontos e 13 comentários, levantou um ponto técnico que vale para qualquer uma dessas referências. Uma página de erro criativa precisa ser leve. Requisições antigas de favicon e ícones de toque ainda chegam ali, e uma página pesada desperdiça banda. Criatividade sem parcimônia técnica vira problema.
Onde buscar referência de cada parte do site
Nenhum desses acervos tem versão em português, e quem procura componente pronto, e não apenas referência, paga em dólar. A seleção abaixo separa o que é inspiração visual do que é material implementável:
- Supahero – hero sections, a primeira dobra da página. Hoje faz parte do Screensdesign.
- Hero Gallery – só heros, com análise de layout, texto, chamada e prova social de cada exemplo.
- CTA.gallery – chamadas para ação por tipo, como botão, formulário, newsletter, modal e preço, além de indústria e modo claro ou escuro.
- Navbar Gallery – navegação: mega menu, barra lateral, barra de busca e breadcrumbs.
- footer.design – rodapés organizados por tipo de projeto e estilo. Se apresenta como a única galeria do tipo.
- 404s.design – páginas de erro por estilo, como brutalist, glitchy ou ilustrado, e por interação, com minijogos e cursor personalizado.
- Unsection – milhares de seções de sites reais, de hero a FAQ e rodapé. Plano Pro a US$ 5 por mês, cerca de R$ 26.
- UIBook – designs de sites reais pesquisáveis por seção, com filtro de setor, estilo, tipografia e cor.
- Kombai Gallery – mais de 20 mil referências de web e mobile, com prompts prontos para agentes de IA.
- Uiverse – elementos de interface open source com código para copiar em HTML, CSS, Tailwind e React.
- Pagedone – mais de 4.650 componentes e seções com código HTML e Tailwind.
- Tailwind Plus – mais de 500 blocos prontos, por US$ 149 o pacote, cerca de R$ 762.
- Land-book, Godly e Minimal Gallery – sites completos, para ver a página inteira em vez de uma seção.
- Mobbin – telas e fluxos de aplicativos, com mais de 621 mil telas catalogadas.
- Component Gallery – compara o mesmo componente em 95 design systems, com notas de acessibilidade.
Para quem quer ir além da inspiração, a discussão no Hacker News sobre o 404s.design rendeu sugestões que servem para qualquer seção do site. Uma delas é usar a página de erro para listar os links mais procurados, recurso que só funciona quando o site tem busca decente. Outra é assumir a falha em vez de dizer ao visitante que ele se perdeu. Há ainda uma ideia que virou projeto: em vez de uma mensagem vazia, exibir rostos de crianças desaparecidas, como faz o notfound.org.
No fim, referência só rende quando entra num sistema. Ferramentas como o Open Design, já mostradas no blog, organizam padrões de projeto para a inteligência artificial gerar interface coerente.
Fonte: Supahero | CTA.gallery | 404s.design | Navbar Gallery | footer.design | Screensdesign | Unsection | Hacker News
