Sites d'inspiration en design web : 14 galeries à ajouter aux favoris

Aucun site ne couvre tout ce dont vous avez besoin avant de construire un site web. Les 14 ci-dessous se répartissent en quatre fonctions : trouver des idées, étudier la structure des pages, emprunter des motifs d'interface éprouvés, et voir à quoi ressemble une exécution soignée. Dribbble et Behance sont bons pour la direction visuelle. Awwwards, CSS Design Awards et The FWA montrent ce qu'un jury considère comme ambitieux. Land-book et Lapa Ninja sont construits pour la structure des landing pages, et Mobbin est pour les flux de produits. Vous obtiendrez le meilleur usage de chaque site, une brève note sur son utilisation optimale, une limite honnête, puis un tableau comparatif et une méthode en quatre étapes pour transformer une pile de favoris en brief.

Pourquoi les références comptent avant de construire

Un brief vide produit un travail vague. « Moderne, épuré, fiable » décrit tous les sites jamais lancés, et un designer qui le lit comblera les lacunes avec ses propres habitudes, pas vos goûts.

Les références règlent ça. Dix captures d'écran en disent plus sur l'espacement, le ton et la densité qu'une page d'adjectifs. Elles exposent aussi les désaccords rapidement. Si le fondateur continue à enregistrer des sites sombres et en mouvement et que le responsable marketing enregistre des sites pâles et éditoriaux, vous voulez le savoir avant que quelqu'un n'ouvre Figma.

Mais il y a un hic. Des sites différents répondent à des questions différentes. Une galerie brillante pour les sections hero ne dit rien sur le paiement. Un flux rempli de superbes captures d'interface vous dit peu sur le fait que le site complet tient ensemble. La vraie question n'est donc pas « quel site est le meilleur ? » mais « qu'est-ce que j'essaie de découvrir aujourd'hui ? »

Une limite pour cet article : il s'agit de trouver de l'inspiration. Si vous cherchez des endroits où publier votre propre travail, cet aperçu des alternatives à Dribbble est une meilleure lecture, et Dribbble vs Behance vous aide à choisir une plateforme de portfolio.

Galeries vs sites de prix : qui décide ce qui entre

Les galeries curatoriales, c'est une question de goût. Quelqu'un (un rédacteur, une petite équipe, parfois une seule personne) choisit les sites qu'il aime et les publie. Godly, SiteInspire, Land-book, Minimal Gallery et httpster fonctionnent ainsi. Vous empruntez un point de vue, ce qui en est l'attrait et la limite.

Les sites de prix ajoutent un processus. Les sites sont soumis, un jury les examine, et les gagnants reçoivent des labels. Sur la page des sites gagnants d'Awwwards, vous pouvez voir le vocabulaire : Site du jour, Récompense développeur, et des honneurs de catégorie comme Produit, Portfolio et Business & Services. L'aperçu 2026 d'AIDesigner décrit le scoring Awwwards selon le design, l'utilisabilité, la créativité et le contenu. CSS Design Awards utilise aussi des catégories scorées (UI, UX, innovation).

Comment lire un score de prix

Traitez un score comme l'avis d'un jury sur des critères spécifiques, pas un jugement sur l'ensemble du site. Regardez quelle catégorie a obtenu un score élevé. Un site avec un score de créativité stellar et un score d'utilisabilité modeste vous dit quelque chose d'utile : c'est un spectacle, pas un modèle pour une page de produit.

Vérifiez aussi le label. Un Developer Award pointe vers la qualité de construction. Site of the Day pointe vers le choix du jour. Ils répondent à des questions différentes.

Pourquoi un lauréat n'est pas un template

Un site primé est construit pour gagner des prix. C'est un objectif différent de celui de vendre des forfaits, réserver des rendez-vous ou obtenir des inscriptions à une infolettre.

L'animation entraînée par le scroll peut être magnifique et charger lentement sur un téléphone de gamme moyenne. Une navigation insolite peut impressionner un jury et dérouter un visiteur novice. Un texte à faible contraste paraît élégant en capture d'écran et échoue un test d'accessibilité. Et aucun des scores ne vous dit rien sur la conversion, car un jury ne peut pas consulter les analytiques d'un site.

