gercektasarim/emotive-web-design

Conception Web Émotionnellement Adaptée

Le premier travail d'un site web n'est pas de paraître correct, mais de donner l'impression de venir du monde de son contenu. Le site d'une boulangerie doit donner l'impression d'être une boulangerie, celui d'un cabinet d'avocats doit donner l'impression d'être un cabinet d'avocats. Cette compétence combine les structures de page et les langages visuels extraits de l'analyse des 300+ modèles les plus vendus sur ThemeForest, catégorie par catégorie, avec un modèle de traduction émotionnelle.

Habiller chaque sujet avec le « modèle professionnel » par défaut aliène chaque sujet. Pour éviter cela, le processus ici demande d'abord, puis lit la référence de catégorie, puis produit 2-3 ébauches de direction et les note, code celle sélectionnée, re-note la page terminée et la corrige si elle est en dessous du seuil. Les deux notations sont effectuées avec la même fiche (references/fit-scorecard.md) ; ainsi, ce qui est « promis dans l'ébauche » peut être comparé à ce qui « sort à l'écran ».

1 Demander → 2 Lire la référence → 3 Ébauches (2-3) → noter → sélectionner
      → 4 Contenu → 5 Coder → 6 Voir + noter → seuil ? ─ non → corriger le quadrant (≤2 tours)
                                                 └ oui → livrer

Flux

1. Demander (court, en une seule fois)

Avant de commencer la conception, rassemble les informations suivantes. Si AskUserQuestion existe, utilise-le ; sinon, demande en un seul message. Ne redemande pas les réponses déjà données dans le message de l'utilisateur ; ne demande que les manquantes. Si toutes sont absentes, prends au moins les 2 critiques (catégorie, émotion cible).

1. Catégorie — dans la liste ci-dessous (plusieurs choix possibles, le premier est dominant) : corporate/service · agence/portfolio · technologie/SaaS/application · e-commerce · alimentation/restaurant/café · hôtel/voyage · santé/clinique · beauté/spa/fitness · éducation/cours · immobilier/architecture/design d'intérieur · ONG/don/religieux · mariage/événement · divertissement/musique/jeu/média · personnel/blog/CV · page spéciale (bientôt/404/page unique) · panneau d'administration/interface d'application
2. Que fait l'entreprise, que vend-elle ? (Une phrase. Plus le créneau est clair, plus le design est proche : pas « restaurant » mais « restaurant de plats faits maison de 12 tables à Beyoğlu ».)
3. Qui est le visiteur et dans quel état arrive-t-il ? (patient anxieux, CFO comparateur, couple excité, directeur artistique curieux...)
4. Que doit-il ressentir en quittant le site ? (un seul mot : en sécurité, affamé, inspiré, calme, excité, appartenant...)
5. Matériel disponible — logo/couleur/police existants ? photos existantes ? texte réel existant ?
6. Pages — seulement la page d'accueil, quelles sous-pages ? Langue ?

Si l'utilisateur dit « décide toi-même » : utilise le profil émotionnel par défaut de la référence de catégorie et indique en une ligne quelle hypothèse tu as faite lors de la première livraison.

2. Lire la référence

Lis le fichier references/categories/<catégorie>.md en fonction de la catégorie. Chaque fichier contient : l'émotion cible et l'état du visiteur, l'ordre des sections de la page d'accueil (motif ThemeForest), le langage visuel (chaleur/poids/tempo/texture/mouvement/son), les sous-pages typiques, les CTA, les types d'images, les éléments à éviter et des idées de « moment mémorable » spécifiques à la catégorie.

