100 sites de design pour affûter son œil

Préface

Quand on fait de la vidéo, de l'UI ou du front-end, on finit presque toujours par ressentir la même chose : à niveau technique égal, ce qui fait la différence, c'est l'œil.

Aujourd'hui, l'IA peut écrire du code, produire des animations, générer des images. Mais savoir si le résultat tombe juste, s'il est présentable, cela reste à vous de trancher. C'est parce que vous avez vu beaucoup de bonnes choses que vous arrivez à dire « l'interlettrage est trop serré ici », « cette transition est trop raide », et à donner des consignes précises à l'IA ou à corriger vous-même sans partir dans la mauvaise direction.

Cette liste vient des favoris personnels d'Eian, après un grand nettoyage de son navigateur : 100 sites de design qu'il ouvre vraiment, répartis en 9 catégories selon les situations de travail du quotidien. Pour chaque site, une ou deux phrases disent ce qu'on y trouve et quand y aller ; ceux qui demandent un abonnement payant pour voir l'intégralité sont signalés par (payant), tous les autres sont accessibles gratuitement. Toutes les adresses ont été ouvertes une par une, et les sites qui ont changé de nom, comme Godly que tout le monde collectionnait autrefois, ont été remplacés par leur adresse la plus récente.

Réponses rapides

• Commencez par installer le haut du panier dans votre tête : Awwwards, D&AD, Annecy et Tokyo TDC définissent votre plafond du « bon ».
• Pour le motion et la vidéo, regardez d'abord assez de bons films avant d'apprendre les logiciels ; les sites de studios comme BUCK ou ManvsMachine enseignent le rythme mieux que n'importe quel tutoriel.
• Pour la 3D, ne restez pas enfermé à régler vos shaders : allez voir sur ArtStation et 80 Level les wireframes, les éclairages et les breakdowns des autres.
• Le « rendu cinéma » n'est pas un adjectif, c'est du light, de la focale et de l'étalonnage : ShotDeck, FILMGRAB et StillsLab vous déplient les images directement.
• Avant de dessiner une interface, regardez de vrais produits en ligne, ne restez pas dans les maquettes conceptuelles ; Mobbin, Refero et les Apple HIG sont les références qui tiennent debout.
• Si un effet front-end vous échappe, appuyez sur F12 : Codrops, GSAP, Three.js et Shadertoy laissent presque toujours le code source sur la page.
• Typographie et couleur sont des fondamentaux : Typewolf, Fontshare et Radix Colors sauvent la majorité des rendus « ringards ».
• Entasser des liens dans ses favoris ne sert strictement à rien : un seul site par jour, 15 minutes, et forcez-vous à résumer en une phrase ce qu'il a de bon.

Source : cet article est une adaptation de « 100 sites de design pour affûter son œil » publié par Eian sur X (@EianLu, 2026-11-13). Les droits appartiennent à l'auteur original ; le lien de l'article d'origine fait foi.

1. Concours et prix : voir d'abord à quoi ressemble le haut du panier

Quand on débute ou qu'on bloque sur un projet, le réflexe le plus direct est d'aller regarder les lauréats de l'année. Installez d'abord le standard le plus élevé du secteur dans votre tête : en revenant sur votre propre travail, les défauts sautent aux yeux immédiatement.

1. Le challenge de rendu 3D de Pwnisher#

🔗 https://www.youtube.com/@pwnisher

Le concours mondial de rendu 3D organisé par le youtubeur Clinton Jones, alias Pwnisher. Le principe est très visuel : il fournit un blocage de caméra et de mouvement de personnage entièrement figé, des milliers de participants du monde entier s'expriment à partir de cette base, et le tout est assemblé en un long film. En 2026, on en est à la 13e édition. Comme la base est strictement identique pour tous, on voit immédiatement qui a le meilleur éclairage et qui a l'imagination la plus folle.

2. Awwwards#

🔗 https://www.awwwards.com/

Impossible de faire du web et du front-end sans passer par ce prix. Chaque jour, un « site du jour » est désigné ; le jury note selon quatre critères — design, ergonomie, créativité, contenu — et un grand prix annuel est décerné en fin d'année. Parfait pour jeter un œil cinq minutes avant de commencer sa journée et voir quelles nouvelles folies le design web a inventées.

3. CSS Design Awards#

🔗 https://www.cssdesignawards.com/

Un autre grand prix du web, aussi réputé qu'Awwwards, qui met lui aussi en avant un meilleur site chaque jour, noté sur l'UI, l'UX et l'innovation. Les goûts du jury diffèrent de ceux d'Awwwards, et les sites retenus ne se recoupent souvent pas : on peut alterner entre les deux.

4. The FWA#

🔗 https://thefwa.com/

Un prix historique du design numérique, lancé en 2000, qui met également en avant un projet lauréat chaque jour. Plutôt que les mises en page commerciales bien sages, FWA préfère les projets techniques qui explorent l'interaction, le WebGL ou le son interactif.

5. The Motion Awards#

🔗 https://motionawards.com/

Le prix dédié au motion design organisé par Motionographer. Génériques, publicités, habillages de marque, documentaires : chacun est jugé dans sa catégorie, et une catégorie IA a été ajoutée ces deux dernières années. Le plus pratique : les pages des lauréats intègrent directement le film final, sans avoir à sortir chercher ailleurs. Le générique de « Shōgun » s'y trouve, de quoi parcourir en un après-midi le meilleur du motion de toute une année.

6. Apple Design Awards#

🔗 https://developer.apple.com/design/awards/

Le prix décerné chaque année par Apple lors de la WWDC. Les apps et jeux qui y figurent sont des cas d'école en matière d'esthétique à la Apple, de sensation d'interaction et d'intégration des spécificités matérielles. Apple rédige aussi un commentaire pour chaque application primée afin d'expliquer pourquoi elle a été choisie : indispensable pour ceux qui font du mobile.

7. D&AD#

🔗 https://www.dandad.org/

Le grand prix britannique du design et de la publicité. Comme le trophée a la forme d'un crayon, les professionnels l'appellent souvent le « prix du crayon jaune ». Son plus haut niveau, le « crayon noir », est extrêmement sévère : certaines années, il n'est pas décerné du tout plutôt que d'être donné à un projet moyen, et les lauréats sont tous des cas qui entrent dans l'histoire du design. Ceux qui font de la marque, de la pub ou du graphisme trouveront matière dans les archives.

8. The One Show & ADC#

🔗 https://www.oneclub.org/

Deux prix majeurs organisés par The One Club aux États-Unis. The One Show valorise l'idée créative derrière le film publicitaire, tandis que l'ADC (Art Directors Club de New York, fondé en 1921) privilégie l'expression visuelle pure, la typographie et le soin du détail d'exécution.

9. Runway AI Film Festival#

🔗 https://aif.runwayml.com/