Volez donc l'idée, pas la construction. Prenez le rythme, l'échelle typographique, la façon dont une section se révèle. Ensuite, testez votre propre version pour la vitesse, l'utilisation au clavier et le contraste avant de vous y engager.

Les 14 sites, dans l'ordre

L'ordre ci-dessous est éditorial. Ce n'est pas une mesure de qualité ou de popularité, et je n'ai pas tenté de classer les sites selon le trafic ou l'audience.

1. Dribbble (dribbble.com)

Meilleur pour : les détails d'interface utilisateur, le mouvement et la direction visuelle.

Visitez dribbble.com

Dribbble est une large communauté de designers publiant des shots et des courtes études de cas. Parcourez par tag (un tag comme « landing page » ou « dashboard » surpasse le fil principal à chaque fois) et enregistrez les shots dans des collections au fur et à mesure. Les motion shots sont particulièrement utiles pour les micro-interactions que vous voulez décrire à un développeur.

Limite : un shot est un fragment. Il montre à quoi quelque chose ressemble, non pas s'il fonctionne sur un site entier ou sur un petit écran.

2. Behance (behance.net)

Meilleur pour : voir le raisonnement derrière un design.

Visitez behance.net

Behance est le réseau de portfolio d'Adobe, et sa force est l'étude de cas de projet complète. Lisez les slides du processus, pas juste l'image héroïque : vous trouverez le brief, les contraintes et les alternatives rejetées. Les galeries curées sont un bon raccourci si vous ne savez pas quoi chercher.

Limite : les projets varient largement en profondeur et en discipline. Le web design côtoie le branding, la photographie et l'illustration, alors attendez-vous à filtrer.

3. Awwwards (awwwards.com)

Meilleur pour : les sites ambitieux et interactifs.

Visitez awwwards.com

Awwwards gère des prix avec jury, incluant Site of the Day, Honorable Mention et Developer awards. Utilisez les labels de prix comme filtre : les lauréats du Developer Award valent la peine d'être ouverts dans les dev tools pour voir comment une transition a été construite. AIDesigner note aussi le filtrage par technologie et les collections par secteur d'activité.

Limite : les sites gagnants sont souvent des vitrines. Excellent pour les idées, risqué comme modèle direct pour un site d'entreprise riche en contenu.

4. CSS Design Awards (cssdesignawards.com)

Meilleur pour : les sites d'agence et de studio polis.

Visitez cssdesignawards.com

Les Websites of the Day ici portent des scores dans des catégories comme UI, UX et innovation. Regardez les scores de catégories individuelles plutôt que le titre, et alignez-les sur vos priorités. Si votre site est une page de génération de prospects, le score UX vous en dit plus que celui d'innovation.

Limite : les lauréats penchent vers le travail d'agence et de studio, donc les sites d'entreprise plus petits et ordinaires sont plus rares.

5. The FWA (thefwa.com)

Idéal pour : travaux expérimentaux, axés sur le mouvement et les campagnes.

Visitez thefwa.com

FWA est l'un des plus anciens prix web, et il privilégie l'aventure. Allez-y quand vous voulez voir ce qui est possible avec le mouvement, la 3D ou la narration, et quand le brief est une campagne ou un lancement. Repérez une interaction qui vous plaît et notez ce qu'elle apporte à l'histoire.

Limite : la plupart des travaux ont une forme de campagne. C'est difficile à adapter à un site avec des dizaines de pages et beaucoup de texte.

6. Godly (godly.website)

Idéal pour : des idées de défilement et de mouvement.

Visitez godly.website

Godly est une galerie curée de sites frappants présentés sous forme de prévisualisations vidéo, ce qui est justement le concept. Vous voyez le comportement du défilement sans attendre le chargement de la page. Utilisez-le pour collecter rapidement des références en mouvement, puis ouvrez les sites en direct que vous aimez pour vérifier ce qu'ils font réellement sur téléphone.

Limite : une prévisualisation vidéo montre le mouvement, pas la structure ou le texte. Vous devrez quand même cliquer pour juger la page.

7. SiteInspire (siteinspire.com)

Idéal pour : trouver des références pour un secteur spécifique.

