Romain Deschambres
Avant de concevoir ton site web, il y a toujours cette phase un peu flottante — celle où tu cherches l’inspiration.
Tu veux un design cohérent avec ton activité, qui te distingue de tes concurrent·es. Tu te lances dans une recherche sans trop savoir comment l’organiser.
Trente minutes plus tard, tu as 20 onglets ouverts dans ton navigateur. Tu finis par douter… et par ne plus vraiment savoir ce que tu cherchais.
OK, on va revoir les bases.
Avant de plonger dans la liste que je t’ai préparée, commençons par la base : organiser ton inspiration.
Parce que sauvegarder des sites web qui t’inspirent, c’est bien.
Mais faire un vrai moodboard, c’est beaucoup mieux, tu ne trouves pas ?
Un moodboard, c’est une planche d’inspiration.
C’est le meilleur moyen de visualiser et d’organiser l’univers graphique que tu veux pour ton site web.
On y retrouve les éléments de base : palettes de couleurs, typographies, types de visuels…
Mais aussi des éléments plus spécifiques au web : façons d’organiser une navigation ou une grille tarifaire, effets d’animation, présentations d’articles de blog, etc.
C’est aussi une étape essentielle pour t’assurer d’être aligné·e avec la personne qui va réaliser ton site web.
Avant de commencer à travailler ensemble, mieux vaut s’assurer qu’on parle le même langage.
Sinon, gare aux surprises 😱
Tout le monde n’utilise pas Figjam, mais c’est l’outil que moi j’utilise.
Il est gratuit dans sa version de base, donc tu peux facilement le tester.
Sinon, Miro ou Freeform font très bien l’affaire. Et si tu préfères, tu peux même t’en sortir avec un fichier Word.
L’important, c’est l’organisation : un moodboard n’est pas une simple collection d’images, mais un outil de travail.
Voilà ce que j’aime y retrouver :
Figjam, pour moi, c’est l’outil parfait pour ça : je fais mes captures d’écran, je les importe, je les annote et j’ajoute les liens pour que mes client·es puissent s’y rendre facilement.
Figjam est un des outils proposé par la suite Figma. C’est un tableau blanc collaboratif. Il s’utilise parfaitement en phase de recherche pour débuter un projet.
Avant de chercher des inspirations, note l’objectif principal à atteindre avec ton site web.
Parce qu’une fois plongé·e dans les sites d’inspiration, on oublie vite pourquoi on est là.
Dans mon fichier Figjam, j’écris souvent en gros et en gras l’objectif principal. Je précise aussi la cible ou le ton souhaité pour le site web.
Voici une liste pleine d’exemples intéressants :
Le but, c’est de donner une direction à ta recherche visuelle.
On ne cherche pas juste “un site web beau”, on cherche un site web qui répond à un besoin précis.
Je me rends sur les sites web d’inspiration (la liste arrive juste après 👇).
Je commence par cibler les sites web dans le même domaine que le projet, puis j’élargis.
Je note tous les liens qui m’intéressent dans mon fichier Figjam.
Mieux vaut 5 sites web vraiment pertinents que 20 dont la moitié ne te servira à rien.
La qualité avant la quantité.
Pour chaque site web, je capture uniquement les éléments qui m’inspirent :
la section “hero”, le menu, un effet d’animation, une mise en page d’article…
J’organise ensuite mes captures soit par site, soit par thématique.
Par exemple, je peux comparer différentes manières de présenter une navigation ou un appel à l’action.
N’hésite pas à ajouter des annotations : ce que tu aimes, ce que tu trouves trop chargé, les éléments que tu pourrais adapter à ton projet.
Une fois les inspirations rassemblées, j’essaie quelques associations de couleurs et de polices.
Mon outil préféré, même s’il est très simple, c’est Coolors.
En quelques secondes, tu peux générer une palette et tester ce qui fonctionne ensemble.
Coolors est un outil de génération de palette de couleurs. Il intègre également un outil de vérification des contrastes. Sauvegarde le lien dans tes favoris.
Quand ton moodboard est prêt, partage-le à ton ou ta designer, ou à tes partenaires de projet.
C’est souvent à ce moment-là que les idées s’affinent et que les préférences se précisent.
Discute, échange, ajuste.
Un bon moodboard, c’est celui qui permet d’engager la discussion.
J’en ai sélectionné 17. Pas 18, pas 16. Et c’est déjà pas mal, en vrai.
Chacun de ces sites aborde le webdesign sous un angle différent. Certains sont des incontournables, très complets et généralistes. D’autres sont plus spécialisés, parfois centrés sur l’éco-conception, ou sur des éléments précis d’un site web comme la navigation, le footer ou les animations.
L’idée n’est pas de tout parcourir d’un coup, mais de trouver ceux qui résonnent avec ton projet de création de site web. Chaque site web que j’ai répertorié a ses points forts et ses limites.
Quand tu navigues sur ces plateformes, rappelle-toi : tu ne cherches pas à copier. Tu cherches à repérer des éléments qui t’inspirent. Ça peut être une mise en page, une palette de couleurs, une animation, une association typographique.
Bref, tous ces petits détails qui t’aideront à affiner ton futur design.
Je te conseille d’explorer tranquillement, de sauvegarder ce qui te plaît, et d’intégrer ces inspirations à ton moodboard Figjam. Ou avec un autre outil. 😊
Et maintenant, on passe à cette fameuse sélection.
S’il ne devait en rester qu’un, ce serait celui-ci. Awwwards est la référence absolue quand on cherche de l’inspiration en webdesign. Lorsque j’étais en formation, je l’utilisais déjà. Et aujourd’hui, la plateforme s’est encore étoffée.
L’intérêt, c’est qu’elle met en avant de vrais sites web, et non pas des maquettes.
On y trouve donc des exemples concrets, fonctionnels, utilisés par de vraies marques.
Attention, je te mets en garde. Tout n’est pas forcément à reproduire. Awwwards valorise beaucoup les sites riches en animations et effets spectaculaires. C’est inspirant, mais pas toujours adapté à tous les projets.
L’idée, c’est de s’en servir pour nourrir ta culture visuelle, pas pour copier un effet wow.
Awwwards est un site web de référence pour la recherche d’inspiration en webdesign.
J’ai beaucoup utilisé Behance lorsque j’étais étudiant et que j’ai débuté en freelance. Pour m’inspirer, mais aussi pour présenter mes propres projets. Je l’ai un peu délaissé depuis, mais ça reste une ressource précieuse.
Behance ne se limite pas au webdesign : on y trouve aussi du graphisme, de la photo, du motion design, du branding… C’est ce qui fait sa richesse.
En revanche, de nombreux projets web ne sont pas des sites web réels mais des concepts ou des maquettes. C’est la principale différence avec Awwwards.
Behance reste donc excellent pour l’inspiration visuelle, mais pas toujours pour l’analyse UX.
Behance est une plateforme créative où les designers du monde entier partagent leurs projets de design, de graphisme et de webdesign.
Très proche de Behance dans l’esprit, Dribbble est une plateforme assez généraliste. C’est un lieu de partage pour les designers qui veulent montrer leurs créations et leurs détails d’interface.
On y trouve énormément de micro-interactions, d’icônes, de boutons, de typographies et d’exemples d’UI.
Dribbble est aussi une vitrine pour les freelances.
Dribbble est un espace communautaire dédié aux designers, idéal pour découvrir des interfaces, icônes et concepts visuels inspirants.
Tout le monde connaît Pinterest. Ce n’est pas à proprement parler un site d’inspiration web, mais c’est un excellent point de départ si tu l’utilises déjà.
Tu y trouveras une grande variété de contenus : maquettes, visuels de sites, photos, palettes de couleurs…
Le piège, c’est que certaines références n’envoient pas vers de vrais sites web. Et sincèrement, je trouve que c’est un peu une usine à gaz.
Pinterest reste très utile pour ouvrir ton regard, s’imprégner de différents univers graphiques, des packagings, des affiches, des typographies…
Bref, tout ce qui nourrit ta sensibilité visuelle.
Pinterest est un outil visuel incontournable pour rassembler des idées de design, de palettes de couleurs ou de compositions graphiques.
C’est le premier site d’inspiration éco-conçue que j’ai découvert. Son but : montrer qu’on peut concevoir des sites légers, sobres et bien pensés, tout en gardant un design inspirant.
La sélection n’est pas très régulièrement mise à jour, et la qualité est parfois inégale, mais il y a souvent de vraies pépites.
C’est un bon point de départ si tu veux explorer une approche plus minimaliste et responsable du web.
Lowww.directory met en avant des sites web sobres, performants et accessibles, centrés sur l’éco-conception numérique.
Dans la même lignée, Lowwwcarbon met en avant les sites les plus légers du web, avec un classement basé sur leur empreinte carbone.
L’intérêt, c’est de voir concrètement comment des designers arrivent à concilier esthétique et performance. Moins d’animations, moins de scripts, mais une clarté et une cohérence exemplaires.
Ces exemples montrent qu’on peut faire beau, utile et responsable à la fois.
Lowwwcarbon recense des sites à faible empreinte carbone, conçus pour allier esthétique, simplicité et performance environnementale.
Impossible de ne pas citer Lapa Ninja.
À la base, le site référençait surtout des landing pages, mais il s’est largement élargi. On y trouve désormais différentes sortes de pages web, mais qui répondent toujours à des soucis de structures claires et efficaces pour le réferencement SEO et la conversion.
C’est l’endroit idéal si tu veux créer un site web qui convertit. Tu peux filtrer par style, secteur ou type de page.
Les exemples sont variés et surtout concrets. Ça en fait une ressource incontournable. Je pourrais presque dire que c’est ma ressource préférée de cet article. 🫣
Lapa Ninja propose une vaste collection de landing pages et de pages d’accueil sélectionnées pour leur clarté et leur efficacité.
Land-book est une autre excellente base d’inspiration. Je l’utilise beaucoup quand je cherche des idées pour un élément précis : un footer, une section tarifaire, une barre de recherche…
L’interface permet de filtrer les résultats selon le type de contenu, ce qui rend la recherche parfois plus efficace. Il existe une version gratuite très complète, et une version payante si tu veux aller plus loin dans tes explorations. Pour être honnête, je ne sais pas bien qui paie.
Landbook est une bibliothèque d’inspiration qui permet d’explorer des exemples concrets de sites web selon leur type ou leur structure.
Codrops n’est pas un tellement un site web d’inspiration à proprement parler, mais une ressource éditoriale incontournable.
Leur rubrique Websites Roundups met régulièrement en avant des sites créatifs et originaux.
Ce que j’aime : c’est qu’il y a souvent des case study mis en avant. Parfois, c’est bien d’avoir une analyse complète sur la création ou la refonte d’un site web. Ça permet de comprendre un peu mieux les contraintes et les méthodes de conception en webdesign.
C’est une mine d’or pour affiner ta culture en webdesign. Surtout si tu es designer ou si tu étudies la direction artistique ( Ça c’est pour voir si mes étudiant·es de Brassart me lisent 😆).
Codrops publie régulièrement des sélections commentées de sites web créatifs et innovants.
Le concept est simple : un site qui recense d’autres sites d’inspiration web. La sélection est pointue. Chaque projet mis en avant a été choisi pour son originalité ou sa qualité d’exécution.
C’est une ressource très intéressante qui se développe. Même s’il manque un peu de contenu encore.
Site of sites est une plateforme qui recense les meilleurs sites d’inspiration web, soigneusement sélectionnés par des designers.
Cosmos est un peu le Pinterest du webdesign. On y retrouve le même fonctionnement. La possibilité de créer des dossiers avec des référence, de les partager avec ses client·es ou ses collègues. On y trouve des projets complets : charte graphique, palette, typographies, maquettes, UI kits…
Je ne l’ai pas tellement utilisé, parce que j’ai déjà d’autres manières de m’organiser. Mais ça vaut le détour.
Cosmos est un site d’inspiration centré sur le web et qui reprend Pinterest pourla manière d’organiser ses références.
On entre ici dans la catégorie des sites ultra spécialisés.
Navbar Gallery répertorie uniquement des systèmes de navigation : menus fixes, headers animés, sidebars, mega-menus, menus plein écran…
C’est une ressource hyper utile pour travailler les détails d’ergonomie et d’expérience utilisateur.
Si tu as besoin de penser « out of the box », toutes les variations possibles de navigation sont ici.
Navbar gallery est une galerie spécialisée dans les menus et systèmes de navigation, idéale pour trouver de nouvelles idées.
Et évidemment, l’équivalent existe pour les footers !
Footer Design met à l’honneur cette section trop souvent négligée, alors qu’elle joue un rôle clé dans la perception d’un site web.
J’aime bien cette ressource parce qu’elle montre à quel point un bon footer peut conclure une expérience utilisateur sur une note forte.
Après tout, c’est souvent la dernière chose qu’un visiteur voit avant de partir. Autant laisser un joli souvenir. 😊
Footer Design rassemble des exemples de footers créatifs et bien pensés, pour inspirer la conception des bas de page.
Adfolio recense principalement des publicités et landing pages issues de campagnes réelles (Meta, LinkedIn, etc.). C’est un site à forte orientation marketing : parfait si tu veux comprendre comment le design sert la conversion.
En terme de design, je m’y retrouve moins. Mais j’aime toujours quand on mélange un peu les supports entre réseaux sociaux et site web. Car mine de rien, ça se travaille ensemble si on veut une identité harmonieuse.
Comme son nom l’indique (si on y rajoute les voyelles), Scrnshts Club regroupe des captures d’écran d’interfaces réelles.
C’est un gain de temps énorme si tu veux analyser des applications qui nécessitent d’être téléchargées et installées.
Tu peux y trouver de l’inspiration pour concevoir une app ou une interface mobile.
Scrnshts compile des captures d’écrans d’applications mobiles, parfaites pour analyser la structure et la hiérarchie visuelle d’un design.
Avec Designspells, on plonge dans un univers plus animé et précis.
Le site web regroupe des designs calibrés au millimètre, souvent artistiques — et c’est ce qui fait le charme du site web.
C’est une excellente ressource pour trouver des idées d’animations, notamment pour des CTA, des formulaires ou des transitions entre pages.
Il y a vraiment de quoi nourrir les amateurs et amatrices d’interactions et d’effets wow ou ultra subtils.
Design spells est une galerie de sites originaux et expérimentaux, axée sur l’animation et la créativité interactive.
Tout est dans le nom.
Dark Design rassemble uniquement des sites web conçus en mode sombre. C’est la référence parfaite si tu veux explorer cette esthétique.
C’est aussi très utile pour comprendre les bonnes pratiques de contraste et de lisibilité dans les interfaces sombres.
Parfait pour les projets modernes, élégants ou plus orientés tech.
Dark Design réunit une sélection de sites web en mode sombre, pour s’inspirer de designs élégants et contrastés.
Pourquoi pas !
On n’est jamais à l’abri de tomber sur une pépite. Cette liste pourrait très bien s’allonger avec le temps.
Et si tu as tes propres sources d’inspiration, partage-les-moi : je serai ravi de les découvrir et de les ajouter.
L’inspiration, ça se cultive aussi à plusieurs. 😉
