Explorer
KNOW-PAT-209

Choisir sa source d'inspiration web selon le type de projet

Domaine
web-uiux
Type
pattern
Priorité
P2

Choisir sa source d'inspiration web selon le type de projet

Problème

Piocher systématiquement dans la même galerie (ex. Awwards ou Godly uniquement) crée un biais stylistique et on rate les références adaptées au contexte client (SaaS, e-commerce, portfolio, dark UI, etc.).

Solution

Associer chaque type de projet à 2-3 galeries d'inspiration ayant la meilleure densité de références pertinentes. Utiliser la source comme ancrage, pas comme template.

Quand l'utiliser

  • Au début de la phase de discovery, avant de proposer des directions créatives.
  • Quand le client ou le produit impose une contrainte (CMS, dark mode, one-page, etc.).
  • Quand on veut éviter les esthétiques génériques IA (KNOW-ANT-WEB-002).

Quand NE PAS l'utiliser

  • Si le projet a déjà un design system validé : inutile de chercher de nouvelles directions.
  • Si le délai est très court : privilégier une seule source connue.

Matrice de sélection

Type de projet Sources principales Sources complémentaires
Portfolio créatif Godly, Hoverstat.es Awwwards, Httpster
SaaS / Produit Lapa Ninja, Curated Design Dark Mode Design, Awwwards
E-commerce Awwwards, Best Website Gallery Minimal Gallery, SiteInspire
Landing page Lapa Ninja, One Page Love Awwwards
Identité forte / expérimental Brutalist Websites, Hoverstat.es The FWA, Httpster
Dark UI / Dashboard Dark Mode Design Httpster, Awwwards
Minimaliste / éditorial Minimal Gallery, Siiimple SiteInspire
Choix typographique Typewolf Awwwards, SiteInspire

Méthode en 3 étapes

  1. Qualifier le projet : type de site, stack imposée, esthétique cible, audience.
  2. Choisir 2-3 sources dans la matrice ci-dessus.
  3. Extraire 3-5 patterns concrets (typo, layout, couleur, micro-interaction) et les noter dans DESIGN.md (KNOW-PAT-144).

Exemple

Correct

Projet : dashboard analytics B2B en dark mode. Sources choisies : Dark Mode Design + Awwwards (filtre Dashboard/Tech). Patterns extraits : sidebar glassmorphism (KNOW-PAT-112), status dots (KNOW-PAT-122), skeleton loading (KNOW-PAT-117).

Incorrect

Projet : dashboard analytics B2B. Source unique : Godly (feed généraliste). Résultat : direction trop portfolio/artistique, pas assez de patterns utilitaires.

Tests

  • Vérifier que les références choisies ont au moins 5 exemples pertinents pour le projet.
  • Confirmer que les patterns extraits sont compatibles avec la stack technique (KNOW-PAT-197).
  • Valider que la direction n'est pas un copié-collé visible de la référence.

Références

  • REF-004 — Catalogue de galeries d'inspiration web design
  • KNOW-PAT-146 — Référence Mobbin/Godly avant de designer
  • KNOW-PAT-188 — Guide d'utilisation du Godly Corpus
  • KNOW-PAT-189 — Godly Corpus, index des thèmes de design web
  • KNOW-PAT-193 — Workflow unifié de design web
  • KNOW-PAT-144 — DESIGN.md mémoire design par projet
  • KNOW-ANT-WEB-002 — AI slop mesurable