Visitez siteinspire.com

SiteInspire est une vitrine que vous pouvez filtrer par style, type et sujet. C'est donc le point de départ judicieux quand un client dit « nous sommes un cabinet juridique » ou « nous vendons des meubles » et que vous avez besoin d'exemples pertinents en dix minutes. Combinez un filtre de sujet avec un filtre de style pour affiner vraiment les résultats.

Limite : les catégories sont propres au site. Certains sites s'y adapteront mal, et vous devrez faire appel à votre propre regard pour juger la qualité.

8. Land-book (land-book.com)

Idéal pour : sections héros et architecture des pages.

Visitez land-book.com

Land-book est une galerie de pages de destination. Ouvrez plusieurs pages de la même catégorie côte à côte et comparez comment chacune ordonne ses sections : ce qui vient après le héros, où aparaît la preuve sociale, comment l'appel à l'action se répète. Cet ordonnancement est souvent plus réutilisable que n'importe quel style visuel.

Limite : vous voyez des pages terminées sans les résultats derrière elles. Une structure bien organisée n'est pas la preuve qu'elle convertit.

9. Lapa Ninja (lapa.ninja)

Idéal pour : pages de destination SaaS et startup.

Visitez lapa.ninja

Lapa Ninja est une vaste bibliothèque de pages de destination organisée par catégorie. La liste 2026 de SaaS Landing Page renvoie aussi à ses galeries dédiées pour les polices, les sections et les images OG, utiles quand vous n'avez besoin que d'une partie de la page.

Limite : la taille joue dans les deux sens. Une grande bibliothèque récompense une question claire et pénalise le défilement sans but.

10. One Page Love (onepagelove.com)

Idéal pour : lancements sur une seule page, portfolios et événements.

Visitez onepagelove.com

One Page Love collecte des sites à une page et des modèles. Cela convient à un lancement de produit, une page de conférence ou un portfolio personnel, où l'histoire complète tient sur un défilement. Étudiez comment chaque page gère l'ordre des sections, car sur une seule page cet ordre est la navigation.

Limite : c'est un format à une page par conception, donc il n'aidera pas beaucoup avec l'architecture d'un site plus grand.

11. Minimal Gallery (minimal.gallery)

Le mieux pour : les designs éditoriaux et de studio épurés.

Visitez minimal.gallery

Minimal Gallery est sobre et guidée par la typographie. Utilisez-le pour calibrer ce que vous pouvez retirer : l'espacement, la taille des caractères et un très petit nombre de couleurs font la majorité du travail. C'est une bonne référence quand un client demande sans cesse « plus » et que vous voulez montrer à quoi ressemble « moins ».

Limite : l'esthétique est étroite. Une marque qui a besoin de densité, de grilles de produits ou de beaucoup d'informations trouvera moins de correspondances.

12. Mobbin (mobbin.com)

Le mieux pour : les modèles d'interface produit comme l'onboarding et le paiement.

Visitez mobbin.com

Mobbin est une bibliothèque de captures d'écran de véritables flux d'interface utilisateur d'applications et web. Sa valeur réside dans les séquences : voyez cinq flux d'onboarding à la suite et les modèles courants ressortent, ainsi que le choix insolite qui mérite d'être remis en question. Le guide de Colorlib le met en avant pour la recherche UX sur des produits réels.

Limite : l'accent est mis sur l'interface produit. Si vous avez besoin de pages marketing guidées par la marque et expressives, cherchez ailleurs dans cette liste.

13. httpster (httpster.net)

Le mieux pour : les risques typographiques et de mise en page.

Visitez httpster.net

httpster est une vitrine de longue date de sites distinctifs. C'est un bon endroit pour trouver un appariement de types inhabituel ou une mise en page qui brise la grille intentionnellement. Sauvegardez une seule chose par site (un style de titre, une idée de menu) au lieu de sauvegarder le site entier.

Limite : un site distinctif est un pari plus risqué à adopter. Certaines mises en page plus audacieuses auraient besoin d'ajustements pour la lisibilité ou l'accessibilité.

14. Pinterest (pinterest.com)

Le mieux pour : collecter la couleur, la typographie et la direction photographique sur un tableau.

