100 sites de design para elevar o seu repertório visual
100 sites de inspiração em design organizados em 9 cenários de trabalho — prêmios e festivais, motion design, renderização 3D, fotografia cinematográfica, UI, web, interação front-end, tipografia e cores, e coleta de referências. Cada um explica o que há no site e quando vale a pena abri-lo.
- Autor
- Eian (X @EianLu)
- Número de sites
- 100
- Capítulos
- 9
- Tema
- Design / estética / fontes de inspiração
- Indicado para
- Quem faz vídeo, UI, front-end e 3D
- Atualização
- 2026-11-15
Mapa de perguntas
0/100 lidasConteúdo9 capítulos · 100 perguntas
- 69. Codrops
- 70. CodePen Spark
- 71. Biblioteca oficial de demos do GSAP
- 72. Exemplos oficiais do Three.js
- 73. Shadertoy
- 74. The Book of Shaders
- 75. Bruno Simon
- 76. Lusion
- 77. Active Theory
- 78. Framer Gallery
- 79. Exemplos oficiais do Motion
- 80. React Bits
- 81. coss ui
- 82. Josh W. Comeau
- 83. Rauno Freiberg
- 84. Emil Kowalski
Prefácio
Quem faz vídeo, faz UI ou escreve front-end chega quase sempre à mesma conclusão: quando o nível técnico é parecido, o que separa as pessoas no fim é o repertório visual.
Hoje a IA escreve código, anima e gera imagens para você, mas decidir se o resultado ficou bom — se dá para entregar — continua sendo sua decisão. Só quem já viu muita coisa boa consegue dizer "o espaçamento entre estas letras está apertado demais" ou "aquela transição ficou dura", e assim pedir o ajuste certo para a IA ou mexer no código sem perder o rumo.
Esta lista vem do acervo pessoal de Eian depois de uma limpeza nos favoritos do navegador: 100 sites de design que ele realmente abre, divididos em 9 categorias conforme a situação de trabalho. Cada site tem uma ou duas frases explicando o que existe ali e quando vale a pena consultar; os que exigem assinatura paga para ver tudo estão marcados com (pago), e o resto é totalmente gratuito. Todos os endereços foram abertos um por um, e sites que mudaram de nome — como o Godly, que todo mundo salvava antigamente — aparecem com o endereço atualizado.
Respostas rápidas
- Comece colocando o padrão mais alto do mercado na cabeça: Awwwards, D&AD, Annecy e Tokyo TDC definem o seu teto de "o que é bom".
- Para motion e vídeo, assista a bons filmes antes de estudar software; sites de estúdios como BUCK e ManvsMachine ensinam ritmo melhor que qualquer tutorial.
- Em 3D, não fique trancado ajustando material sozinho: vá ao ArtStation e ao 80 Level ver wireframes, iluminação e breakdowns de outras pessoas.
- "Cara de cinema" não é adjetivo, é luz, distância focal e correção de cor: ShotDeck, FILMGRAB e StillsLab mostram os quadros abertos para você.
- Antes de desenhar telas, olhe produtos que estão de fato no ar, não projetos conceituais; Mobbin, Refero e o Apple HIG são referências que dá para aplicar.
- Se não entender um efeito de front-end, aperte F12: Codrops, GSAP, Three.js e Shadertoy quase sempre deixam o código na própria página.
- Tipografia e paleta de cores são o básico: Typewolf, Fontshare e Radix Colors salvam boa parte do "gosto duvidoso".
- Jogar tudo numa pasta de favoritos e nunca abrir não serve para nada: veja um site por dia, 15 minutos, e force-se a dizer em uma frase o que ele tem de bom.
Fonte: este texto foi compilado a partir de "100 sites de design para elevar o seu repertório visual", de Eian, publicado no X (@EianLu, 2026-11-13). Os direitos autorais pertencem ao autor original; o link original é a referência.
1. Concursos e prêmios: primeiro, veja como é o topo
Quando você está começando ou travado num projeto, o caminho mais direto é olhar os premiados do ano. Coloque o padrão mais alto do mercado na cabeça e, ao voltar para o seu próprio trabalho, os problemas saltam aos olhos.
1. Desafio de renderização 3D Pwnisher#
🔗 https://www.youtube.com/@pwnisher
Competição global de renderização 3D organizada pelo youtuber Clinton Jones (conhecido como Pwnisher). O formato é muito direto: ele entrega um modelo base com trajetória de câmera e movimento de personagem fixos, milhares de participantes no mundo inteiro criam em cima dessa base e no fim tudo é montado num único vídeo longo. Em 2026 chegou à 13ª edição. Como a base de todos é idêntica, dá para comparar lado a lado quem iluminou melhor e quem teve a ideia mais ousada.
2. Awwwards#
Prêmio impossível de ignorar para quem faz web e front-end. Todo dia escolhe o "site do dia", com jurados pontuando design, usabilidade, criatividade e conteúdo, e no fim do ano ainda elege os grandes vencedores. Ótimo para passar cinco minutos antes de começar o trabalho e ver que novidades a web design inventou.
3. CSS Design Awards#
🔗 https://www.cssdesignawards.com/
Outro grande prêmio de web design, no mesmo nível do Awwwards, que também destaca um site por dia e pontua UI, UX e inovação. O gosto dos jurados é diferente do Awwwards, e os escolhidos dos dois raramente coincidem — vale alternar entre eles.
4. The FWA#
Prêmio de design digital tradicional, no ar desde 2000, que também publica um projeto premiado por dia. Em vez de layouts comerciais bem comportados, o FWA prefere trabalhos técnicos que exploram interação, WebGL e som.
5. The Motion Awards#
Prêmio dedicado a motion design organizado pelo próprio Motionographer. Aberturas, publicidade, branding e documentário são avaliados separadamente, e nos últimos anos ganhou uma categoria de IA. O melhor é que a página dos premiados já embute o filme final, sem precisar sair procurando: a abertura de "Shogun" está lá, e em uma tarde você passa pelo melhor do motion do ano inteiro.
6. Apple Design Awards#
🔗 https://developer.apple.com/design/awards/
Prêmio entregue pela Apple todo ano na WWDC. Os apps e jogos que entram na lista são praticamente aula de estética "apple", sensação de interação e uso dos recursos do hardware. A Apple ainda escreve um comentário para cada app premiado explicando por que o escolheu — leitura obrigatória para quem faz mobile.
7. D&AD#
Grande prêmio britânico de design e publicidade; como o troféu tem forma de lápis, o mercado brasileiro costuma chamá-lo de "premiação do lápis amarelo". O nível máximo, o "lápis preto", é extremamente rigoroso: em alguns anos prefere não premiar ninguém, e o que ganha entra para a história do design. Quem trabalha com marca, publicidade e gráfico deve vasculhar o arquivo histórico.
8. The One Show & ADC#
Dois prêmios de topo organizados pelo The One Club, nos Estados Unidos. O One Show valoriza a ideia criativa por trás do filme publicitário, enquanto o ADC (Art Directors Club de Nova York), criado em 1921, valoriza expressão visual, tipografia e acabamento.
9. Runway AI Film Festival#
Festival de cinema com IA promovido pela Runway, ferramenta de vídeo com IA. Em 2026 chega à 4ª edição, com exibições presenciais em Nova York, Los Angeles e Tóquio. Além de curtas, tem categorias de design, novas mídias, moda e publicidade. A Screening Room do site mostra os premiados de edições anteriores; para saber onde está o teto do vídeo com IA hoje, é o lugar mais direto.
10. Tokyo TDC#
🔗 https://tokyotypedirectorsclub.org/
Prêmio anual do Tokyo Type Directors Club. Apesar do "type" no nome, é a bússola de todo o design visual asiático. O olhar dos jurados é exigente, e os cartazes, livros e trabalhos de motion premiados costumam ser bem experimentais. Se você já cansou dos layouts comerciais previsíveis, aqui é ótimo para lavar os olhos.
11. Annecy — Festival Internacional de Animação#
🔗 https://www.annecyfestival.com/
Festival francês de animação criado em 1960, o templo máximo para quem anima. Além de longas e curtas independentes, tem uma categoria dedicada a encomendas comerciais (publicidade, videoclipes, aberturas), onde dá para ver o melhor repertório visual e narrativa em movimento do mundo.
12. Ciclope Festival#
🔗 https://www.ciclopefestival.com/
Festival de cinema publicitário que premia por "função". Enquanto a maioria olha o conjunto criativo, ele separa o filme em partes: direção, fotografia, correção de cor, montagem, animação 3D, efeitos visuais e trilha, cada uma com seu prêmio. Para quem faz vídeo e quer estudar só "cor" ou "ritmo de montagem", é o prêmio certo.
2. Motion design e vídeo
Em motion e vídeo, ficar só assistindo tutorial de software faz você se perder nos parâmetros. Assista primeiro a muitos filmes bons, entenda o que é ritmo e transição bem feitos, e só depois volte aos tutoriais para aprender a fazer — rende muito mais.
13. Motionographer#
Site tradicional do meio do motion design, no ar há quase vinte anos. Os editores têm olho afiado e não publicam texto de encher linguiça: quando atualizam, é quase sempre trabalho bom para rever várias vezes, muitas vezes acompanhado de notas de produção escritas pelo próprio estúdio.
14. STASH#
Biblioteca de filmes online assinada por muitos estúdios de animação e VFX (pago). Organiza milhares de comerciais, videoclipes e pacotes de canal por estilo e técnica, e o maior valor está nos bastidores (making-of) e breakdowns técnicos que acompanham muitos filmes.
15. Art of the Title#
🔗 https://www.artofthetitle.com/
Site dedicado a estudar a "abertura" de filmes, séries e jogos. Não só publica os vídeos em alta qualidade: o esforço maior está nas longas entrevistas com os criadores, que trazem diretor e designer para mostrar esboços iniciais, versões descartadas e storyboards, explicando passo a passo como dois minutos de abertura foram construídos.
16. Vimeo Staff Picks#
🔗 https://vimeo.com/channels/staffpicks
Canal de curtas selecionados manualmente todos os dias pela equipe do Vimeo. No meio do vídeo, ter um selo Staff Pick no próprio trabalho é motivo de orgulho para a vida inteira. Seja documentário, animação experimental ou ficção, o nível é muito consistente.
17. Behance — seção de motion design#
🔗 https://www.behance.net/galleries/motion
Todo mundo já navega pelo Behance, mas a categoria Motion é especialmente boa para aprender fluxo de trabalho. Muitos estúdios publicam o projeto completo: moodboard, styleframes, animatic e o filme final juntos, o que equivale a abrir todo o processo de entrega para você.
18. Short of the Week#
🔗 https://www.shortoftheweek.com/
Site que recomenda curtas independentes do mundo inteiro, tanto live-action quanto animação. Cada filme vem com uma crítica séria escrita pela equipe, que mostra como o diretor construiu personagens e contou uma boa história em quinze minutos.
19. Directors Notes#
Blog de entrevistas com diretores independentes. Cada conversa gira em torno de um curta, com perguntas bem práticas: como arrumaram o dinheiro, que câmera e lentes usaram no set, que problema apareceu na pós. Quem pega filme e dirige no dia a dia se identifica bastante.
20. Sakugabooru#
🔗 https://www.sakugabooru.com/
Biblioteca de trechos de "sakuga" mantida por fãs de animação, com mais de 320 mil clipes extraídos de animes. Cada um vem etiquetado: qual animador desenhou, de que obra saiu, se é efeito de explosão ou atuação de personagem. Para estudar o ritmo e a elasticidade de um movimento, basta buscar pela tag e puxar centenas de clipes para ver quadro a quadro — útil tanto para quem anima quanto para quem gera movimento com IA.
21. Promonews#
Seleciona diariamente alguns videoclipes e comerciais recém-lançados, quase sempre com notas do diretor: que câmera usaram, por que aquele tratamento de cor, como determinado plano foi feito. O videoclipe é onde estilo de imagem, cor e ritmo de montagem são mais livres; para achar referência visual, passar aqui é muito mais eficiente do que garimpar em plataformas de vídeo.
Os cinco a seguir não são agregadores, e sim os sites dos cinco estúdios mais respeitados do mercado. Baixe os filmes do portfólio, abra no player e vá avançando quadro a quadro com as setas do teclado — funciona melhor do que qualquer curso avançado:
22. BUCK#
Um dos maiores e mais famosos estúdios de motion design do mundo, presença constante em trabalhos para Apple, Nike e Meta. Domina 2D, 3D e live-action, e o portfólio é grande como um museu.
23. ManvsMachine#
Estúdio criativo de ponta em Londres, especializado em colisões de materiais 3D e publicidade de produto de alto nível; a qualidade de luz e textura das imagens chega a impressionar.
24. Oddfellows#
Estúdio americano com foco em ilustração e animação 2D de personagem, paletas extremamente agradáveis e encadeamento de planos e inércia de movimento suaves como manteiga.
25. Golden Wolf#
Estúdio de animação de Londres com estilo fácil de reconhecer: cores saturadas em choque, distorções de perspectiva exageradas e montagem aceleradíssima, tudo com uma energia de cartoon de rua.
26. Ordinary Folk#
🔗 https://www.ordinaryfolk.co/
Time de Vancouver que faz maravilhas com formas geométricas 2D básicas; o controle da elasticidade e do ritmo das curvas de movimento é impecável.
3. 3D e renderização
O maior risco em 3D é se trancar ajustando materiais sozinho. Vá às comunidades ver wireframes e esquemas de luz de trabalhos maduros: muitos problemas que travam você já têm solução pronta feita por outra pessoa.
27. ArtStation#
Lugar que quem trabalha com CG e arte de jogos abre todo dia. Concept artists, modeladores e lighter de grandes estúdios de games e de VFX do mundo inteiro se reúnem ali; buscando qualquer estilo de concept ou asset 3D você encontra referência de altíssimo nível.
28. The Rookies#
Comunidade de competição anual para estudantes e recém-chegados ao mercado, com categorias de animação 3D, desenvolvimento de jogos, VFX e concept design. Quem está aprendendo software ou procurando emprego pode dar uma olhada para ver como estão os portfólios de quem se forma agora.
29. 80 Level#
Mídia dedicada a arte de jogos e técnicas 3D. O melhor são os artigos de breakdown: convidam o autor original para desmontar uma cena 3D complexa, do software usado para o blockout até como sujar o material no Substance e como posicionar as luzes na engine, com detalhe de manual.
30. Sketchfab#
Plataforma para girar modelos 3D em 360 graus direto no navegador. Ao encontrar um modelo bem feito, basta abrir as configurações do visualizador no canto inferior direito e alternar para clay, wireframe, normal map ou canal de roughness — dá para ver exatamente como a malha foi construída e como as UVs foram abertas.
31. befores & afters#
🔗 https://beforesandafters.com/
Revista online dedicada aos bastidores dos efeitos visuais de Hollywood. Os artigos adoram comparativos de antes e depois: à esquerda o ator de motion capture diante do chroma key, à direita a explosão finalizada, com entrevista do supervisor de VFX explicando como a cena foi filmada e composta.
32. fxguide#
A mídia técnica de VFX mais antiga do meio. Os textos são bem densos e sem fofoca: mergulham nos algoritmos dos renderizadores, no pipeline de LED stage da produção virtual e na simulação de fluidos. Ideal para quem quer ir fundo em technical art (TA) ou VFX.
33. Blender Studio#
O estúdio de animação open source oficial do Blender (pago). Todo ano a equipe produz um curta de alta qualidade com o Blender para testar os limites do software; assinando, você não só vê tutoriais como baixa os rigs de personagem e arquivos de iluminação usados nos filmes para abrir e estudar no seu computador.
34. Poly Haven#
Site de recursos indispensável para renderização 3D. Os HDRI de iluminação em alta resolução, materiais PBR e modelos escaneados são todos CC0 — ou seja, totalmente gratuitos, sem cadastro para baixar, e sem necessidade de crédito mesmo em trabalhos comerciais.
35. Beeple Everydays#
🔗 https://beeple-crap.com/everydays
Desde 1º de maio de 2007, o artista digital Beeple se obrigou a fazer uma imagem por dia e publicar na internet: casamento, doença, Ano-Novo, nada interrompeu, e ele seguiu assim por quase vinte anos. Se você voltar às primeiras imagens, vai ver que eram bem toscas; mas folheando página por página dá para acompanhar como uma pessoa comum se tornou referência só por entregar tarefa todo dia.
4. Imagem cinematográfica e referências de plano
Ao gravar vídeo ou fazer correção de cor, o cliente costuma falar em "cara de cinema", uma expressão bem vaga. Em vez de adivinhar, recorte imagens de filmes e veja como um diretor de fotografia profissional ilumina, fecha as sombras e escolhe a distância focal.
36. ShotDeck#
Biblioteca profissional de frames de cinema criada por Lawrence Sher, diretor de fotografia de "Coringa" e "Se Beber, Não Case" (pago). O acervo é enorme e cada imagem tem tags detalhadas ao extremo: dá para filtrar "golden hour + contraluz + grande angular + tom frio + interior de carro" e em um segundo puxar dezenas de frames que atendem exatamente ao pedido para usar como referência de storyboard.
37. FILMGRAB#
Site de frames de cinema totalmente gratuito, com milhares de filmes clássicos. A organização é simples: um filme por página, com cinquenta ou sessenta frames em alta resolução retirados do próprio filme, alinhados. Para estudar a luz e o enquadramento de um diretor, basta abrir a página e rolar do começo ao fim.
38. StillsLab#
Biblioteca gratuita de frames de cinema, séries, videoclipes e publicidade; sem pagar você vê o acervo inteiro. As tags são detalhadas: dá para filtrar por plano, ângulo de câmera, luz, cor, dia ou noite e até pela câmera e lente usadas, ou simplesmente descrever a imagem em linguagem comum. Cada filme ainda traz estatísticas, como "Blade Runner 2049" com 69% de cenas noturnas e 52% de luz suave, o que facilita estudar a fórmula visual de uma obra.
39. Flim#
Biblioteca de frames com busca semântica por IA, que além de filmes reúne muitos videoclipes e comerciais. O melhor é não precisar lembrar o título: basta escrever uma frase comum na busca (como "uma pessoa no fim do corredor em contraluz" ou "vista de cima de comida na mesa") e ele encontra planos semelhantes em vários filmes.
40. EyeCannndy#
Site que transforma "linguagem de câmera e técnicas de montagem" num dicionário de GIFs. É normal ver uma transição ou movimento bonito e não saber o nome; ali estão listadas dezenas de técnicas comuns, como match cut, dolly zoom à la Hitchcock, whip pan e ponto de vista em primeira pessoa. Ao abrir um verbete, você vê cinco ou seis exemplos em GIF de comerciais e videoclipes diferentes.
41. Guia de linguagem de câmera do StudioBinder#
🔗 https://www.studiobinder.com/blog/ultimate-guide-to-camera-shots/
Série de tutoriais escrita por uma empresa de software de produção, explicando um a um os tipos de plano, ângulos de câmera e movimentos (dolly, pan, whip pan, orbital), cada um com exemplos de filmes. O nível estético é mediano, mas é sistemático e fácil de consultar. Ao gerar vídeo com IA, escrever "low angle", "dolly in" ou "whip pan" no prompt funciona muito melhor do que "deixa mais sofisticado" — e todos esses termos estão ali.
42. American Cinematographer#
Revista da American Society of Cinematographers (ASC), publicada há mais de cem anos. A maioria dos artigos é o próprio diretor de fotografia falando de um filme: por que escolheu aquele conjunto de lentes, que câmera usou, de onde vinha a luz principal, como definiu a correção de cor. A biblioteca de frames mostra como a imagem é; aqui você entende por que foi filmada assim. Muitos textos podem ser lidos na íntegra de graça no site.
5. Design de UI
Antes de desenhar telas, vale abrir produtos reais já no ar em vez de circular só por comunidades de design conceitual. Produtos reais ajudam a organizar a lógica básica de estados de erro e hierarquia de botões; projetos conceituais podem ser bonitos, mas muitos não saem do papel, e usá-los como entrada para IA só deixa o resultado com mais "cara de IA".
43. Mobbin#
A melhor biblioteca de capturas de apps reais disponível hoje (paga, com parte liberada na conta gratuita). A equipe capturou de ponta a ponta muitos apps populares de iOS, Android e web, somando mais de 600 mil telas. Quando precisar desenhar uma "página de assinatura" ou um "aviso de estado vazio", basta filtrar pela tag da função e comparar lado a lado o que Airbnb, Spotify e Notion fizeram.
44. Page Flows#
No Mobbin você vê capturas estáticas; aqui ficam gravações de tela de produtos reais (pago). Do momento em que o novo usuário abre a landing page, cria a conta e cadastra o cartão até como encontrar a opção de cancelar a assinatura, tudo é gravado com o cursor e as transições de página, o que economiza muito tempo ao mapear fluxos de interação.
45. Refero#
Biblioteca de capturas focada em web e iOS (paga). As tags de componentes e tipos de página são bem granulares: se quiser ver só como outras pessoas desenham "filtro de tabela", "breadcrumb" ou "tabela comparativa de preços", a busca é precisa. Tem ainda um site irmão gratuito, styles.refero.design, que organiza cor, tipografia e espaçamento de mais de dois mil sites reais em arquivos DESIGN.md que a IA consegue ler direto, sem login.
46. Nicelydone#
Galeria dedicada a interfaces de aplicações web e SaaS internacionais (paga). Quem trabalha com produtos B2B, backoffice ou software de gestão costuma não aproveitar muito apps de consumo; aqui é o lugar certo para referência de layout de formulários complexos e dashboards de dados.
47. SaaSFrame#
Também é uma biblioteca de interfaces focada em produtos SaaS (paga), com sites de marketing, páginas de login e cadastro, modais de funcionalidade e telas de configuração bem organizados. Muito útil para desenvolvedores independentes e designers de B2B.
48. Figma Community#
🔗 https://www.figma.com/community
A comunidade open source que vem com o Figma. Ver capturas dos outros mostra só a superfície; aqui, ao encontrar um bom design system, uma biblioteca de componentes de grande empresa ou um template bem diagramado, basta clicar em "Open in Figma" no canto superior direito e o arquivo original vai direto para os seus rascunhos. Abrindo o painel de camadas, dá para ver na hora como a pessoa usou Auto Layout e como nomeou as variáveis de cor.
49. Human Interface Guidelines (HIG) da Apple#
🔗 https://developer.apple.com/design/human-interface-guidelines/
Documentação oficial da Apple para designers e desenvolvedores. Para dúvidas básicas como "quantos ícones cabem na barra inferior", "qual o tamanho mínimo da área de toque" ou "quando usar um alerta", não precisa perguntar em fórum: consulte esta documentação, que explica o motivo de cada regra com clareza.
50. Material Design 3#
Documentação do design system do Google. Mesmo que você não faça apps nativos Android, vale ler inteiro. Ele expõe sem reservas como um grande design system define escalas de cor, calcula hierarquia de tamanhos de texto, trata contraste no modo escuro e define estados de hover e pressed dos componentes.
51. Vercel Web Interface Guidelines#
🔗 https://vercel.com/design/guidelines
Uma lista de detalhes de interface organizada pela Vercel, dividida em interação, animação, layout, texto, formulários e performance. Cada item é uma regra prática que dá para conferir diretamente, como "o campo de texto no celular não pode ter fonte menor que 16px, senão o iOS dá zoom ao tocar" ou "não seja preguiçoso e escreva transition: all na animação". É perfeita para quem escreve código com IA: há uma seção ensinando a integrar a IA, com AGENTS.md e uma skill de revisão prontos, para a IA revisar a interface item por item depois de terminar.
52. Impeccable#
Uma skill de design feita para combater a "cara de IA". Ela lista os 62 padrões que a IA mais usa: a "paleta de IA" bege, títulos grandes em serifada itálica, uma barrinha colorida à esquerda dos avisos, card dentro de card, subtítulos numerados como "01 Discover"... Instalada no Claude Code, no Cursor ou no Codex, permite pedir que a IA refine a tipografia, ajuste o layout e critique o seu próprio design. Mesmo sem instalar, ler a lista uma vez já faz você perceber por que muitas páginas parecem baratas.
53. The Component Gallery#
Site que coloca os "componentes básicos" de grandes empresas lado a lado. Se quiser estudar um simples "toggle" ou "banner de alerta", ao abrir o item ele reúne numa só página as capturas e links de documentação do componente em dezenas de design systems — Apple, Google, Microsoft, Shopify, GitHub e outros. Excelente para conferir o que falta ao escrever especificações de componente.
54. 60fps#
Site dedicado a "animações de UI suaves". Só tem trechos de interação de apps reais gravados em alta taxa de quadros, sem enrolação: ao abrir, a tela toda é preenchida com expansão de card, pull to refresh e transições de página com ótima sensação de resposta.
55. Spotted in Prod#
🔗 https://www.spottedinprod.com/
Captura pequenos detalhes "que chamam atenção" em apps iOS já publicados no exterior. São vídeos curtos de poucos segundos da operação real, como a vibração sutil de um botão transformada em feedback visual ou um easter egg escondido na tela de configurações. Ótimo para buscar inspiração em detalhes.
56. Growth.Design#
Site de dois product designers que desmonta a experiência real de apps conhecidos em formato de história em quadrinhos. Eles percorrem o onboarding do Duolingo como um usuário comum, ou fazem uma reserva no Airbnb, e desenham página por página: por que aquele texto faz a pessoa se sentir segura para pagar, por que o modal seguinte espanta o usuário. Divertido e cheio de conteúdo útil.
57. Laws of UX#
Condensa as leis da psicologia que costumam ser citadas em design de interação (Lei de Fitts, Lei de Hick, Lei de Miller, pico-fim) em vinte e poucas fichas limpas com texto e imagem. Cada uma explica em três frases o que a lei significa, quem a propôs e o que observar no design de interface concreto. Ótimo para embasar uma proposta de redesign rapidamente.
58. Game UI Database#
🔗 https://www.gameuidatabase.com/
Biblioteca de capturas de interface de jogos com escala impressionante: quase 2.000 títulos de console e PC e mais de 70 mil imagens em alta resolução. O melhor é a classificação por função de UI: dá para buscar "criação de personagem", "inventário", "árvore de habilidades", "modal de missão" ou "tela de game over" em todos os jogos. Mesmo sem trabalhar com games, ver como designers organizam a hierarquia visual com uma quantidade enorme de informação já ensina muito.
6. Inspiração para web
Ao pegar um novo projeto de site, o pior erro é abrir o software e começar a desenhar sobre o fundo branco. Gaste quinze minutos vendo dezenas de páginas parecidas nos sites abaixo, defina três ou quatro direções de layout confiáveis e só então comece — isso economiza boa parte do retrabalho.
59. Recent (antigo Godly)#
O Godly (godly.website) era favorito de quase todo web designer; hoje, ao digitar o endereço antigo, você é redirecionado para este novo site, o Recent. Ele mantém a experiência de ver gravações de rolagem em alta qualidade direto na miniatura, sem entrar no site original, e ampliou o escopo para filmes de produto, ícones de app, identidade visual e cartazes. Para saber que direção visual está em alta entre desenvolvedores independentes e empresas de tecnologia no exterior, é só abrir.
60. Siteinspire#
🔗 https://www.siteinspire.com/
Biblioteca tradicional de inspiração web, no ar há uns dez anos, com milhares de sites. Os filtros são muito bons: dá para combinar "estilo visual" (grid, minimalista, tipografia grande), "tipo de site" (portfólio, e-commerce) e "setor" (arquitetura, moda). A curadoria é contida, raramente entra site de exibicionismo visual; é quase toda diagramação que envelhece bem.
61. Land-book#
Galeria dedicada a landing pages. Além das home pages de produto, tem coleções separadas de páginas de preço, sobre nós e currículo pessoal — muito prático para sites comerciais comuns.
62. Landingfolio#
🔗 https://www.landingfolio.com/
Também é uma galeria de landing pages, mas vai um passo além: divide a página em blocos como hero, apresentação de funcionalidades, depoimentos, botão de ação e rodapé, somando mais de 4.600, que podem ser copiados em Tailwind, Figma ou Webflow (parte paga). É muito prático para alimentar a IA: escolher um bloco que você gosta e entregar a ela é bem mais preciso do que descrever "faz um hero bonito para mim".
63. awesome-design-md#
🔗 https://github.com/VoltAgent/awesome-design-md
Coletânea open source no GitHub que organiza cor, tipografia, espaçamento e estilo de componentes de sites reconhecidamente bonitos, como Stripe, Linear, Vercel e Apple, em um arquivo DESIGN.md. Coloque no seu projeto e a IA gera a interface seguindo as regras daquela marca — bem mais confiável do que você tentar descrever "quero algo com a vibe do Linear".
64. One Page Love#
Site que reúne "sites de uma página só". Alguns produtos pequenos, eventos presenciais ou páginas pessoais não sustentam uma navegação com vários canais; aqui você vê como outras pessoas contam tudo com clareza e ritmo no espaço de uma rolagem do topo ao fim.
65. Minimal Gallery#
Galeria só de sites minimalistas. Se você sente que suas páginas ficam cheias e sufocantes, veja alguns sites aqui e aprenda como outras pessoas sustentam a página apenas com preto, branco e cinza, muito espaço em branco e contraste limpo de tamanhos de texto.
66. Dark Mode Design#
🔗 https://www.darkmodedesign.com/
Galeria que só aceita páginas em modo escuro. Muita gente erra ao fazer fundo preto: ou fica tudo escuro demais e não se distingue a hierarquia, ou exageram no brilho e o resultado parece barato. Veja casos maduros aqui para entender como preto puro e cinza escuro criam camadas de card e até que ponto reduzir a opacidade de texto e bordas finas para não incomodar a vista.
67. Hoverstat.es#
Lugar dedicado a "sites estranhos". Dificilmente aparece aqui o site institucional de uma empresa séria: são páginas de artistas independentes, estúdios de design vanguardistas, bandas underground ou arquitetos experimentais. Menu escondido em lugares improváveis, elementos voando pela tela ao passar o mouse — quando você achar que todo site está igual e cansar do padrão, dar uma volta aqui distrai bastante.
68. Web Design Museum#
🔗 https://www.webdesignmuseum.org/
Um verdadeiro "museu histórico do web design". O curador guardou capturas de milhares de sites antigos, de 1991 a 2006: dá para ver como era o site da Apple em 1997, quão denso era o portal do Yahoo na virada do milênio, e os botões skeumórficos e sites em Flash que fizeram sucesso na época. Além da nostalgia, quem gosta da estética retrô Y2K encontra aqui a fonte primária mais autêntica.
7. Front-end e interação
Para quem escreve front-end, ver um efeito de interação impressionante e só dizer "que demais" não resolve nada: o mérito é abrir o F12 e descobrir se aquilo foi feito em CSS ou WebGL. A maioria dos sites abaixo deixa o código aberto para você.
69. Codrops#
🔗 https://tympanus.net/codrops/
Território obrigatório para quem faz front-end criativo. Publica o ano inteiro tutoriais de efeitos que ganham prêmio no Awwwards: distorção de imagem em WebGL, transições suaves de página sem recarregar, grades de texto que se deformam com a rolagem. O melhor é que cada artigo explica o raciocínio passo a passo e ainda inclui demo online e repositório no GitHub.
70. CodePen Spark#
Coletânea de código criativo organizada semanalmente pela equipe do CodePen. São brinquedos feitos por gente do mundo inteiro com algumas centenas de linhas de CSS, SVG ou Canvas. Ao gostar de um efeito, você abre e tem o código HTML/CSS/JS à esquerda; mudar dois números faz a prévia à direita reagir na hora. Perfeito para praticar.
71. Biblioteca oficial de demos do GSAP#
Biblioteca oficial de exemplos do GSAP (GreenSock), o veterano da animação web: mais de cem efeitos classificados por rolagem, texto, hover, seguir o mouse e carrossel, cada um com código no CodePen. Antigamente muitos plugins avançados do GSAP (como ScrollTrigger para vincular à rolagem e SplitText para animar letras) eram pagos; depois da aquisição pela Webflow, todos os plugins comerciais foram liberados gratuitamente. Se gostar de um efeito, é só mandar o código para a IA ajustar.
72. Exemplos oficiais do Three.js#
🔗 https://threejs.org/examples/
Para fazer 3D no navegador, é quase impossível fugir do Three.js. Nem perca tempo procurando tutorial alternativo: abra os centenas de demos oficiais um por um — de carregar um modelo com animação de esqueleto até reflexo na superfície do mar, colisão física e passe de bloom na pós-produção. Todos têm um botão "source" no canto inferior direito, e o código é a escrita oficial mais canônica possível.
73. Shadertoy#
Onde os mestres da computação gráfica mostram técnica. Todas as imagens impressionantes do site — nuvens volumétricas em movimento, refração realista na água ou uma cidade 3D cheia de neon — não usam imagem externa nem modelo 3D: são calculadas em tempo real na GPU com algumas centenas de linhas de matemática (código GLSL). O código fica à direita da página; pode assustar com tanta trigonometria, mas quem quer fazer fundo fluido ou estudar gráficos não consegue evitar.
74. The Book of Shaders#
🔗 https://thebookofshaders.com/
Se você abriu o Shadertoy e sentiu que estava lendo grego, comece por este tutorial interativo gratuito (com versão em português). O autor destrincha o fragment shader: de como desenhar uma linha e um círculo com uma fórmula matemática até gerar texturas de ruído, com cada trecho de código editável no próprio texto para ver o padrão mudar. É considerado o melhor livro de introdução a shaders.
75. Bruno Simon#
Página pessoal do desenvolvedor francês Bruno Simon. O currículo dos outros é um PDF; o dele é um carrinho de brinquedo que você dirige pelo navegador num mapa 3D, derrubando placas para ver sua trajetória profissional e seus projetos. O curso "Three.js Journey", que ele escreveu, também é um dos que explicam Web 3D com mais profundidade hoje.
76. Lusion#
Estúdio britânico especializado em desenvolvimento criativo sob medida. O próprio site é um dos tetos da interação WebGL atual: do carregamento ao amortecimento da roda do mouse, das transições de partículas 3D à sincronia com o som, não há um quadro travado ou supérfluo. Vale abrir e observar com calma.
77. Active Theory#
Estúdio de interação digital de ponta nos Estados Unidos. As experiências online de várias edições do Google I/O e as páginas interativas do Spotify Wrapped de alguns anos atrás estão entre os projetos de marketing tecnológico que viralizaram — e muitos deles foram codificados por eles.
78. Framer Gallery#
🔗 https://www.framer.com/gallery/
Seleção oficial do Framer com sites excelentes. A interface do Framer é quase idêntica à do Figma, mas ao terminar basta publicar e o site já é responsivo com código real. Passando por esta galeria, você entende até onde um designer que não programa consegue levar a animação de um site só arrastando elementos e usando componentes prontos.
79. Exemplos oficiais do Motion#
Página oficial de exemplos da Motion (antiga Framer Motion), a biblioteca de animação mais usada hoje em React e Vue. Vai do básico de mola física e entrada/saída/reordenação de listas até animações complexas vinculadas à rolagem; os efeitos de UI mais comuns têm exemplos curtos prontos (parte paga): todos podem ser vistos em demonstração, mais de cem da categoria básica têm código gratuito para copiar e adaptar, e o restante exige assinatura Motion+ para ver o código.
80. React Bits#
Uma lojinha totalmente gratuita e open source de componentes de animação para React. Tudo já vem encapsulado: texto que aparece com efeito de embaralhamento, botão com atração magnética do mouse, borda de card com brilho deslizante, fundo fluido animado. Ajuste velocidade e cor à esquerda, copie o código à direita e cole no seu projeto: em cinco minutos a página sem graça ganha vida.
81. coss ui#
O design system da Cal.com, ferramenta open source de agenda, que antes se chamava Origin UI e era salvo por muita gente. Escrito em Tailwind, tem mais de cinquenta componentes básicos e mais de quinhentos blocos prontos, sob licença MIT, uso livre. O estilo é contido: parece um produto real bem acabado, não mais um site de startup de IA com "fundo escuro + borda brilhante + feixe de luz".
82. Josh W. Comeau#
🔗 https://www.joshwcomeau.com/
Blog do desenvolvedor front-end Josh Comeau. Ele fala de layout CSS, animação com mola e caminhos SVG, mas em vez de colar código seco enche os artigos de diagramas interativos que você arrasta e ajusta: mexa no controle e entenda por que aquela curva parece mais agradável. Os artigos são gratuitos, os cursos avançados são pagos. Entendendo o princípio, você sabe o que pedir quando a IA for escrever a animação.
83. Rauno Freiberg#
Site pessoal de Rauno, hoje design engineer na Vercel. Recomendo fortemente ler do começo ao fim o artigo "Invisible Details of Interaction Design" (os detalhes invisíveis do design de interação). Com mais de dez pequenos componentes interativos que você pode tocar, ele explica com clareza por que a rolagem do sistema da Apple para de forma tão natural ou como um menu suspenso evita toque acidental conforme a inclinação do movimento do mouse — detalhes de engenharia que ficam debaixo da superfície.
84. Emil Kowalski#
Autor do Sonner, componente de toast open source usado por muita gente no front-end, e do Vaul, de drawer; antes trabalhou como design engineer na Linear. Os textos do blog são curtos, mas todos atacam uma questão: como fazer a animação de interface parecer "contida e responsiva". Por exemplo, quantos milissegundos um modal deve usar, e em que situação nunca se deve animar. Depois de ler, você perde vários vícios de animar tudo.
8. Tipografia e paletas de cor
Seja legendando um vídeo ou desenhando uma interface e escrevendo uma página, tipografia e cor são sempre o ponto onde o básico aparece mais fácil. Quando um trabalho parece "brega" ou "bagunçado", em nove de dez casos esses dois itens não estão bem resolvidos.
85. Typewolf#
O guia de tipografia mais confiável do meio editorial internacional. O autor é um designer extremamente exigente com tipos; antes recomendava diariamente um site real com tipografia muito bem usada, indicando as fontes do título e do corpo de texto (parou de atualizar no fim de 2025, mas os casos e listas acumulados continuam disponíveis). As listas de "dez melhores sem serifa" e "melhores combinações do Google Fonts" têm valor altíssimo: na dúvida sobre que fonte usar em páginas em inglês ou mistas, consultar as listas dele nunca decepciona.
86. Fonts In Use#
Um "arquivo de tipografia na prática" mantido coletivamente por designers do mundo inteiro. Não vende fontes: reúne cartazes, capas de livro, encartes de disco, placas de rua e capturas de sites do mundo real, e depois, como um perito, identifica e etiqueta cada fonte usada. Para saber que personalidade uma fonte tem impressa no papel ou diagramada na web, basta buscar um caso real ali.
87. Google Fonts#
O velho conhecido de todos: biblioteca open source totalmente gratuita para uso comercial. Além da enormidade de fontes latinas, dá para baixar direto fontes chinesas muito usadas, como Noto Sans SC, Noto Serif SC e LXGW WenKai (versão tradicional); no front-end, nem precisa baixar o pacote — uma linha de link e funciona.
88. Fontshare#
Site de fontes gratuitas mantido pela ITF, grande fundição indiana. Tem menos fontes que o Google Fonts, mas todas são de altíssima qualidade, e a promessa é de 100% gratuito para uso pessoal e comercial. Fontes como a geométrica sem serifa Satoshi, a display Clash Display e a General Sans, muito vistas nos últimos anos em sites independentes e no meio tech internacional, saíram daqui de graça.
89. Butterick's Practical Typography#
🔗 https://practicaltypography.com/
Um pequeno livro online gratuito sobre tipografia, escrito de forma direta e agradável. O autor já programou e foi tipógrafo profissional; não há teoria artística misteriosa, e logo no capítulo "domine o essencial da tipografia em 10 minutos" ele dá números concretos: quantos caracteres por linha no corpo de texto é mais confortável, qual múltiplo usar no entrelinha, por que nunca se deve alargar o espaçamento entre letras sem critério. Mesmo lendo só esse primeiro capítulo, seus documentos e páginas já ficam bem melhores.
90. Utopia#
Muita gente iniciante define 32px para o título grande, 22px para o subtítulo e 14px para o corpo, tudo no chute, e a página fica sem ordem. Esta ferramenta define os tamanhos por "proporção matemática": informe o tamanho do corpo no celular e no desktop, escolha uma escala (por exemplo, terça maior, 1.250), e ela calcula um conjunto de variáveis de tamanho que escala suavemente com a largura da tela, incluindo espaçamentos. Gratuito, sem cadastro, o CSS gerado pode ser copiado e usado, ou entregue à IA como norma de diagramação.
91. Coolors#
A ferramenta de paleta mais fácil de usar. Abra o site sem configurar nada e aperte a barra de espaço: uma paleta de cinco cores aparece aleatoriamente. Gostou de uma cor? Clique no cadeado para travá-la e continue apertando espaço; o algoritmo passa a montar as outras em torno dela. Simula daltonismo com um clique e exporta a paleta como imagem ou código.
92. Realtime Colors#
🔗 https://www.realtimecolors.com/
Você tem um monte de paletas bonitas salvas, mas na hora de desenhar a página não sabe qual cor vai no fundo, qual no botão e qual no texto. Esta ferramenta resolve isso: na barra inferior você escolhe (ou sorteia) cor de texto, fundo, primária, secundária e de destaque, e a landing page padrão e os gráficos de dashboard acima mudam em tempo real; um clique no ícone de sol/lua mostra se a paleta funciona no modo escuro. Depois é só exportar a configuração do Tailwind, variáveis CSS ou sincronizar no Figma com o plugin homônimo.
93. Radix Colors#
🔗 https://www.radix-ui.com/colors
Conjunto de cores de interface que acompanha a biblioteca de componentes open source Radix. Não são só paletas bonitas: cada cor é dividida em 12 níveis com função definida — quais servem de fundo, quais para hover de botão, quais para bordas, quais para texto — e o modo escuro já vem pronto. Seguindo essas regras é difícil a página ficar bagunçada; e dizer à IA "use as cores nos 12 níveis do Radix" funciona melhor do que "deixa a paleta mais sofisticada".
94. tweakcn#
Hoje, muita gente que escreve front-end com IA usa os componentes do shadcn/ui, e o resultado é que todo site fica igual — foi por isso que o autor criou esta ferramenta. O tweakcn é um editor visual de tema para o shadcn: cor, tipografia, raio de borda e sombra são ajustados à esquerda, enquanto cards, formulários e dashboards mudam na hora à direita. Há vários temas predefinidos e, quando estiver satisfeito, você exporta o código do tema e cola no projeto. Gratuito e open source.
9. Coleta diária de inspiração
Repertório visual não se resolve na véspera. Quando estiver rolando o celular ou navegando e vir uma imagem que chama atenção, salve na sua própria biblioteca por categoria; na hora de um projeto precisar de direção, consultar o seu acervo é sempre mais rápido do que garimpar na internet inteira.
95. Pinterest#
O volume de imagens continua sendo o maior da internet, e é ótimo para ir de galho em galho: encontre uma referência que combina, clique e vá seguindo as "imagens semelhantes" — em dez minutos você puxa dezenas no mesmo estilo. O defeito é que nos últimos anos o feed inicial se encheu de imagens geradas por IA de baixa qualidade e posts de spam; crie alguns boards privados e fixe só o que foi realmente escolhido, para ir limpando o algoritmo aos poucos.
96. Are.na#
Ferramenta de coleta de referências preferida por muitos geeks do design, arquitetos e escritores independentes. A aparência é bem crua: sem anúncios, sem feed algorítmico e sem contagem de curtidas. Você cria canais e guarda imagens, PDFs, links e anotações soltas, e ainda pode conectar seus canais aos canais públicos de outras pessoas no mundo todo. Ótimo para acumular pesquisa sobre um tema específico com calma.
97. Cosmos#
Nova geração de pasta de referências que viralizou entre designers internacionais nos últimos anos. Com a extensão do navegador instalada, ao ver uma imagem ou vídeo bom no Twitter ou em qualquer site, um clique direito salva no seu espaço. A diagramação da interface é limpíssima e, como os primeiros usuários eram criativos com bom repertório, navegar pela página Discover pelos favoritos públicos dos outros entrega imagens de altíssima qualidade.
98. Savee#
Comunidade minimalista de imagens feita para designers visuais. Ao abrir o site não há título nem texto sobrando: a tela é um fluxo de imagens limpas em alta resolução. O conteúdo é bem puro, concentrado em design gráfico, branding, fotografia de vanguarda, tipografia e design industrial; para referência gráfica sofisticada, passar aqui rende mais do que plataformas generalistas.
99. It's Nice That#
🔗 https://www.itsnicethat.com/
Mídia de cultura criativa de Londres, no ar há muitos anos. Publica alguns textos curtos por dia sobre projetos recentes de ilustração, design gráfico, animação e fotografia do mundo inteiro. O charme é que não fica só na imagem: os editores sabem cavar histórias interessantes por trás dos criadores — como uma fonte estranha nasceu de um erro de impressão, o que o diretor pensava ao fazer aquele curta absurdo. Ótimo para acompanhar o almoço.
100. Brand New#
🔗 https://www.underconsideration.com/brandnew/
Site profissional de crítica a rebrandings globais. Sempre que uma empresa, universidade, liga esportiva ou marca de consumo minimamente conhecida troca de logo e identidade visual, ele coloca a versão antiga e a nova lado a lado e faz uma análise objetiva (às vezes bem ácida), do ajuste tipográfico à evolução do símbolo e à aplicação real. No fim há votação dos colegas do mundo inteiro (pago; sem assinatura você só vê a comparação dos logos). Frequentar o site treina rápido o olhar para julgar design de marca comercial.
Por fim: como realmente usar estes 100 sites
Já disse no começo: jogar este texto numa pasta de favoritos e nunca abrir não serve para nada.
Eu uso esses sites com quatro métodos bem simples, e a constância funciona:
Escolha um site por dia e feche depois de 15 minutos. Nunca abra vinte abas de uma vez no navegador — em cinco minutos você se irrita. Melhor definir uma escala fixa que não exija pensar: segunda de manhã, com o café, Awwwards; terça, Motionographer; quarta, Mobbin... Um lugar por dia, quinze minutos, é o fluxo lento que realmente entra na cabeça.
Antes de rolar adiante, force-se a dizer em uma frase "o que exatamente tem de bom aqui". Ao achar uma imagem ou página bonita, não saia só salvando: pare dez segundos. Ela parece sofisticada porque o espaço em branco foi generoso? Porque a diferença entre título e corpo é grande? Porque o cinza de fundo está no tom certo? Ou porque o botão aparece na velocidade exata? Se você consegue resumir o motivo em linguagem comum, a técnica passa a ser sua; se não consegue, foi só um passeio dos olhos.
Quando gostar muito de algo, desmonte um e copie um. Viu uma página impressionante? Abra o F12 e veja o espaçamento do grid, que fonte latina usa, quais parâmetros tem a curva de easing no CSS. Viu um curta com ritmo excelente? Baixe, arraste para o editor e conte quadro a quadro quantos segundos cada plano dura e em que quadro está a transição. Entendendo, feche o original, crie um projeto novo e refaça — uma tentativa vale dez tutoriais.
Guarde o nome dos estilos que vê e transforme isso em segurança para falar com a IA. Hoje todo mundo trabalha com Claude, Cursor ou ferramentas de geração de imagem. Se você só sabe dizer "deixa a página mais imponente e moderna", a IA sempre devolve o template mais medíocre; mas se você frequenta os sites acima, pode dar ordens diretas: "seguindo as regras do DESIGN.md do Linear no awesome-design-md, escreva um card de grade Bento escuro, com uma borda de brilho sutil, título em uma geométrica sem serifa como Satoshi, animação de expansão com a curva de amortecimento rápida que o Emil Kowalski recomenda, e no fim revise tudo conforme as diretrizes de interface da Vercel" — quando você consegue citar nomes e técnicas concretas, o que a IA entrega é de outro nível.
No fim, só aquilo que você consegue nomear com precisão e explicar com clareza é repertório que realmente cresceu em você.
Estes 100 sites foram selecionados conforme meus hábitos de fazer vídeo e imagens; certamente ficaram bons lugares de fora. Se você também tem sites guardados na barra de favoritos que não consegue deletar, compartilhe nos comentários para trocarmos.
Se esta lista foi útil, deixe um like e envie para quem trabalha junto com você. Na próxima vez que abrir um projeto novo e ficar olhando para a tela sem ideia, é só voltar aqui.
Sou Eian, obrigado pelo apoio.