S'inspirer d'un design sans le copier
Extraire palette, échelle typographique et rythme d'espacement d'un site de référence, et savoir où s'arrête l'inspiration.
« Fais-moi un site dans le style de celui-là. » L'agent produit une copie approximative : les couleurs sont proches sans être justes, les espacements partent dans tous les sens, et le résultat sent le décalque raté.
Le problème, c'est le mot « style ». Un design qui fonctionne n'est pas un effet visuel, c'est un système : un petit nombre de couleurs, une échelle de tailles de texte, une unité d'espacement répétée, un rayon de bordure, une famille de composants. Ce système se décrit en une trentaine de valeurs.
Ce guide sert à extraire ces valeurs d'un site que tu admires, à les retravailler pour qu'elles deviennent les tiennes, et à savoir où s'arrête l'inspiration.
La limite, tout de suite
S'inspirer d'un système d'espacement ou d'une échelle typographique est une pratique courante. Reprendre une marque, un logo, un nom, des illustrations, des photos ou des textes ne l'est pas : ce sont des créations et des signes protégés. Je ne suis pas juriste, et le détail dépend du pays : en cas de doute sur un projet commercial, demande un avis. La règle de prudence tient en une phrase : prends la méthode, jamais les actifs.
Avant de commencer
- Un ou deux sites de référence, choisis pour une raison précise
- Un navigateur avec ses outils de développement
- Un agent capable d'ouvrir une page et de lire le CSS calculé
1Nommer ce que tu veux, précisément
« J'aime bien ce site » ne se transmet pas. Force-toi à finir ces phrases :
- Ce qui m'attire, c'est la densité (aéré ou compact).
- Ce qui m'attire, c'est le contraste typographique (titres très gros contre corps très sobre, ou tout au même niveau).
- Ce qui m'attire, c'est la palette (une couleur vive sur beaucoup de neutre, ou plusieurs teintes).
- Ce qui m'attire, c'est la forme (angles vifs, coins très arrondis, bordures fines, ombres marquées).
Souvent, deux réponses suffisent. Le reste, tu peux le décider autrement, et c'est même ce qui évitera le décalque.
2Relever les valeurs, pas les impressions
Demande une extraction chiffrée, pas une description. Un prompt qui donne des résultats exploitables :
Ouvre [URL]. Pour les elements de texte principaux (titres de niveau 1 a 3,
paragraphe, legende), rends-moi un tableau : selecteur, taille de police en
px, graisse, hauteur de ligne, couleur en hexadecimal. Puis liste les
couleurs de fond distinctes de la page avec leur frequence. Ne me donne pas
d'impression esthetique, seulement les valeurs mesurees.
Puis, pour le rythme :
Sur la meme page, releve les marges verticales entre sections et les
paddings internes des cartes et des boutons. Rends-moi la liste des valeurs
distinctes, triees, et dis-moi si elles suivent une progression reguliere.
Tu obtiens en général une découverte utile : les valeurs ne sont pas aléatoires. Elles tournent souvent autour d'un multiple simple, 4 ou 8 px, et les tailles de texte suivent une progression et non une liste au hasard.
3Reconstruire une échelle propre
Les valeurs relevées sont un point de départ, pas un résultat. Une page réelle contient des exceptions, des restes d'anciennes versions, des corrections à la main. Ne les recopie pas.
Demande une synthèse :
A partir de ces valeurs relevees, propose-moi une echelle d'espacement de
6 crans et une echelle typographique de 6 crans qui couvrent les usages
observes. Chaque cran doit avoir un nom et un role. Signale les valeurs
relevees qui ne rentrent dans aucun cran, et dis-moi pourquoi.
Les valeurs qui ne rentrent nulle part sont presque toujours des accidents du site d'origine. Tu peux les jeter.
4Déplacer, pour que ce soit à toi
C'est l'étape qui sépare l'inspiration de la copie, et elle est rapide.
- Change la teinte principale. Garde le rapport de contraste et la saturation relative, change l'angle de teinte. Le rythme reste, l'identité change.
- Change une police sur deux. Garde le rapport de contraste entre titre et corps, prends une autre famille.
- Change la forme. Si la référence est très arrondie, essaie des rayons discrets, ou l'inverse.
Prends ces jetons. Fais-moi trois variantes en changeant seulement la teinte
principale, et pour chacune verifie que le texte sur fond principal reste
au-dessus de 4,5:1 de contraste. Donne-moi les ratios mesures.
Le contraste ne se déplace pas gratuitement
Une teinte tournée à luminosité constante ne garde pas le même contraste perçu selon la couleur obtenue. Fais recalculer les ratios après chaque changement de palette plutôt que de supposer qu'ils suivent.
5Écrire le résultat une seule fois
Le relevé ne sert à rien s'il reste dans la conversation. Il doit devenir un fichier de variables, et les composants doivent lire ce fichier au lieu de porter des valeurs en dur. C'est le sujet du guide sur les jetons de design.
Un test simple pour savoir si c'est fait : change la valeur de ta couleur principale à un seul endroit. Si tout le site suit, le système existe. S'il faut chercher dans douze fichiers, tu as un décalque, pas un système.
Ce qu'on prend et ce qu'on ne prend pas
| On peut s'inspirer | On ne reprend pas |
|---|---|
| Une progression d'espacement | Le logo, le nom, la typographie de marque sous licence |
| Un rapport de tailles entre titre et corps | Les illustrations, photos et icônes propriétaires |
| Une idée de mise en page (deux colonnes, une colonne large) | Le texte, les slogans, les descriptions produit |
| Une intention de motion (court, discret) | Le code source récupéré tel quel |
| Une méthode d'organisation des composants | Tout ce qui pourrait faire croire que c'est le même éditeur |
La question à se poser avant de publier
Si quelqu'un ouvre ton site et celui de la référence côte à côte, doit-il penser « même goût » ou « même site » ? La première réponse est le but. La seconde est un problème, y compris quand aucun fichier n'a été copié.
Tu as d’autres ressources comme ça ?
Ce que tu viens de lire est entièrement gratuit. Une nouvelle ressource part chaque semaine dans la newsletter : guides, modèles à copier et liens triés, sans compte à créer.
Me contacter
Une question, un projet, une envie de collaborer ? Écris-moi.
Cette page est en accès libre, n’hésite pas à la partager.