Que fait Design Scout ?
Les sites web conçus de mémoire ressemblent à la moyenne de tous les sites : héros centré, blob dégradé, trois cartes de fonctionnalités, une police que personne n'a choisie. Les bons designers évitent cela en regardant du vrai travail avant de dessiner quoi que ce soit. Cette compétence rend cela systématique : regarder d'abord, décider avec un objectif, puis construire.
Le flux se déroule en cinq étapes. Ne sautez pas la recherche pour gagner du temps. La recherche est ce qui fait gagner du temps, car elle remplace les tours de « ça a l'air générique, recommence ».
- Entretien : connaître l'entreprise
- Scout : collecter des références réelles
- Brief : transformer les références en décisions
- Point de contrôle : l'utilisateur approuve la direction
- Construire et vérifier par rapport au brief
1. Entretien
Vous avez besoin de trois choses avant toute recherche. Demandez ce qui manque, en un seul message :
- Créneau : quel type de site web (cabinet dentaire, SaaS B2B pour la facturation, boutique streetwear)
- Nom : le nom de l'entreprise ou du produit
- À propos : ce qu'il fait ou vend, pour qui, ce qui le rend différent
Si l'utilisateur a déjà donné ces informations, ne demandez pas à nouveau.
Dans le même message, proposez ces questions optionnelles et précisez clairement qu'elles peuvent être ignorées. Chacune affine considérablement la recherche, mais aucune ne doit vous bloquer :
- Qui est le public, et quelle est l'action unique que le site doit l'amener à effectuer ?
- Trois mots pour décrire l'ambiance souhaitée (calme, fort, premium, ludique, technique...)
- Des sites qu'ils aiment ou détestent, dans n'importe quel secteur ?
- Éléments de marque existants : logo, couleurs, polices, photos ?
- Quelles pages ou sections sont nécessaires, et quelle pile technique utiliser ?
Pour tout ce qui est ignoré, choisissez un paramètre par défaut judicieux et indiquez-le dans le brief comme une hypothèse afin que l'utilisateur puisse le corriger.
2. Scout
Lisez le fichier references/sources.md maintenant. Il répertorie chaque source, ce pour quoi elle est utile, comment la rechercher et lesquelles bloquent la récupération simple.
Planifiez d'abord les requêtes. Écrivez 4 à 6 phrases de recherche avant d'ouvrir quoi que ce soit : le créneau lui-même (« site web de cabinet dentaire »), le type de page (« page d'atterrissage de réservation »), les mots d'ambiance (« éditorial calme »), et un créneau adjacent dont la culture de conception est plus forte que celle-ci (un dentiste peut apprendre des marques de soins de la peau ; un outil de comptabilité des outils de développement de style Linear). La requête adjacente est importante : si vous ne regardez qu'à l'intérieur du créneau, vous reproduisez les clichés du créneau.
Couvrez quatre axes, pas dix-huit sites. Le fichier sources regroupe les sites par axe. Utilisez au moins une source de chaque axe, plus si la première est peu fournie :
| Axe | Question à laquelle il répond |
|---|---|
| Sites web en direct | Comment les sites réels et mis en ligne dans cet espace organisent-ils une page ? |
| Motifs d'interface | Comment les bons produits résolvent-ils cette section spécifique (tarification, navigation, formulaire de réservation) ? |
| Ambiance visuelle | Quelle pourrait être l'ambiance : imagerie, texture, couleur, direction artistique ? |
| Typographie et couleur | Quelles polices et palette spécifiques ? |
Regardez également 2 ou 3 concurrents directs de l'entreprise (simple recherche web). Pas pour les imiter, mais pour apprendre ce que les visiteurs de ce créneau attendent et voir ce que tout le monde fait, afin que le design puisse s'en démarquer.
Allez sur le vrai site. Les vignettes des galeries sont petites et souvent obsolètes. Lorsqu'une entrée de galerie semble prometteuse, ouvrez le site web en direct qu'elle pointe et examinez-le. Prenez une capture d'écran si vous avez un outil de navigation ; lire le code HTML seul vous indique la structure mais pas l'ambiance.
Enregistrez chaque référence au fur et à mesure. Visez 6 à 10 références sur l'ensemble des axes. Pour chacune :
- Nom et URL (l'URL réelle que vous avez effectivement ouverte)
- Ce qui fonctionne spécifiquement : soyez concret (« titre sérif surdimensionné aligné à gauche contre une photo de produit étroite », pas « propre et moderne »)
- La chose à emprunter
- Ce qu'il faut laisser de côté
Des notes vagues produisent des designs vagues. Si vous ne pouvez pas dire ce qui est spécifiquement bon dans une référence, abandonnez-la.
Règle d'honnêteté. Ne citez que des références que vous avez réellement chargées dans cette session. N'inventez jamais un site, une URL ou une description d'une page que vous n'avez pas vue : une référence fabriquée est pire qu'aucune, car l'utilisateur lui fera confiance. Si une source est bloquée, derrière un mur de connexion ou vide, dites-le et utilisez-en une autre. Si vous n'avez aucun accès web, dites clairement à l'utilisateur que l'étape de recherche ne peut pas être exécutée et demandez s'il souhaite coller des liens ou des captures d'écran, ou procéder à partir de connaissances générales avec cette réserve indiquée.
Adaptez à la tâche. Un site complet reçoit le passage complet. Pour une section unique ou une demande « rapide », faites un passage court : 2 requêtes, 3 ou 4 références, un brief de quelques lignes. Ne tombez pas à zéro.
3. Brief
Transformez les références en décisions. Utilisez le modèle dans references/brief-template.md et enregistrez-le sous design-brief.md dans le projet, afin que la direction survive à la conversation et que le travail ultérieur puisse être vérifié par rapport à celle-ci.
Le brief doit être engageant. Chaque élément est un choix spécifique avec une raison liée à une référence ou à l'entreprise :
- Concept en une phrase : l'idée qui fait que ce site est celui de cette entreprise et de personne d'autre
- Mise en page : section par section, avec l'idée structurelle pour chacune
- Typographie : polices nommées, où chacune est utilisée, et où les obtenir (vérifiez la licence ; privilégiez les polices gratuites pour usage commercial, comme Google Fonts ou Fontshare, sauf si l'utilisateur a une licence)
- Couleur : valeurs hexadécimales avec rôles (arrière-plan, texte, accent, etc.), vérifiées pour un contraste lisible
- Élément signature : la chose dont un visiteur se souviendrait et qu'il décrirait à quelqu'un d'autre
- Imagerie et mouvement : quel type, et avec quelle retenue
- Ne fera pas : les clichés du créneau et les motifs génériques que ce design évite délibérément
Empruntez des principes, pas des propriétés. Prenez l'idée (une grille asymétrique, une association de polices, une façon de rythmer les sections) et jamais le logo, les images, les illustrations, le texte de la référence ou un clone pixel par pixel de sa mise en page. Mélangez les idées de plusieurs références pour que le résultat ne soit la copie de personne.
4. Point de contrôle
Montrez à l'utilisateur la direction avant la construction : la ligne de concept, les 3 ou 4 références les plus fortes avec liens, palette, polices, plan des sections, élément signature. Gardez-le assez court pour être lu en une minute.
Lorsque les références tiraient dans deux directions clairement différentes, proposez les deux comme A et B avec une recommandation, plutôt que de les moyenner en quelque chose de fade.
Attendez un oui ou des modifications. Construire un site entier sur une direction non approuvée est l'erreur coûteuse que cette étape existe pour empêcher. La seule exception : si l'utilisateur a dit d'emblée de simplement construire sans vérifier, continuez et montrez le brief en même temps que le résultat.
5. Construire et vérifier
Construisez selon le brief dans la pile de l'utilisateur. Si une autre compétence pour le frontend ou l'implémentation de design est disponible, utilisez-la pour la construction et traitez le brief comme son entrée.
Pendant la construction :
- Écrivez un vrai contenu pour cette entreprise, dans sa voix. Pas de lorem ipsum, ni de remplissage comme « Élevez votre flux de travail ».
- N'inventez jamais de témoignages, logos clients, statistiques, récompenses ou avis. Si une section en a besoin, placez un espace réservé clairement marqué et dites à l'utilisateur quoi fournir.
- Concevez pour mobile intentionnellement, pas comme un bureau compressé.
- Gardez le contraste du texte lisible et les éléments interactifs accessibles au clavier.
Lorsque la construction est terminée, lisez references/slop-check.md et exécutez-le sur le résultat. Ensuite, regardez-le : ouvrez la page, prenez des captures d'écran aux largeurs de bureau et de téléphone si possible, et comparez avec le brief et les références. Demandez-vous pour chaque section : cela passerait-il dans les galeries que vous venez de parcourir ? Corrigez ce qui est insuffisant avant de présenter.
Présentez le résultat avec une courte note : ce qui a été construit, quelles références ont façonné quelles décisions, les éventuels espaces réservés que l'utilisateur doit remplir, et ce que vous n'avez pas pu vérifier.