Catégorie	Fichier
Corporate, conseil, droit, finance, construction, services IT	corporate.md
Agence, portfolio, photo, studio d'architecture, designer	creative-portfolio.md
SaaS, logiciel, IA, landing page d'application, hébergement	technology-saas.md
E-commerce, magasin, mode, électronique, meubles	ecommerce.md
Restaurant, café, boulangerie, traiteur, marque alimentaire	food-restaurant.md
Hôtel, auberge, voyage, agence de voyages	hospitality-travel.md
Clinique, hôpital, dentiste, vétérinaire, psychologue	health-medical.md
Spa, coiffeur, cosmétique, yoga, salle de sport	beauty-wellness-fitness.md
École, cours, éducation en ligne, formateur	education.md
Immobilier, agence immobilière, bureau d'architecture, design d'intérieur	real-estate-architecture.md
ONG, don, mosquée/église, campagne politique	nonprofit.md
Mariage, invitation, anniversaire, conférence/événement	wedding-events.md
Musique, radio, film, jeu, podcast, magazine	entertainment-media.md
Site personnel, blog, CV, auteur	personal-blog.md
Bientôt, 404, en maintenance, page unique de landing	specialty-pages.md
Panneau d'administration, tableau de bord, interface d'application	admin-app-ui.md

Si le créneau n'est pas dans la liste, lis les deux fichiers les plus proches et comble le vide avec references/emotion-framework.md. La recherche elle-même (parts de marché, résultats croisés, tableau « ThèmeForest par défaut » de chaque catégorie) se trouve dans references/research-summary.md ; l'inventaire brut de 278 éléments est dans references/inventory.md — ceux-ci ne sont pas lus dans le flux normal, seulement lorsque l'utilisateur demande « qu'est-ce qui est courant dans le secteur ? » ou lorsqu'il faut expliquer d'où vient un motif.

Si l'utilisateur donne un objectif émotionnel inhabituel (par ex. « cabinet d'avocats mais chaleureux »), va au framework : le fichier de catégorie est utilisé pour la structure, le framework pour l'émotion ; en cas de conflit, l'objectif émotionnel de l'utilisateur l'emporte.

3. Produire des ébauches de direction et noter (avant de coder)

Au lieu d'écrire un seul plan et de le défendre, produis 2-3 interprétations émotionnelles différentes. Le même restaurant peut être « cuisine familiale chaleureuse », « halte déjeuner rapide du commerçant », ou « institution de quartier de 39 ans » ; chaque interprétation nécessite une palette, un tempo et un ordre des sections différents. Voir les trois ébauches côte à côte évite de choisir la première idée venue (souvent la valeur par défaut du secteur).

Que chaque ébauche soit courte, chacune avec les mêmes 10 lignes :

• Nom de l'interprétation (2-4 mots) et monde physique : matériau, lumière, tempo
• État d'entrée → État de sortie : une phrase
• Palette (4-6 hex, avec la source de chacun dans le sujet : « tuile = brique du four »)
• Typographie : 1-2 familles, rôle et raison
• Tempo : large/moyen/serré ; alignement
• Texture : type de photo, coins, ombre, grain
• Mouvement : un seul « moment »
• Ton : ton + 2-3 phrases d'exemple (titre, un CTA, un élément de menu/service)
• Ordre des sections : commence par le motif de la catégorie, organise selon le parcours émotionnel
• Moment mémorable : un seul élément
• Esquisse du hero : wireframe ASCII de 5-8 lignes

Ensuite, note les trois avec references/fit-scorecard.md (avec des phrases de preuve) et choisis le plus élevé ; si deux ébauches sont proches, combine leurs quadrants forts. Note le critère le plus bas de l'ébauche choisie : c'est là que tu feras attention en premier lors de la production.

Si l'utilisateur dit « je veux voir les ébauches » ou si le projet est important (site multi-pages, refonte de marque), montre les trois ébauches et leurs notes à l'utilisateur, laisse-lui le choix. Sinon, fais le choix toi-même ; lors de la livraison, indique en une ligne quelle interprétation tu as choisie et le nom des deux interprétations éliminées — afin que l'utilisateur puisse dire « l'autre était mieux ».

Dernière vérification : « Aurais-je écrit la même ébauche pour un autre client dans la même catégorie ? » Si oui, cette partie est par défaut ; transforme-la en une décision venant du sujet.

4. Rendre le contenu réel

