08/08/20265 min de leitura

Sua falta de criatividade é pobreza de referência: 50 sites pra estudar

Seu problema não é falta de criatividade, é pobreza de referência. 50 sites pra estudar quem executa design melhor do que a maioria.

Neste artigo

Telas reais de app e produto
Curadoria de site e direção de arte
Componente e efeito pra quem também codifica
Tipografia que não é a padrão de todo mundo
Visual generativo, pra sair do óbvio de vez
Arquivo de design gráfico e rebranding
Ferramenta com IA que já entrega quase pronto
Referência não substitui direção
Perguntas frequentes

Sua falta de criatividade é pobreza de referência: 50 sites pra estudar, ilustração sobre referências de design

Seu problema não é falta de criatividade. É pobreza de referência.

Ninguém escreve bem sem ler muito. Design funciona igual. Quem olha sempre pro mesmo lugar produz sempre a mesma coisa achando que é original. A saída não é curso, é repertório.

Separei os 50 lugares que uso pra estudar quem executa melhor do que eu e você. Não é pra copiar resultado. É pra roubar direção.

Telas reais de app e produto

Antes de desenhar qualquer coisa, veja o que já funciona em produção.

→Mobbin: milhares de telas reais de app organizadas por padrão de interface. O maior arquivo do gênero.
→Supahero: só seção hero. Quando falta ideia pra abertura de uma página, é o primeiro lugar que eu abro.
→Saaspo: landing page de SaaS que converte de verdade, não só bonita.
→GameUIDatabase: interface de videogame catalogada por gênero. Ótima pra quem quer sair do padrão SaaS.
→Interface in Game: tela de jogo organizada por tipo de elemento, HUD, menu, inventário.
→HUDs and GUIs: interface futurista de cinema e game. Referência pra quem precisa de algo com mais atitude.
→Loadmo.re: coleção só de tela de carregamento. Detalhe que ninguém presta atenção e que separa produto cuidado de produto qualquer.

Curadoria de site e direção de arte

Pra entender pra onde a execução de site tá indo, não pra imitar o último template.

→Godly: galeria de site com direção de arte forte, curadoria exigente.
→Awwwards: a premiação mais conhecida de site com execução pesada. Serve de termômetro do que é topo de mercado.
→Cosmos: moodboard visual que aprende seu gosto e refina a curadoria conforme você usa.
→Curated.design: seleção de site organizada por categoria, boa pra pesquisa direcionada.
→Design Spells: detalhe de interface catalogado um a um. Onde nasce ideia de microinteração.
→60FPS: galeria focada em interação e animação bem feita, não em print estático.
→Minimal Gallery: um site minimalista por dia. Bom antídoto pra quem exagera na composição.
→MNMM: arquivo de design minimalista, complementa o anterior.
→Seesaw: site com movimento e experimentação de verdade, sem medo de fugir do grid.
→Same Energy: busca visual por semelhança de imagem. Digita uma referência e ele acha outras parecidas.
→Spiral: feed visual em espiral pra descoberta, formato diferente de navegar referência.
→Layers: portfólio de designer que não posta em rede social. Onde o trabalho bom se esconde.
→Pinterest: o de sempre. Continua funcionando, e é bobagem descartar só porque é óbvio.

Componente e efeito pra quem também codifica

Pra quem constrói site além de desenhar, esses encurtam o caminho do conceito até o navegador.

→shadcn/ui: o padrão de componente do ecossistema hoje. Vale conhecer mesmo sem usar direto.
→21st.dev: componente React pronto no mesmo estilo do shadcn.
→React Bits: coleção de componente e efeito em React, boa pra ideia rápida.
→Fancy Components: componente com animação fora do óbvio, quando o padrão já cansou.
→Motion Primitives: primitiva de animação pronta pra React.
→Component Gallery: padrão de componente com exemplo tirado de produto real, não de mockup.
→Number Flow: número que anima em transição suave. Pequeno, mas nota-se quando falta.
→Cursify: efeito de cursor customizado, pra quando o projeto pede um toque a mais.
→Framer University: recurso e template de Framer direto da fonte.