Le festival d'images IA organisé par l'outil vidéo Runway. En 2026, c'est déjà la 4e édition, avec des projections physiques à New York, Los Angeles et Tokyo. Outre les courts métrages, il comporte plusieurs catégories : design, nouveaux médias, mode, publicité. La Screening Room du site permet de voir directement les films primés des éditions précédentes : pour savoir où se situe aujourd'hui le plafond de la vidéo IA, c'est l'endroit le plus direct.

10. Tokyo TDC#

🔗 https://tokyotypedirectorsclub.org/

Le prix annuel du Tokyo Type Directors Club. Malgré « type » dans son nom, c'est en réalité une boussole pour tout le design visuel asiatique. Le regard du jury est très exigeant : les affiches, livres et visuels animés primés sont pour la plupart fortement expérimentaux. Quand on sature des compositions commerciales bien lisses, venir s'y rincer l'œil fait beaucoup de bien.

11. Festival international du film d'animation d'Annecy#

🔗 https://www.annecyfestival.com/

Créé en 1960, c'est le festival de référence absolue pour les gens de l'animation. Outre les longs métrages et les courts indépendants, il dispose d'une section dédiée aux commandes commerciales (publicités, clips, génériques), où l'on voit le meilleur de la direction artistique et de la narration animée mondiale.

12. Ciclope Festival#

🔗 https://www.ciclopefestival.com/

Un festival de films publicitaires qui décerne ses prix par « métier ». Là où la plupart des concours jugent la création dans son ensemble, celui-ci découpe le film : réalisateur, chef opérateur, étalonneur, monteur, animation 3D, effets visuels, musique, chacun a son prix. Si vous faites de la vidéo et voulez isoler l'« étalonnage » ou le « rythme du montage » pour l'étudier, c'est le prix le plus adapté.

2. Motion design et vidéo

Pour le motion et la vidéo, s'enfermer dans les tutoriels logiciels fait vite tomber dans le réglage de paramètres. Regardez d'abord assez de bons films, comprenez ce qu'est un bon rythme et une bonne transition, puis revenez chercher les tutoriels : c'est bien plus efficace.

13. Motionographer#

🔗 https://motionographer.com/

Un site historique du motion design, actif depuis presque vingt ans. La rédaction a un œil redoutable : pas de remplissage, et chaque mise à jour vaut généralement d'être revue image par image. Les articles sont souvent accompagnés de notes de production écrites par les studios eux-mêmes.

14. STASH#

🔗 https://www.stashmedia.tv/

Une vidéothèque en ligne à laquelle beaucoup de studios d'animation et de VFX sont abonnés (payant). Des milliers de publicités, clips et habillages de chaînes y sont classés par style et par technique ; l'intérêt principal est que beaucoup de films sont accompagnés de making-of et de breakdowns techniques.

15. Art of the Title#

🔗 https://www.artofthetitle.com/

Un site entièrement consacré au « design de générique » de films, séries et jeux. Il ne se contente pas de publier les génériques en haute définition : son vrai travail, ce sont de longs entretiens avec les créateurs, où réalisateurs et designers déploient croquis initiaux, pistes abandonnées et storyboards pour expliquer, étape par étape, comment ces deux minutes ont été façonnées.

16. Vimeo Staff Picks#

🔗 https://vimeo.com/channels/staffpicks

La chaîne de courts métrages sélectionnés à la main chaque jour par la rédaction de Vimeo. Dans le milieu de la vidéo, voir son travail affublé du badge Staff Pick est un motif de fierté pour la vie. Courts en prises de vues réelles, animations expérimentales ou documentaires : le niveau est d'une régularité impressionnante.

17. La section motion de Behance#

🔗 https://www.behance.net/galleries/motion

Tout le monde parcourt Behance au quotidien, mais sa catégorie Motion est particulièrement utile pour apprendre les workflows. Beaucoup de studios y publient leurs projets avec, côte à côte, les moodboards, les styleframes, les animatiques et le film final : c'est tout le processus de livraison qui s'étale devant vous.

18. Short of the Week#

🔗 https://www.shortoftheweek.com/

Un site qui recommande chaque semaine les meilleurs courts métrages indépendants du monde, en prises de vues réelles comme en animation. Chaque film est accompagné d'une véritable critique rédigée par la rédaction, qui décortique la manière dont le réalisateur installe ses personnages et boucle une bonne histoire en une dizaine de minutes.

19. Directors Notes#

🔗 https://directorsnotes.com/

Un blog consacré aux entretiens avec des réalisateurs indépendants. Chaque épisode porte sur un court métrage, avec des questions très concrètes : comment le financement a été bouclé, avec quelle caméra et quels objectifs on a tourné, quels problèmes sont apparus en postproduction. Ceux qui tournent des films au quotidien s'y reconnaîtront.

20. Sakugabooru#

🔗 https://www.sakugabooru.com/

Une bibliothèque de séquences d'« animation » (sakuga) tenue par des passionnés, avec plus de 320 000 extraits tirés d'animés. Chaque extrait est étiqueté : quel animateur l'a dessiné, de quelle œuvre il provient, s'il s'agit d'un effet d'explosion ou d'un jeu d'acteur. Pour étudier le rythme et l'élasticité d'un mouvement, une recherche par tag fait remonter des centaines d'extraits à examiner image par image — utile autant aux animateurs qu'à ceux qui génèrent des plans d'action avec l'IA.

21. Promonews#

🔗 https://www.promonews.tv/

Chaque jour, une sélection de nouveaux clips et films publicitaires, souvent accompagnés des notes de création du réalisateur : avec quelle caméra, pourquoi cet étalonnage, comment tel plan a été obtenu. Le clip est l'endroit où l'on ose le plus les cadrages stylisés, les couleurs et le rythme du montage : pour trouver des références de style visuel, c'est bien plus efficace que de chercher au hasard sur les plateformes vidéo.

Les cinq sites suivants ne sont pas des agrégateurs, mais les sites officiels des cinq studios les plus réputés du milieu. Téléchargez les films de leurs portfolios, ouvrez-les dans un lecteur et démontez-les image par image avec les flèches du clavier : c'est plus utile que n'importe quel cours avancé.

22. BUCK#

🔗 https://buck.co/

L'un des studios de motion design les plus grands et les plus célèbres au monde, habitué des commandes d'Apple, Nike ou Meta. 2D, 3D, prises de vues réelles : ils savent tout faire, et leur portfolio est gigantesque comme un musée.

23. ManvsMachine#

🔗 https://mvsm.com/

Un studio créatif londonien de premier plan, particulièrement fort sur les collisions de matières en 3D et les publicités produit exigeantes. La qualité de la lumière et des textures y donne des frissons.

24. Oddfellows#

🔗 https://oddfellows.tv/

Un studio américain spécialisé dans l'illustration et l'animation de personnages en 2D. Les palettes sont extrêmement agréables, et les raccords de plans comme l'inertie des mouvements sont d'une fluidité remarquable.

25. Golden Wolf#

🔗 https://www.goldenwolf.tv/

Un studio d'animation londonien immédiatement reconnaissable : couleurs saturées qui s'entrechoquent, perspectives exagérément déformées, montage à toute vitesse. Une énergie de cartoon urbain qui déborde de l'écran.