Visitez pinterest.com

Pinterest vous permet de mélanger des captures d'écran de sites web avec de la photographie, du packaging, des intérieurs et des affiches sur un tableau d'ambiance. C'est pratique quand la direction visuelle doit venir de l'extérieur du web. Partagez un seul tableau avec l'équipe pour que tout le monde réagisse au même matériel.

Limite : ce n'est pas spécifique au web, et les épingles mènent souvent à une republication, pas au site original. Trouvez la source avant de vous fier à une référence.

Comment transformer l'inspiration en brief

Un dossier de 60 captures d'écran n'est pas un brief. C'est une ambiance. Voici la méthode que j'utiliserais pour le convertir.

1. Collectez 15 à 20 références. Pas cinq, qui est trop étroit pour montrer un motif. Pas 80, ce qui est une accumulation que personne ne lira. Mélangez les sources : quelques-unes d'une galerie, quelques-unes d'un site de prix, un couple de flux de produits.
2. Étiquetez ce que vous aimez chez chacun. Soyez précis. « La taille du titre par rapport au corps du texte. » « La façon dont le tableau de tarification est présenté. » « La photographie apaisante. » Si vous ne pouvez pas dire ce que vous aimez, supprimez la référence.
3. Séparez le goût de la fonction. Le goût, c'est la couleur, la typographie et l'ambiance. La fonction, c'est la navigation, l'ordre des sections, les formulaires et le paiement. Triez vos étiquettes en deux colonnes. Le goût peut être audacieux. La fonction doit être ennuyeuse et éprouvée.
4. Écrivez-le dans le brief pour le designer. Incluez les références, les notes étiquetées et une courte liste de ce que vous ne voulez pas (c'est souvent plus utile que ce que vous voulez). Énoncez l'objectif commercial à côté de l'objectif visuel, pour qu'un designer sache quand suivre une référence et quand l'ignorer.

Si vous souhaitez voir comment le travail terminé de conception web côté client est présenté, il y a des exemples sur la page portfolio de conception web, qui peut vous aider à juger combien de détails votre propre brief a besoin.

Tableau comparatif

FAQ

Par où commencer si je suis pressé par le temps ?

Le guide de Colorlib suggère une division simple : Mobbin (et Refero) pour la recherche UX sur des produits réels, Awwwards ou Godly pour l'inspiration visuelle, et Lapa Ninja pour les références de landing page, avec Dribbble et Behance pour une orientation créative plus large. C'est un parcours raisonnable à trois étapes pour la plupart des projets.

Y a-t-il un endroit pour rechercher des éléments individuels de page comme les barres de navigation ou les pieds de page ?

Oui. La liste Toools Design a une section sur les parties remarquables d'un site, avec des galeries pour les sections héros, les barres de navigation, les pieds de page, les images OG, les pages 404, les pages de tarification et la preuve sociale. Elles sont ciblées, ce qui en est le sens.

Y a-t-il des galeries plus récentes au-delà de ces 14 ?

Beaucoup, et de nouvelles lancent chaque année. Traitez toute nouvelle galerie avec le même test : qui sélectionne les sites, et pour quoi les sélectionnent-ils ? Une réponse claire aux deux questions est un meilleur signal que la taille de la collection.

Est-ce que je peux copier une mise en page que j'aime ?

Prenez le principe, pas la page. L'ordre des sections, la logique d'espacement et le contraste typographique sont des idées que vous pouvez remanier. Copier les illustrations, le code ou l'identité visuelle distinctive d'un site est une autre affaire, et cela produit aussi un site web oubliable.

Choisissez le site pour la question que vous posez : Mobbin pour les flux, Land-book pour l'ordre des pages, Dribbble pour les détails. La mise en garde la plus importante est qu'aucune de ces galeries ou ces scores de prix ne vous dit comment un site se comporte, s'il est accessible ou s'il convertit, alors vérifiez votre version par rapport à ces critères avant sa mise en ligne.

Les galeries vous montrent des écrans uniques. Pour voir les sites terminés côte à côte avec ce que chacun coûte en temps de chargement, lisez 64 sites web magnifiques, vérifiés en direct et testés en vitesse.