Conception Web Anti-Slop

Que fait Conception Web Anti-Slop ?

La plupart des sites générés par IA se ressemblent car le modèle comble chaque décision ouverte avec la réponse statistiquement la plus courante : Inter, un dégradé indigo-violet, des cartes arrondies-2xl avec ombres douces, un héros centré avec un badge pilule, trois cartes de fonctionnalités avec des icônes Lucide. Chaque choix est correct pris isolément. Ensemble, ils signifient « personne n'a rien décidé », et les visiteurs le perçoivent immédiatement.

Les designers professionnels n'évitent pas ces éléments parce qu'une règle le dit. Ils les évitent car ils partent du sujet (l'entreprise, le contenu, le public) et chaque choix découle de ce dernier. Votre travail consiste à fonctionner de la même manière. La liste d'interdiction ci-dessous est un filet de sécurité, pas la méthode.

Le processus

1. Rédiger un brief de design avant tout code

Consacrez quelques phrases à cela, soit dans votre raisonnement, soit en le montrant à l'utilisateur si l'ampleur est importante. Remplissez :

• Sujet : de quoi s'agit-il, à qui est-ce destiné, que doivent-ils faire sur la page ?
• Caractère : trois adjectifs spécifiques à ce sujet. « Moderne, propre, élégant » décrit tout, donc ça ne compte pas. Quelque chose comme « poussiéreux, chaleureux, légèrement geek » pour une librairie d'occasion, ou « clinique, calme, précis » pour un laboratoire.
• Une référence du monde réel : une tradition de design physique ou historique dont la page s'inspire. Exemples : un horaire de train, une affiche suisse des années 1970, un sachet de graines, une étiquette de musée, un catalogue de matériel, une une de journal, un fanzine, un menu de restaurant, un carnet de terrain, un ancien manuel logiciel, une pochette de disque. Choisissez en fonction du sujet, ne prenez pas la même à chaque fois par défaut.
• Palette : 3 à 5 valeurs hexadécimales réelles, et leur provenance (le matériau du produit, la marque, une photo, la référence ci-dessus).
• Niche et type : nommez la niche (boulangerie, cabinet d'avocats, outil de dev, salle de sport, mariage…), puis choisissez les polices dans la ligne de cette niche dans references/fonts-by-niche.md, en sélectionnant l'option qui correspond à vos trois adjectifs. Écrivez une ligne expliquant pourquoi elle convient (« Alfa Slab One : elle ressemble à l'enseigne peinte sur un mur de brasserie »). Si vous ne pouvez pas écrire cette ligne, vous n'avez pas encore choisi.
• Un détail signature : un geste mémorable unique qui n'appartient qu'à ce site. Par exemple, des prix écrits comme sur un tableau noir, des numéros de section dans la marge comme un document juridique, une grille réglée comme du papier millimétré, une photo utilisée en plein format et non recadrée.

Si l'utilisateur vous a déjà donné une marque, des couleurs, des polices ou une référence, ceux-ci prévalent. Construisez le brief autour d'eux.

2. Construire à partir du contenu vers l'extérieur

• Utilisez le contenu réel quand vous l'avez. Sinon, rédigez un texte de remplacement plausible et spécifique pour ce sujet (des noms de produits réalistes, des chiffres qui sonnent vrais, une adresse crédible), pas du remplissage marketing générique.
• Laissez le contenu décider de la mise en page. Un menu veut des colonnes et des points de conduite. Un portfolio veut de grandes images et peu de chrome. Un site de documentation veut une barre latérale et un texte dense. Ne versez pas chaque sujet dans le même modèle de page d'atterrissage.
• Variez la structure des sections. Les sites réels ont une longue section de texte, un tableau dense, une image qui brise la grille. Ils ne répètent pas « titre + sous-titre + 3 cartes » huit fois.

3. Auditer avant de livrer

Vérifiez votre sortie par rapport à references/slop-catalog.md (lisez-le la première fois que vous utilisez cette compétence dans une session ; c'est la liste complète avec raisons et alternatives). Si le projet est sur le disque et que Node est disponible, exécutez également le scanner :

node <skill-path>/scripts/slop-check.js <file-or-folder>

Il signale les indices courants (dégradés, ombres lumineuses, polices surutilisées, émojis paillettes, texte à la mode) avec fichier et ligne. Tous les signalements ne sont pas erronés. Un dégradé dans une carte météo ou une police explicitement demandée par l'utilisateur est acceptable. Corrigez chaque signalement ou conservez-le délibérément avec une raison.

La liste d'interdiction courte

Voici les indices les plus forts. Évitez-les sauf si l'utilisateur les demande ou si la marque l'exige vraiment. Le catalogue contient la liste complète.

Couleur

• Dégradés violet / pourpre / indigo / bleu / rose, sur les fonds, boutons, bordures ou textes
• Texte en dégradé (background-clip: text) sur les titres
• Accents néon (cyan électrique, magenta, vert acide) sur des fonds quasi noirs
• « Orbes » floues colorées, aurores ou blobs de dégradé en maille derrière le héros
• Palette par défaut de Tailwind utilisée telle quelle (indigo-600, slate-900, violet-500) comme couleurs de marque

Surfaces et effets

• Ombres lumineuses colorées (box-shadow: 0 0 40px rgba(139,92,246,.5)) et shadow-2xl sur tout
• Verre dépoli : backdrop-blur avec remplissages blancs translucides et border-white/10
• Chaque élément dans sa propre carte arrondie, avec le même grand rayon (rounded-2xl/3xl) partout
• Motifs de points ou de grille avec un masque de dégradé radial
• Bordures de dégradé animées, balayages chatoyants, lignes « faisceau », projecteur suivant le curseur
• Chaque carte qui s'élève au survol (translateY(-4px) + ombre plus grande)

Typographie

• Inter, Poppins, Montserrat, Plus Jakarta Sans, DM Sans, Outfit, Sora, Manrope, Space Grotesk, Geist ou Instrument Serif choisis par réflexe. Ce sont de bonnes polices. Le problème est de les choisir sans raison.
• Toute police qui ne correspond pas à la niche, ou au cliché évident de la niche (voir references/fonts-by-niche.md)
• Un titre de héros avec un mot en dégradé ou en italique serif (« Construisez plus vite »)
• Une petite étiquette « sourcil » en majuscules espacées au-dessus de chaque titre de section
• Tout centré

Mise en page

• Le modèle : navigation collante → héros centré avec une pilule « ✨ Nouveau » → deux boutons → logos en niveaux de gris « Ils nous font confiance » → cartes de fonctionnalités 3-en-ligne avec icônes dans des carrés arrondis → bande de statistiques → cartes de témoignages avec 5 étoiles → tarification à 3 niveaux avec celui du milieu en évidence → FAQ accordéon → bannière CTA en dégradé → pied de page à 4 colonnes
• Grilles bento comme moyen par défaut pour afficher les fonctionnalités
• Capture d'écran de tableau de bord factice inclinée avec perspective

Contenu et rédaction

• Emojis comme icônes ou puces (🚀 ✨ ⚡ 💡 🔥), et l'icône paillettes pour tout ce qui est « IA »
• « Libérez la puissance de », « Boostez », « Élevez », « Sans couture », « Sans effort », « Révolutionnez », « Nouvelle génération », « plateforme tout-en-un », « conçu pour l'avenir », « faites passer X au niveau supérieur »
• Slogans en tricolon : « Rapide. Simple. Puissant. »
• Statistiques inventées (10k+ utilisateurs, 99,9% de disponibilité) et témoignages fictifs (« Sarah J., CEO chez TechCorp »)

Animation

• Apparition par fondu au défilement sur chaque élément, en décalé
• Éléments flottants/ballottants, titres en machine à écrire, nombres qui défilent

Que faire à la place

Couleur. Commencez par des neutres, mais donnez-leur une température (papier chaud #f4efe6, gris froid #e8eaec, encre #1b1a17) au lieu de #fff pur et du gris Tailwind. Ajoutez un accent et utilisez-le avec parcimonie, pour les liens, l'action principale et un ou deux points forts. Tirez-le du sujet : terre cuite pour un atelier de céramique, orange signal pour une application de transport, vert bouteille pour une pharmacie. Utilisez des remplissages unis. Si un dégradé convient vraiment (un ciel, une carte de chaleur), rendez-le subtil et lié au sens.

Typographie. Choisissez les polices par niche, jamais au hasard ou par habitude. Demandez ce que cette entreprise aurait vraisemblablement imprimé sur son enseigne, son menu, son étiquette ou son en-tête de lettre, et trouvez la police qui correspond. Une brasserie et un cabinet d'avocats ne devraient jamais partager une police par accident. Lisez references/fonts-by-niche.md avant de choisir. Il couvre environ 40 niches avec plusieurs options chacune, les clichés auxquels l'IA recourt pour chaque niche (Orbitron pour le jeu, Playfair pour le luxe, Bebas + Montserrat pour les salles de sport), et les polices pour les scripts non latins comme l'hindi et le tamoul. La pile de polices système (system-ui, -apple-system, "Segoe UI", sans-serif) est un choix légitime pour les outils et les tableaux de bord. Une famille suffit souvent. Deux au maximum. Construisez la hiérarchie avec la taille, le poids et l'espacement, et alignez le corps du texte à gauche avec une mesure lisible (~60–75 caractères).

Surfaces. Séparez les choses par des espaces blancs, des filets (1px solid dans un neutre plus foncé) et des changements de fond plutôt que par des ombres. Si vous utilisez une ombre, faites-la petite, neutre et décalée comme une vraie lumière (0 1px 2px rgb(0 0 0 / .08)). Choisissez un rayon délibérément : 0 pour un style éditorial ou industriel, 2–6px pour la plupart des IU, entièrement arrondi uniquement pour les pilules et les avatars. Tout n'a pas besoin d'un conteneur.

Mise en page. Utilisez l'asymétrie : une colonne de texte large avec un encadré étroit, une image qui sort de la grille, un héros aligné à gauche. Laissez la densité correspondre au contenu. La tarification peut être un tableau simple. Les fonctionnalités peuvent être une liste avec des phrases au lieu de cartes. Laissez de côté les sections dont le sujet n'a pas besoin. Un site de boulangerie n'a pas besoin d'une bande de statistiques.

Interaction. Soulignez les liens. Les états de survol changent la couleur ou soulignent, pas la position. Donnez aux boutons un état appuyé/au focus clair. N'utilisez l'animation que là où elle explique quelque chose (un menu qui s'ouvre, un changement d'état), et respectez prefers-reduced-motion.

Imagerie. Les vraies photos de la chose réelle battent toute illustration. Sans elles, utilisez des espaces réservés honnêtes (un cadre neutre étiqueté « photo : devanture, lumière du matin ») plutôt que des blobs 3D de stock, des personnages isométriques ou de l'art IA. Les diagrammes simples, les cartes, les photos de produits et les compositions uniquement typographiques paraissent tous humains.

Rédaction. Dites concrètement ce que la chose fait, dans les mots simples que le propriétaire utiliserait au comptoir. « Pain au levain frais tous les matins dès 7h, fermé le lundi » bat « Vivez une expérience artisanale d'excellence ». Omettez une statistique plutôt que d'en inventer une.

Ne remplacez pas un cliché par un autre

Lorsqu'une valeur par défaut est interdite, la réponse la plus courante suivante devient la nouvelle valeur par défaut : Space Grotesk au lieu d'Inter, sarcelle au lieu de violet, « brutaliste » avec une épaisse bordure noire et un surlignage jaune sur chaque site. Si deux sujets différents que vous concevez finissent par se ressembler, vous travaillez à partir d'un modèle, pas d'un brief. Revenez à l'étape 1 et laissez le sujet s'imposer davantage.

Quand l'utilisateur veut le look « slop »

Certains utilisateurs veulent l'aspect SaaS brillant, ou une marque est vraiment violette avec des dégradés. Suivez les instructions explicites et les directives de la marque. Elles remplacent cette compétence. Vous pouvez toujours appliquer la retenue là où elle est libre : un dégradé au lieu de cinq, un texte réel au lieu de mots à la mode, un appariement de polices délibéré.