26. Ordinary Folk#

🔗 https://www.ordinaryfolk.co/

Une équipe de Vancouver qui fait des merveilles à partir de formes géométriques 2D élémentaires. L'élasticité et le sens du rythme de leurs courbes d'animation sont maîtrisés à la perfection.

3. 3D et rendu

En 3D, le pire est de s'enfermer pour régler ses shaders dans son coin. Allez voir les wireframes et les éclairages de projets aboutis dans les communautés : beaucoup des problèmes qui vous bloquent ont déjà une solution toute faite chez d'autres.

27. ArtStation#

🔗 https://www.artstation.com/

L'endroit où passent chaque jour les gens de la CG et de l'art de jeu. Les concept artists, modeleurs et lighter des grands studios de jeux et de VFX du monde entier y ont élu domicile : quelle que soit la direction artistique recherchée, on y trouve les références les plus abouties.

28. The Rookies#

🔗 https://www.therookies.co/

Une communauté de concours annuels réservée aux étudiants et aux nouveaux venus du secteur, avec plusieurs catégories : animation 3D, développement de jeux, VFX, concept design. Ceux qui débutent sur un logiciel ou préparent leur recherche d'emploi iront y jeter un œil pour voir à quel niveau en sont déjà les portfolios des jeunes diplômés.

29. 80 Level#

🔗 https://80.lv/

Un média consacré à l'art de jeu et aux techniques 3D. Ce qui vaut le plus le détour, ce sont ses articles « Breakdown » : l'auteur original est invité à démonter une scène 3D complexe, depuis le blocage réalisé dans tel logiciel et les salissures peintes dans Substance jusqu'à la disposition des lumières dans le moteur, avec un niveau de détail digne d'un manuel d'utilisation.

30. Sketchfab#

🔗 https://sketchfab.com/

Une plateforme où l'on fait tourner des modèles 3D à 360° directement dans le navigateur. Sur un modèle réussi, un clic sur les réglages du viewer en bas à droite permet de basculer en blocage blanc, en wireframe, en normales ou en canal de rugosité : on voit alors très clairement comment le modèle est topologisé et comment les UV ont été découpés.

31. befores & afters#

🔗 https://beforesandafters.com/

Un magazine en ligne qui décortique les coulisses des VFX des grosses productions hollywoodiennes. Les articles privilégient les comparaisons avant/après : à gauche l'acteur en combinaison de motion capture devant un fond vert, à droite l'explosion composée, avec l'entretien du superviseur VFX qui explique comment la scène a été tournée et composée.

32. fxguide#

🔗 https://www.fxguide.com/

Le média technique le plus ancien du secteur des VFX. Les articles sont très pointus, sans potins : ils creusent les algorithmes internes des moteurs de rendu, les pipelines de production virtuelle en studio LED, les simulations de fluides. Pour ceux qui veulent aller vers le technical art (TA) ou les profondeurs des VFX.

33. Blender Studio#

🔗 https://studio.blender.org/

Le studio d'animation open source officiel de Blender (payant). Chaque année, l'équipe réalise un court métrage de haute qualité avec Blender pour repousser les limites du logiciel. L'abonnement donne accès aux tutoriels, mais aussi aux fichiers de rig de personnages et de scènes d'éclairage utilisés pour le film, à ouvrir chez soi pour les étudier.

34. Poly Haven#

🔗 https://polyhaven.com/

La ressource incontournable pour le rendu 3D. Ses HDRI d'éclairage, ses matériaux PBR et ses modèles scannés sont tous sous licence CC0 : entièrement gratuits, téléchargeables sans inscription, et utilisables en freelance commercial sans obligation de crédit.

35. Beeple Everydays#

🔗 https://beeple-crap.com/everydays

Depuis le 1er mai 2007, l'artiste numérique Beeple s'est imposé de produire une image par jour et de la publier, sans jamais s'arrêter — ni pour un mariage, ni pour une maladie, ni pour les fêtes — pendant près de vingt ans. Si vous remontez à ses deux premières années, les images sont plutôt maladroites ; mais en tournant les pages, on voit de ses propres yeux comment une personne ordinaire est devenue un maître à force de rendre un devoir chaque jour.

4. Images de cinéma et références de cadrage

Pour tourner ou étalonner, le « rendu cinéma » que les clients mettent souvent en avant est en réalité une notion très floue. Plutôt que de deviner, autant extraire directement des images de films et observer comment un chef opérateur professionnel éclaire, écrase les basses lumières et choisit ses focales.

36. ShotDeck#

🔗 https://shotdeck.com/

Une bibliothèque professionnelle de captures de films lancée par Lawrence Sher, chef opérateur de « Joker » et de « Very Bad Trip » (payant). Le fonds est immense et les étiquettes d'une précision folle : on peut filtrer « heure dorée + contre-jour + grand-angle + tons froids + intérieur de voiture » et obtenir en une seconde des dizaines d'images parfaitement conformes pour un storyboard.

37. FILMGRAB#

🔗 https://film-grab.com/

Un site de captures de films entièrement gratuit, qui rassemble des milliers de classiques. Le classement est très simple : un film, une page, avec cinquante à soixante images clés en haute définition soigneusement alignées. Pour étudier la lumière et la composition d'un réalisateur, il suffit de faire défiler une page du début à la fin.

38. StillsLab#

🔗 https://stillslab.com/

Une banque de captures gratuite (cinéma, séries, clips, publicités) dont l'intégralité est consultable sans payer. Les tags sont très fins : taille de plan, angle de caméra, lumière, couleur, jour ou nuit, et même la caméra et l'objectif utilisés. On peut aussi décrire une image en langage naturel pour la rechercher. Chaque film a droit à des statistiques, par exemple 69 % de plans de nuit et 52 % de lumière douce dans « Blade Runner 2049 » : très pratique pour comprendre la recette visuelle d'un film.

39. Flim#

🔗 https://flim.ai/

Une banque de captures dotée d'une recherche sémantique par IA, qui couvre aussi les clips et les publicités. Son grand avantage : pas besoin de se souvenir du titre, il suffit de taper une phrase simple (« une personne debout au bout d'un couloir en contre-jour » ou « plat vu de dessus sur une table ») pour faire remonter des plans similaires dans différents films.

40. EyeCannndy#

🔗 https://eyecannndy.com/

Un site qui transforme le « langage du cadrage et les techniques de montage » en dictionnaire de GIF. Il est normal de ne pas savoir nommer une belle transition ou un mouvement de caméra : on y trouve des dizaines de techniques courantes — match cut, zoom à la Hitchcock, whip pan, vue subjective — et chaque entrée montre cinq ou six exemples animés tirés de publicités et de clips.

41. Le guide du langage cinématographique de StudioBinder#

🔗 https://www.studiobinder.com/blog/ultimate-guide-to-camera-shots/