S'il n'y a pas de texte réel, écris un contenu crédible venant du monde du sujet : éléments de menu réalistes, noms de services, noms de projets, fourchettes de prix, rôles d'équipe, emplacements. N'utilise pas « Lorem ipsum », « Nom de l'entreprise », « Votre slogan ici ». Le texte doit parler comme la personne qui fait ce travail (cuisinier, avocat, photographe). Pour les images de substitution, écris un alt décrivant l'objet du sujet et un titre descriptif ; garde visible ce qu'il faudra changer lorsqu'une vraie photo arrivera.

5. Produire

Si la compétence frontend-design est présente dans la session, charge-la aussi : l'échelle typographique, la liste des « AI design tell's » et le processus en deux passes (planifier → critiquer → coder) y sont compatibles avec cette compétence ; cette compétence renforce le quoi (proximité au sujet), celle-là renforce le comment (qualité de mise en œuvre).

Type de sortie selon la session :

• Si des outils Artifact et le type Design sont présents → Artifact Design/HTML, sauf si l'utilisateur demande un fichier.
• Si un fichier est demandé → un seul index.html (CSS intégré), avec sous-pages si nécessaire ; seule dépendance externe : Google Fonts.
• Si une base de code existe (Next/Vue, etc.) → conforme à la structure de composants du projet.

Base de qualité (à fournir sans le dire) : adapté au mobile, focus clavier visible, prefers-reduced-motion, contraste ≥ 4.5:1, longueur de ligne < 80 caractères, alt pour les images, pas de conflit de spécificité CSS. Sois audacieux à un seul endroit ; garde le reste discipliné.

6. Noter la page terminée, réviser si en dessous du seuil

Ne livre pas la page après l'avoir écrite ; d'abord vois et note. Ce qui était « approprié » lors de l'écriture du plan peut sembler différent à l'écran ; cette étape sert à capter cette différence.

1. Voir : si Playwright/Chrome est disponible, prends une capture d'écran desktop (1280) et mobile (390) et regarde toi-même. Sinon, lis le HTML depuis le début, comme quelqu'un qui le voit pour la première fois, sans te souvenir du plan.
2. Noter : avec references/fit-scorecard.md, une phrase de preuve pour chaque critère. Si l'outil Agent est disponible, qu'un agent séparé (qui n'a pas fait la page) donne la note — donne-lui seulement la capture d'écran/HTML, le fichier de catégorie, la phrase « état d'entrée → état de sortie » et la fiche de notation ; ne donne pas les justifications de conception.
3. Comparer : mets côte à côte la note de l'ébauche et la note de la page. Si la page est nettement inférieure, ce n'est pas la direction qui a fui, mais l'implémentation : corrige le quadrant du critère le plus bas.
4. Seuil : total ≥ 24 et aucun critère < 3. En dessous, révise et re-note. Maximum 2 tours de révision ; si toujours en dessous, la direction est fausse → passe à la deuxième ébauche de l'étape 3. Dis-le à l'utilisateur (« la première interprétation n'a pas tenu à l'écran, je suis passé à l'interprétation X »).
5. Enfin, parcours rapidement les 8 questions de la section 5 de references/emotion-framework.md.

Lors de la livraison, 3-4 phrases : l'interprétation choisie et celles éliminées, le moment mémorable, la note finale (ex. 26/30) et le critère le plus bas, l'hypothèse faite. Si l'utilisateur change l'émotion au tour suivant (ex. « plus luxueux »), n'ajuste pas toute la palette, mais quadrant par quadrant et dis ce que tu as changé ; re-note.

Ce que cette compétence n'est pas

• L'ordre des sections dans les fichiers de catégorie n'est pas une loi, mais une habitude du secteur ; si le parcours du visiteur nécessite un autre ordre, change-le et sache pourquoi.
• « Ne pas ressembler à de l'IA » n'est pas un objectif en soi ; lorsque la proximité au contenu est assurée, la sensation de modèle disparaît déjà. Le critère de proximité est la première question de la liste de contrôle.