Tipografia que não é a padrão de todo mundo

A fonte errada custa mais caro do que parece. Esses bancos fogem do óbvio.

→Fontshare: fonte profissional grátis, liberada pra uso comercial.
→Uncut: catálogo de tipografia contemporânea, boa curadoria.
→Free Faces: curadoria de tipo grátis com personalidade, sem parecer fonte de sistema.
→Fonts in Use: arquivo de tipografia usada em projeto real, mostra a fonte funcionando de verdade.
→Best Free Fonts: fonte grátis filtrada por qualidade, evita garimpo às cegas.
→BeFonts: outro banco de fonte grátis pra uso comercial, boa curadoria pra quem já está enjoado do Google Fonts.

Visual generativo, pra sair do óbvio de vez

Quando o site precisa de algo que ninguém mais tem.

→Shadertoy: shader da comunidade rodando ao vivo no navegador.
→Unicorn Studio: animação e efeito web sem escrever uma linha de código.
→Cables.gl: gráfico generativo por nó, direto no navegador.
→Nodetoy: shader por nó, exporta pronto pra three.js.
→Derivative / TouchDesigner: padrão de visual generativo e instalação em tempo real.
→Nodes.io: ambiente visual pra design computacional.
→Bitspace: editor de nó pra composição visual.

Arquivo de design gráfico e rebranding

→Search System: arquivo de design gráfico e editorial, bom pra quem trabalha impresso e digital.
→Rebrand Gallery: rebranding de marca com antes e depois, útil pra argumentar valor de mudança de identidade.

Ferramenta com IA que já entrega quase pronto

Aceleram execução. Não substituem critério.

→Stitch: gera tela de interface a partir de descrição em texto.
→Framer: site publicado direto do canvas, sem depender de dev pra colocar no ar.
→Penpot: alternativa open source ao Figma, sem custo de licença.
→Rive: animação interativa que roda em produção, não só em protótipo.
→Skills.sh: diretório de skill pronta pra plugar no seu agente de IA.
→Zed: editor de código rápido com agente de IA rodando dentro do próprio editor.
→v0: gera interface a partir de texto, direto pra código.

Referência não substitui direção

Ferramenta boa não decide o que a sua marca vai parecer. Isso é posicionamento, e posicionamento vem antes do Figma abrir. A referência só evita que você reinvente algo que o mercado já resolveu melhor.

Perguntas frequentes

Usar site de referência de design é plágio?

Não, se o uso for pra estudar padrão, direção e execução, não pra copiar resultado final. Referência informa decisão. Cópia é atalho que aparece depois como marca sem identidade própria.

Preciso ser designer pra usar essas ferramentas?

Não. Grande parte, como Framer, Penpot, v0 e Stitch, foi feita pra quem não desenha mas precisa publicar algo com qualidade.

Qual desses sites o FAMOSO usa mais no dia a dia?

Mobbin pra padrão de interface, Awwwards e Godly pra direção de arte de site, e Fonts in Use pra decisão de tipografia. O resto entra conforme o projeto pede.

Ter muita referência resolve falta de posicionamento de marca?

Não. Referência melhora execução, não substitui estratégia. Uma marca sem posicionamento claro fica bonita e continua sem converter, porque o problema nunca foi visual.

Ferramenta gratuita

Diagnóstico de marca

Responda o scorecard e receba o score da sua marca com uma leitura direta do resultado.

Fazer diagnóstico →

R$97

Agente FAMOSO.®

O processo que uso pra criar posts com tese, não conteúdo genérico. Acesso permanente.

Conhecer o agente →

Você não vende o que faz. Vende o que parece que faz.

Análise completa da sua marca mais uma call de 30 minutos. O valor vira crédito integral no projeto.

CONHECER O DIAGNÓSTICO