Une série de tutoriels rédigée par un éditeur de logiciels de production, qui explique une à une les tailles de plan, les angles de caméra et les mouvements (travelling avant, panoramique, whip pan, orbite), chacun illustré par un exemple de film. Le niveau esthétique reste moyen, mais l'ensemble est systématique et facile à consulter. Pour générer de la vidéo avec l'IA, écrire « low angle », « dolly in » ou « whip pan » dans un prompt est bien plus efficace que « fais quelque chose de plus classe » — et tous ces termes se trouvent ici.

42. American Cinematographer#

🔗 https://theasc.com/

Le magazine publié depuis plus de cent ans par l'American Society of Cinematographers (ASC). Les articles sont le plus souvent des chefs opérateurs racontant un film en personne : pourquoi cette série d'objectifs, quelle caméra, d'où vient la lumière principale, comment l'étalonnage a été décidé. Les banques de captures montrent à quoi ressemble l'image ; ici, on explique pourquoi elle a été tournée ainsi. Beaucoup d'articles sont intégralement consultables gratuitement sur le site.

5. Design d'interface

Avant de dessiner une interface, commencez par parcourir de vrais produits déjà en ligne, et fréquentez moins les communautés de maquettes conceptuelles. Un vrai produit aide à démêler la logique de base — états d'erreur, hiérarchie des boutons ; une maquette conceptuelle est jolie, mais beaucoup ne tiennent pas debout, et la donner à manger à une IA ne fait qu'accentuer le « look IA ».

43. Mobbin#

🔗 https://mobbin.com/

La meilleure banque de captures de vraies applications à ce jour (payant, quelques contenus accessibles avec un compte gratuit). L'équipe a capturé de bout en bout une grande partie des principales apps iOS, Android et web, soit plus de 600 000 écrans. Quand vous devez dessiner une « page d'abonnement » ou un « état vide », il suffit de filtrer par fonction pour comparer côte à côte les solutions d'Airbnb, Spotify ou Notion.

44. Page Flows#

🔗 https://pageflows.com/

Mobbin montre des captures statiques ; ce site conserve des enregistrements d'usage de vrais produits (payant). Depuis l'arrivée d'un nouvel utilisateur sur une page d'atterrissage, la création de compte et le paiement par carte jusqu'à la façon de trouver l'entrée pour résoudre un abonnement, tout est enregistré avec les clics de souris et les changements de page : extrêmement pratique pour cartographier un parcours d'interaction.

45. Refero#

🔗 https://refero.design/

Une banque de captures d'interfaces web et iOS (payant). Ses tags de composants et de types de pages sont très granulaires : pour voir comment d'autres conçoivent un « filtre de tableau », un « fil d'Ariane » ou un « tableau comparatif de prix », la recherche est très précise. Il existe aussi un site annexe gratuit, styles.refero.design, qui rassemble les couleurs, polices et espacements de plus de 2 000 sites réels dans des DESIGN.md lisibles par une IA, consultables sans connexion.

46. Nicelydone#

🔗 https://nicelydone.club/

Une banque dédiée aux interfaces d'applications web et de SaaS (payant). Ceux qui travaillent sur du B2B, des back-offices d'entreprise ou des outils internes ne trouvent pas toujours leur compte dans les apps grand public : c'est ici que l'on trouvera les meilleures références de mise en page pour des formulaires complexes et des tableaux de bord.

47. SaaSFrame#

🔗 https://www.saasframe.io/

Une autre banque d'interfaces centrée sur les produits SaaS (payant), avec un classement par type : sites marketing, pages de connexion et d'inscription, modales de fonctionnalités, pages de réglages. Très utile pour les développeurs indépendants et les designers B2B.

48. Figma Community#

🔗 https://www.figma.com/community

La communauté open source intégrée à Figma. Les captures des autres ne montrent que la surface ; ici, lorsqu'un design system, une bibliothèque de composants open source d'un grand groupe ou un template bien composé vous plaît, un clic sur « Open in Figma » en haut à droite fait entrer tout le fichier source dans vos brouillons. Ouvrez le panneau des calques : on voit immédiatement comment l'Auto Layout est utilisé et comment les variables de couleur sont nommées.

49. Apple Human Interface Guidelines (HIG)#

🔗 https://developer.apple.com/design/human-interface-guidelines/

La documentation officielle qu'Apple adresse aux designers et aux développeurs. Pour des questions de base — combien d'icônes dans une barre de navigation basse, quelle surface minimale pour une zone tactile, dans quel cas afficher une alerte — inutile de demander partout en ligne : cette documentation explique clairement le pourquoi.

50. Material Design 3#

🔗 https://m3.material.io/

La documentation du design system de Google. Même si vous ne faites pas d'applications Android natives, elle mérite une lecture complète. Elle expose sans rien cacher comment un grand design system définit ses paliers de couleur, calcule sa hiérarchie typographique, gère le contraste en mode sombre et définit les états de survol et d'appui des composants.

51. Vercel Web Interface Guidelines#

🔗 https://vercel.com/design/guidelines

Une liste de détails d'interface compilée par Vercel, classée par thèmes : interaction, animation, mise en page, rédaction, formulaires, performance. Chaque règle est directement vérifiable, par exemple « sur mobile, la taille de police d'un champ ne doit pas descendre sous 16 px, sinon iOS zoome automatiquement au clic » ou « ne trichez pas avec un transition: all ». Idéal pour ceux qui codent avec l'IA : une section explique comment l'intégrer à l'IA, avec un AGENTS.md prêt à l'emploi et un skill de relecture, pour que l'IA vérifie point par point l'interface qu'elle vient d'écrire.

52. Impeccable#

🔗 https://impeccable.style/

Un skill de design spécialement conçu pour soigner le « look IA ». Il liste les tics par défaut préférés des IA en 62 points de contrôle : la « palette IA » beige, les grands titres en serif italique, la barre colorée à gauche des encadrés, les cartes dans les cartes, les sous-titres numérotés du type « 01 Discover »... Une fois installé dans Claude Code, Cursor ou Codex, ses commandes permettent de faire polir la typographie, ajuster la mise en page ou critiquer son propre design. Même sans l'installer, lire cette liste permet de comprendre d'un coup d'œil pourquoi tant de pages respirent le bon marché.

53. The Component Gallery#

🔗 https://component.gallery/

Un site qui met en concurrence les « composants de base » des grands acteurs. Vous voulez étudier un simple « toggle » ou une « bannière d'alerte » : la page rassemble les captures et les liens vers la documentation de plusieurs dizaines de design systems — Apple, Google, Microsoft, Shopify, GitHub... Idéal pour repérer les oublis quand on rédige des spécifications de composants.

54. 60fps#

🔗 https://60fps.design/

Un site dédié aux « micro-interactions d'interface soignées ». On y trouve uniquement des séquences d'interactions réelles enregistrées à haute fréquence, sans blabla : dès l'ouverture, l'écran se remplit de déploiements de cartes, de pull-to-refresh et de transitions de pages remarquablement bien réglés.

55. Spotted in Prod#

🔗 https://www.spottedinprod.com/

Un site qui capture les « petits détails qui marquent » dans des applications iOS déjà en ligne. Ce sont de très courtes vidéos de quelques secondes, par exemple la visualisation du retour haptique discret d'un bouton ou un easter egg caché dans les réglages. Parfait pour chercher l'inspiration sur les détails.

56. Growth.Design#

🔗 https://growth.design/

Un site réalisé par deux product designers, qui décortique l'expérience réelle d'applications connues sous forme de bande dessinée. Ils traversent par exemple l'onboarding de Duolingo comme un utilisateur ordinaire, ou réservent un logement sur Airbnb, puis dessinent page après page : pourquoi ce texte rassure avant de payer, pourquoi la modale suivante fait fuir. Ludique et instructif.

57. Laws of UX#

🔗 https://lawsofux.com/

Les lois psychologiques souvent invoquées pour faire savant en design d'interaction (loi de Fitts, loi de Hick, loi de Miller, principe pic-fin) y sont condensées en une vingtaine de fiches claires. Chaque fiche explique en trois phrases ce que dit la loi, qui l'a formulée et ce qu'il faut en retenir concrètement pour une interface. Très pratique pour trouver un fondement théorique à une refonte.

58. Game UI Database#

🔗 https://www.gameuidatabase.com/

Une banque de captures d'interfaces de jeux à l'échelle impressionnante : près de 2 000 jeux console et PC, plus de 70 000 captures haute définition. Le plus fort, c'est le classement par fonction d'UI : on peut chercher directement les « écrans de création de personnage », « inventaires », « arbres de compétences », « fenêtres de quête » ou « écrans de game over » de tous les jeux. Même sans faire de jeu, voir comment les designers organisent la hiérarchie visuelle d'une information extrêmement dense est très instructif.

6. Inspiration web

À chaque nouvelle demande de site, le pire réflexe est d'ouvrir son logiciel et de dessiner des cadres sur du blanc. Prenez d'abord un quart d'heure pour parcourir quelques dizaines de pages similaires sur les sites ci-dessous : avec trois ou quatre directions de mise en page solides en tête, vous économiserez plus de la moitié des allers-retours.

59. Recent (ex-Godly)#

🔗 https://recent.design/

Godly (godly.website), que presque tous les webdesigners avaient autrefois en favori, redirige désormais vers ce nouveau site, Recent. Il conserve le plaisir de l'époque : sans entrer sur le site d'origine, on voit directement en haute définition l'enregistrement du scroll. Le périmètre s'est élargi aux films de produit, aux icônes d'applications, aux identités de marque et aux affiches. Pour savoir ce qui se fait de plus tendance chez les développeurs indépendants et les entreprises tech à l'étranger, c'est ici qu'il faut aller.

60. Siteinspire#

🔗 https://www.siteinspire.com/

Une banque d'inspiration web historique, active depuis une dizaine d'années, avec plusieurs milliers de sites. Ses filtres sont très pratiques : on peut croiser « style visuel (grille, minimalisme, typographie XXL) », « type de site (portfolio, e-commerce) » et « secteur (architecture, mode) ». La sélection globale est très retenue : peu de sites démonstratifs et clinquants, surtout des mises en page qui vieillissent bien.

61. Land-book#

🔗 https://land-book.com/

Une banque dédiée aux landing pages. Outre les pages d'accueil de produits, elle propose des collections séparées de pages de tarifs, de pages « à propos » et de CV en ligne : très utile pour les sites commerciaux classiques.

62. Landingfolio#

🔗 https://www.landingfolio.com/

Une autre banque de landing pages, avec un pas de plus : les pages sont découpées en blocs — premier écran, présentation des fonctionnalités, avis clients, appel à l'action, pied de page — soit plus de 4 600 blocs, exportables en Tailwind, Figma ou Webflow (en partie payant). Très pratique à donner à une IA : choisir un bloc qui plaît et le lui fournir est bien plus précis que de décrire « fais-moi un beau premier écran ».

63. awesome-design-md#

🔗 https://github.com/VoltAgent/awesome-design-md

Une collection open source sur GitHub qui rassemble, pour des sites unanimement reconnus comme Stripe, Linear, Vercel ou Apple, les couleurs, polices, espacements et styles de composants dans un fichier DESIGN.md. Placez-le dans votre projet et l'IA générera l'interface selon les règles de cette marque, bien plus fiablement que si vous décrivez vous-même « je veux le feeling de Linear ».

64. One Page Love#

🔗 https://onepagelove.com/

Un site dédié aux « sites one page ». Certains petits produits, événements physiques ou pages personnelles ne justifient pas une navigation à plusieurs rubriques : allez voir ici comment d'autres racontent clairement et avec du rythme, sur une seule page qui se déroule du haut vers le bas.

65. Minimal Gallery#

🔗 https://minimal.gallery/

Une banque exclusivement consacrée aux sites minimalistes. Si vous avez l'impression que vos pages sont toujours trop remplies et étouffantes, parcourez quelques sites ici et observez comment d'autres tiennent une page avec du noir, du blanc, du gris, de grands espaces vides et un contraste typographique net.

66. Dark Mode Design#

🔗 https://www.darkmodedesign.com/

Une banque qui ne recueille que des sites en « mode sombre ». Beaucoup de pages sur fond noir finissent soit en bloc uniforme où l'on ne distingue plus la hiérarchie, soit en accumulation d'effets lumineux qui font bon marché. Parcourez ici des cas aboutis : comment le noir pur et le gris foncé créent des niveaux de cartes, jusqu'à quel degré d'opacité descendre pour le texte et les filets afin de ne pas éblouir.

67. Hoverstat.es#

🔗 https://www.hoverstat.es/

Un endroit dédié aux « sites bizarres ». On n'y voit presque jamais de site d'entreprise classique : uniquement des pages d'artistes indépendants, de studios de design d'avant-garde, de groupes underground ou d'architectes expérimentaux. Navigation cachée dans des endroits étranges, éléments qui fusent au survol : quand vous trouvez que tous les sites se ressemblent et que vous saturez des recettes, venir flâner ici fait beaucoup de bien.

68. Web Design Museum#

🔗 https://www.webdesignmuseum.org/

Un véritable « musée d'histoire du design web ». Le fondateur a conservé les captures de milliers de sites anciens, de 1991 à 2006 : on y voit à quoi ressemblait le site d'Apple en 1997, la densité du portail Yahoo autour de l'an 2000, les boutons skeuomorphiques et les sites Flash qui faisaient fureur. Au-delà de la nostalgie, le style rétro Y2K que beaucoup de marques de streetwear affectionnent trouve ici ses sources les plus authentiques.

7. Front-end et interaction

Pour ceux qui écrivent du front-end, s'extasier devant un effet d'interaction en disant « c'est fort » ne sert à rien : appuyer sur F12 et voir si c'est du CSS ou du WebGL, voilà la compétence. La plupart des sites ci-dessous vous donnent directement le code source.

69. Codrops#

🔗 https://tympanus.net/codrops/

Une mine d'or à mettre en favori pour ceux qui font du front-end créatif. Le site partage régulièrement des tutoriels d'effets dignes des prix Awwwards : distorsions d'images en WebGL, transitions de page fluides sans rechargement, grilles de texte qui se déforment au scroll. Le plus généreux : chaque article explique pas à pas la logique d'implémentation et fournit une démo en ligne ainsi qu'un dépôt GitHub.

70. CodePen Spark#

🔗 https://codepen.io/spark

Une compilation de code créatif préparée chaque semaine par la rédaction de CodePen. On y trouve des petits jouets écrits par des développeurs du monde entier en quelques centaines de lignes de CSS, SVG ou Canvas. Un effet vous plaît : à gauche, les champs HTML/CSS/JS ; changez deux valeurs et l'aperçu à droite se met à jour instantanément. Idéal pour s'entraîner.

71. La bibliothèque de démos officielles de GSAP#

🔗 https://demos.gsap.com/

La bibliothèque d'exemples officielle de GSAP (GreenSock), référence de l'animation web : plus d'une centaine d'effets classés par scroll, texte, survol, suivi de souris et carrousel, chacun avec son code CodePen. Autrefois, beaucoup des plugins avancés les plus utiles — ScrollTrigger pour lier une animation au scroll, SplitText pour découper du texte — étaient réservés aux membres payants ; depuis le rachat par Webflow, tous les plugins commerciaux sont devenus gratuits. Un effet vous plaît : donnez le code à l'IA pour l'adapter, c'est un régal.

72. Les exemples officiels de Three.js#

🔗 https://threejs.org/examples/

Pour faire de la 3D dans le navigateur, difficile d'échapper à Three.js. Inutile d'aller chercher des tutoriels approximatifs : commencez par ouvrir une à une les quelques centaines de démos officielles, du simple chargement d'un modèle avec squelette d'animation aux réflexions de surface océanique, collisions physiques et passes de bloom en post-traitement. Chaque démo a un bouton « code source » en bas à droite, qui montre la manière officielle et canonique de l'écrire.

73. Shadertoy#

🔗 https://www.shadertoy.com/

L'endroit où les virtuoses de l'infographie font étalage de leur talent. Toutes les images spectaculaires du site — nuages volumétriques qui roulent, réfractions d'eau réalistes, ville en 3D entièrement néon — ne reposent sur aucune image importée ni modèle 3D : tout est calculé en temps réel dans la carte graphique par quelques centaines de lignes de formules mathématiques (du code GLSL). Le code source est affiché à droite ; malgré les trigonométries à faire tourner la tête, impossible de l'éviter pour qui veut des fonds fluides ou étudier l'infographie.

74. The Book of Shaders#

🔗 https://thebookofshaders.com/

Si ouvrir Shadertoy vous donne l'impression de lire un texte illisible, commencez par ce tutoriel interactif en ligne gratuit (qui existe aussi en version chinoise). L'auteur décortique les fragment shaders : dessiner une ligne puis un cercle avec une formule mathématique, générer des textures de bruit, chaque extrait de code pouvant être modifié directement dans le texte pour voir l'image évoluer. C'est le meilleur livre d'initiation aux shaders unanimement reconnu.

75. Bruno Simon#

🔗 https://bruno-simon.com/

La page personnelle du développeur français Bruno Simon. Là où les autres ont un CV en PDF, le sien consiste à conduire une petite voiture dans un bac à sable 3D directement dans le navigateur ; renverser les panneaux de signalisation révèle son parcours et ses projets. Son cours « Three.js Journey » est par ailleurs l'une des formations les plus complètes sur la 3D web.

76. Lusion#

🔗 https://lusion.co/

Un studio britannique spécialisé dans le développement créatif haut de gamme. Leur propre site est aujourd'hui l'un des sommets de l'interaction WebGL : chargement de page, inertie de la molette, transitions de particules 3D, synchronisation sonore — pas une image saccadée ni superflue. Chaque développeur front-end devrait l'ouvrir et l'observer tranquillement.

77. Active Theory#

🔗 https://activetheory.net/

Un studio d'interaction numérique américain de premier plan. Les expériences interactives en ligne de plusieurs éditions de Google I/O, les pages interactives des bilans musicaux Spotify Wrapped des premières années : beaucoup des campagnes technologiques virales des grands groupes sont codées derrière chez eux.

78. Framer Gallery#

🔗 https://www.framer.com/gallery/

Une sélection de sites remarquables établie par Framer. L'interface de Framer ressemble presque à celle de Figma, mais un clic sur publier produit un site responsive avec du vrai code. Un tour dans cette galerie suffit à comprendre jusqu'où un designer qui ne code pas peut pousser les animations d'un site, rien qu'avec du glisser-déposer et les composants intégrés.

79. Les exemples officiels de Motion#

🔗 https://motion.dev/examples

La page d'exemples officielle de Motion (anciennement Framer Motion), la bibliothèque d'animation la plus utilisée en React et Vue. Des easings physiques à ressort les plus élémentaires aux animations complexes liées au scroll, en passant par l'ajout, la suppression et la réorganisation de listes, les micro-interactions d'interface courantes ont presque toutes un exemple court prêt à l'emploi (en partie payant) : toutes les démos sont visibles, plus d'une centaine d'exemples de la catégorie de base sont fournis avec le code source, copiables et modifiables ; les autres demandent un abonnement Motion+ pour accéder au code.

80. React Bits#

🔗 https://reactbits.dev/

Un petit supermarché de composants d'animation React entièrement gratuit et open source. On y trouve des petits éléments visuels déjà encapsulés : texte qui apparaît en caractères brouillés, bouton magnétique qui suit la souris, bordure de carte à reflet lumineux, fond fluide animé. Réglez vitesse et couleurs à gauche, copiez le code à droite dans votre projet, et en cinq minutes une page terne reprend vie.

81. coss ui#

🔗 https://coss.com/ui

Le design system maison de Cal.com, l'outil d'agenda open source, anciennement Origin UI que beaucoup avaient en favori. Écrit en Tailwind, avec plus de cinquante composants de base et cinq cents modules prêts à l'emploi, sous licence MIT, utilisables librement. Le style est très retenu : on dirait un vrai produit soigneusement travaillé, pas une énième page d'accueil de start-up IA à base de « fond sombre + bordures lumineuses + rayons de lumière ».

82. Josh W. Comeau#

🔗 https://www.joshwcomeau.com/

Le blog du développeur front-end Josh Comeau. Il parle de mise en page CSS, d'animations à ressort, de tracés SVG, non pas en collant du code brut, mais en truffant ses articles de petits schémas interactifs que l'on peut manipuler et paramétrer : faire glisser un curseur suffit à comprendre pourquoi telle courbe est plus agréable. Les articles sont gratuits, les cours avancés payants. Une fois les principes compris, on sait enfin quoi demander à l'IA pour les animations.

83. Rauno Freiberg#

🔗 https://rauno.me/

Le site personnel de Rauno, aujourd'hui design engineer chez Vercel. Lisez absolument en entier son article « Invisible Details of Interaction Design » (les détails invisibles du design d'interaction). À travers une dizaine de petits composants interactifs que l'on peut manipuler, il explique clairement des détails d'ingénierie invisibles : pourquoi le défilement d'iOS s'arrête si naturellement, comment un menu déroulant évite les déclenchements involontaires selon la pente du mouvement de souris.

84. Emil Kowalski#

🔗 https://emilkowal.ski/

L'auteur de Sonner, le composant de notification open source utilisé par beaucoup de développeurs front-end, et de Vaul, le composant de tiroir ; il a été design engineer chez Linear. Ses articles de blog sont courts, mais tous creusent une seule question : comment rendre une animation d'interface « retenue et bien collée au geste ». Combien de millisecondes pour une modale, dans quels cas ne surtout pas animer : après lecture, on perd pas mal de mauvaises habitudes d'ajout d'effets superflus.

8. Typographie et couleur

Que vous montiez des sous-titres ou dessiniez des interfaces et des pages web, la typographie et la couleur sont toujours ce qui trahit le plus vite les fondamentaux. Un travail qui paraît « ringard » ou « brouillon » manque neuf fois sur dix de soin sur ces deux points.

85. Typewolf#

🔗 https://www.typewolf.com/

Le guide typographique le plus fiable reconnu dans le milieu de la mise en page. Son auteur est un designer extrêmement exigeant en matière de polices ; il recommandait autrefois chaque jour un site réel à la typographie remarquable, en précisant les polices du titre et du corps de texte (plus de mise à jour depuis fin 2025, mais les cas accumulés et les classements restent consultables). Ses « dix meilleures sans-serif » et ses « meilleures combinaisons Google Fonts » valent de l'or : pour un contenu en anglais ou un mix latin/chinois, consulter ses classements ne déçoit jamais.

86. Fonts In Use#

🔗 https://fontsinuse.com/

Une « archive de typographie en conditions réelles » alimentée par des designers du monde entier. Il ne vend pas de fontes : il collecte affiches, couvertures de livres, pochettes de disques, panneaux de signalisation et captures de sites, puis identifie comme un expert chaque police utilisée et l'annote à côté. Pour savoir quel caractère a une police sur papier ou à l'écran, il suffit de chercher un cas réel dans la base.

87. Google Fonts#

🔗 https://fonts.google.com/

Le vieil ami que tout le monde connaît : une bibliothèque open source entièrement gratuite et utilisable commercialement. Outre une immense collection de polices latines, on peut y télécharger directement les polices chinoises les plus courantes — Noto Sans SC, Noto Serif SC, LXGW WenKai (version traditionnelle). Pour le front-end, inutile même de télécharger : une ligne de lien suffit.

88. Fontshare#

🔗 https://www.fontshare.com/

Un site de fontes gratuites lancé par ITF, grand nom indien de la typographie. La collection est moins vaste que Google Fonts, mais chaque police est une pièce de qualité, et l'engagement est clair : 100 % gratuit pour un usage personnel comme commercial. Les géométriques sans-serif Satoshi, les titrages Clash Display et General Sans, très présents ces dernières années sur les sites indépendants et dans la tech à l'international, viennent tous de là.

89. Butterick's Practical Typography#

🔗 https://practicaltypography.com/

Un petit livre de typographie en ligne gratuit et très agréable à lire. Son auteur a écrit du code et a été typographe professionnel : aucune théorie artistique obscure, il attaque directement avec un chapitre « maîtriser l'essentiel de la typographie en 10 minutes » qui donne des repères concrets : combien de caractères par ligne pour un corps de texte confortable, quel interlignage, pourquoi il ne faut jamais élargir l'interlettrage au hasard. Même en ne lisant que ce premier chapitre, vos documents et vos pages seront immédiatement plus agréables.

90. Utopia#

🔗 https://utopia.fyi/

Beaucoup de débutants dessinent leurs pages en mettant 32 px pour les grands titres, 22 px pour les sous-titres et 14 px pour le corps de texte, au hasard, et le résultat manque totalement d'ordre. Ce petit outil définit les tailles selon une « progression mathématique » : indiquez le corps de texte sur mobile et sur ordinateur, choisissez un ratio d'échelle (par exemple une tierce majeure, 1,250), et il calcule automatiquement un jeu de variables typographiques qui s'adaptent progressivement à la largeur d'écran, espacements compris. Gratuit, sans inscription, le CSS généré est directement utilisable — ou à donner à une IA comme spécification typographique.

91. Coolors#

🔗 https://coolors.co/

L'outil de palettes le plus simple à utiliser. À l'ouverture, aucun réglage : appuyez sur la barre d'espace et une palette de cinq couleurs apparaît au hasard. Une couleur plaît ? Cliquez sur le cadenas pour la verrouiller, appuyez encore sur espace, et l'algorithme compose le reste autour d'elle. Il simule en un clic la vision d'un utilisateur daltonien et exporte les palettes en image ou en code.

92. Realtime Colors#

🔗 https://www.realtimecolors.com/

On accumule de belles palettes de cinq couleurs et, au moment de dessiner, on reste bloqué : quelle couleur pour le fond, laquelle pour les boutons, laquelle pour le texte. Cet outil résout exactement ce problème : dans la barre du bas, choisissez (ou tirez au sort) couleur de texte, de fond, primaire, secondaire et d'accentuation ; la landing page type et le tableau de bord au-dessus changent en temps réel, et un clic sur l'icône soleil/lune montre si la palette tient en mode sombre. Une fois satisfait, exportez la configuration Tailwind, les variables CSS, ou synchronisez dans Figma avec le plugin du même nom.

93. Radix Colors#

🔗 https://www.radix-ui.com/colors

La palette d'interface associée à Radix, la bibliothèque de composants open source. Il ne s'agit pas de quelques jolies palettes, mais d'un découpage de chaque couleur en 12 niveaux, avec un rôle défini pour chacun : quels niveaux servent de fond, lesquels au survol d'un bouton, lesquels aux bordures, lesquels au texte, le mode sombre étant également prévu. En suivant ces règles, la page a du mal à devenir confuse ; dire à une IA « utilise les couleurs selon les 12 niveaux de Radix » est bien plus efficace que « rends la palette plus classe ».

94. tweakcn#

🔗 https://tweakcn.com/

Aujourd'hui, beaucoup de gens qui codent du front-end avec l'IA utilisent shadcn/ui — et le résultat, c'est que des sites identiques poussent partout. C'est précisément ce qui a poussé son auteur à créer cet outil. tweakcn est un éditeur visuel pour rhabiller shadcn : couleurs, polices, rayons, ombres se règlent à gauche, tandis que les cartes, formulaires et tableaux de bord à droite se transforment en direct ; de nombreux thèmes prédéfinis sont disponibles, et une fois satisfait, on exporte le code du thème à coller dans son projet. Gratuit et open source.

9. Collecter de l'inspiration au quotidien

Le sens esthétique ne s'improvise pas. Quand une image vue en faisant défiler son téléphone ou en naviguant vous marque, rangez-la au fil de l'eau dans votre propre bibliothèque, classée. Le jour où un projet demande une direction, fouiller ses propres archives est toujours plus rapide que de chercher dans tout le web.

95. Pinterest#

🔗 https://www.pinterest.com/

La banque d'images la plus volumineuse du web, idéale pour tirer le fil : une référence qui tombe juste, on clique, puis on suit les « images similaires » en dessous, et en dix minutes on obtient des dizaines d'images du même style. Le défaut : ces dernières années, le fil d'accueil mêle beaucoup d'images IA grossières et de contenus marketing. Le conseil : créez quelques tableaux privés (Board), n'y épinglez que des images vraiment choisies, et laissez l'algorithme de recommandation se purifier progressivement.

96. Are.na#

🔗 https://www.are.na/

Un outil de collecte apprécié dans le milieu du design par beaucoup de geeks, d'architectes et d'auteurs indépendants. Son apparence est très dépouillée : pas de publicité, pas de fil algorithmique, pas même de « likes ». On crée différents canaux (Channel), on y dépose images, PDF, liens web, notes griffonnées, et on peut relier ses propres canaux à ceux, publics, d'autres personnes dans le monde. Parfait pour constituer tranquillement la documentation d'un sujet précis.

97. Cosmos#

🔗 https://www.cosmos.so/

La nouvelle génération de collection d'inspiration qui a percé ces deux dernières années chez les designers à l'international. Avec l'extension navigateur, une belle image ou vidéo vue sur X ou n'importe quel site s'enregistre d'un clic droit dans votre espace. La mise en page est extrêmement propre, et comme les premiers utilisateurs étaient surtout des créatifs à l'œil sûr, flâner dans les collections publiques de la page Discover offre une qualité d'images très élevée.

98. Savee#

🔗 https://savee.com/

Une communauté d'images minimaliste pensée pour les designers visuels. À l'ouverture, aucun titre superflu : l'écran n'est qu'un mur d'images haute définition, propre et fluide. Le contenu y est très pur, essentiellement du graphisme éditorial, de l'identité de marque, de la photographie d'avant-garde, du design typographique et du design produit. Pour trouver des références graphiques haut de gamme, c'est bien plus efficace que les plateformes généralistes.

99. It's Nice That#

🔗 https://www.itsnicethat.com/

Un média culturel créatif londonien actif depuis de nombreuses années. Il publie chaque jour quelques articles courts sur les projets récents d'illustration, de graphisme, d'animation et de photographie du monde entier. Son intérêt : au-delà des images, la rédaction sait dénicher les histoires derrière les créateurs — comment cette police étrange est née d'une erreur d'impression, à quoi pensait le réalisateur de ce court métrage absurde. Parfait à lire à l'heure du déjeuner.

100. Brand New#

🔗 https://www.underconsideration.com/brandnew/

Le site de critique spécialisé dans les refontes d'identité (rebranding) dans le monde. Dès qu'une entreprise, une université, une ligue sportive ou une marque de grande consommation un peu connue change de logo et de système visuel, il présente immédiatement l'ancienne et la nouvelle version côte à côte, avec un décryptage objectif (et parfois très mordant) : ajustements typographiques, évolution du symbole, applications réelles. En bas, les professionnels du monde entier votent et notent (payant : sans abonnement, on ne voit que la comparaison des logos). Une lecture régulière forme vite l'œil à juger la qualité d'un design de marque.

Enfin : comment vraiment utiliser ces 100 sites

On l'a dit au début : jeter cet article dans ses favoris ne sert strictement à rien.

Pour ma part, j'utilise ces sites avec quatre méthodes très simples, et à force, ça marche :

1. Ne choisir qu'un seul site par jour, y rester 15 minutes puis fermer. Surtout pas vingt onglets ouverts d'un coup dans le navigateur : au bout de cinq minutes, on s'énerve. Mieux vaut se fixer un planning fixe et sans effort : lundi matin au café, Awwwards ; mardi, Motionographer ; mercredi, Mobbin... Un seul endroit, un quart d'heure par jour : c'est ce qui s'installe vraiment dans la tête.

2. Avant de faire défiler, se forcer à dire en une phrase « ce qu'il a de bon ». Une image ou une page vous semble belle : ne vous contentez pas de l'enregistrer, arrêtez-vous dix secondes. Si elle paraît haut de gamme, est-ce parce que les blancs sont généreux ? Parce que l'écart entre titre et corps de texte est net ? Parce que le gris de fond est juste ? Ou parce que la vitesse d'apparition du bouton tombe pile ? Si vous savez résumer la raison en mots simples, la technique devient la vôtre ; sinon, ce n'est qu'un plaisir des yeux.

3. Pour ce qui vous plaît vraiment, démontez-en un et copiez-en un. Une page impressionnante : ouvrez les outils de développement avec F12, regardez l'espacement de la grille, la police latine utilisée, les paramètres de la courbe d'easing CSS. Un court métrage au rythme remarquable : téléchargez-le, mettez-le dans le logiciel de montage et comptez image par image combien de secondes dure un plan, sur quelle image se cache la transition. Une fois compris, fermez le film, créez un nouveau projet et refaites-le : un essai vaut dix tutoriels.

4. Retenir les noms des styles vus, pour en faire une force face à l'IA. Aujourd'hui, tout le monde travaille avec Claude, Cursor ou divers générateurs d'images. Si vous savez seulement dire « rends la page plus ample et plus moderne », l'IA vous donnera toujours le template le plus banal. Mais si vous avez l'habitude de parcourir les sites ci-dessus, vous pouvez donner des consignes précises : « selon les règles du DESIGN.md de Linear dans awesome-design-md, écris-moi une carte en grille bento sombre, avec une bordure et un liseré lumineux discret, un titre en Satoshi, cette géométrique sans-serif, et une animation de déploiement inspirée de la courbe d'amortissement rapide recommandée par Emil Kowalski ; une fois écrit, vérifie selon les Vercel Web Interface Guidelines ». Quand vous savez citer des noms et des méthodes précises, ce que l'IA rend est d'un tout autre niveau.

Au fond, seules les choses que vous savez nommer précisément et expliquer sont celles qui font vraiment partie de votre œil.

Ces 100 sites, je les ai sélectionnés selon mes habitudes de travail en vidéo et en image ; il en manque certainement de bons. Si vous avez aussi dans votre barre de favoris des sites précieux que vous n'osez pas supprimer, partagez-les en commentaire, on échangera.

Si cette liste vous est un peu utile, n'hésitez pas à liker et à la transmettre à des amis qui travaillent dans le même domaine. La prochaine fois que vous fixerez l'écran, sans savoir par où commencer sur un nouveau projet, vous pourrez la ressortir.

Je suis Eian, merci pour votre soutien.