Itérer et fuir le générique

Pourquoi tout finit par se ressembler

Ouvre dix landing pages générées par IA sans direction : tu verras dix fois la même page. Dégradé violet-bleu, emoji fusée dans le titre, trois cartes aux ombres molles, badge « AI-powered ». Ce n'est pas un hasard : un modèle d'IA produit ce qui est statistiquement probable dans ses données d'entraînement. Sans contrainte, il converge vers la moyenne de tout ce qu'il a vu — et la moyenne, par définition, ne ressemble à rien de particulier.

Comprendre ce mécanisme change ta posture : le générique n'est pas une fatalité de l'outil, c'est le résultat par défaut en l'absence de direction. Tout ce que tu as construit dans ce cours — le brief avec interdits, le design system, les itérations chirurgicales — est précisément l'ensemble des contraintes qui forcent le modèle à sortir de sa moyenne. Ce dernier chapitre ajoute l'étage final : la critique exigeante et l'audace assumée.

Il y a aussi un enjeu de marché : à mesure que tout le monde génère des interfaces, le coût du « correct » s'effondre. Ce qui devient rare — donc précieux — c'est la personnalité : un design dont on se souvient, qu'on attribue à une marque précise. Pour Studio Mango, c'est l'argument de vente face aux clients qui pourraient « demander à l'IA eux-mêmes » : tout le monde peut obtenir une page correcte ; peu savent la faire monter en gamme.

Un feedback qui fait avancer

« C'est pas terrible » ne sert à rien — ni à un humain, ni à une IA. Le modèle ne sait pas ce qui te déplaît : il va changer des choses au hasard, parfois en abîmant ce qui marchait. Le feedback efficace est chirurgical : « le contraste titre/fond est trop faible », « le rythme vertical est irrégulier entre les sections 2 et 3 », « le CTA se perd au milieu de trois éléments qui crient aussi fort que lui ». Plus le feedback est précis, meilleure est l'itération.

La structure qui marche tient en trois temps, déjà rencontrée au chapitre 3 : zone (où ?), problème (quoi, en vocabulaire de design ?), direction (vers quoi ?). Ajoute un quatrième réflexe pour les sessions longues : dire aussi ce qu'il faut préserver. « La hero est parfaite, n'y touche plus ; concentre-toi sur la section pricing » protège tes acquis — sans cela, une IA qui régénère peut « améliorer » ce qui était déjà validé.

La grille de critique : cinq questions à poser à ta maquette

Pour critiquer ta propre maquette avec rigueur — et pas seulement « au feeling » — passe-la au crible de cinq questions. Un : hiérarchie — en plissant les yeux devant la page, qu'est-ce qui ressort en premier, deuxième, troisième ? Est-ce le bon ordre par rapport à l'objectif (pour Sereno : titre, promesse, CTA) ? Deux : parcours — l'œil circule-t-il naturellement de haut en bas, ou bute-t-il sur des éléments qui se disputent l'attention ?

Trois : cohérence — espacements, rayons, graisses suivent-ils le système partout, ou repères-tu des valeurs orphelines ? Quatre : accent — la couleur d'accent guide-t-elle vers l'action, ou est-elle saupoudrée au point de ne plus rien signifier ? Cinq : personnalité — si on masque le logo, peut-on encore deviner la marque ? Cette dernière question est la plus dure et la plus importante : c'est elle qui sépare le correct du mémorable.

Le réflexe puissant : confier cette grille à l'IA elle-même. Elle est étonnamment bonne critique de ses propres productions quand on lui donne un cadre d'évaluation — c'est l'auto-critique structurée. Tu obtiens un diagnostic argumenté, que tu confrontes à ton propre regard avant de décider des corrections.

Voici la landing Sereno actuelle [code ou capture jointe]. Critique-la comme un directeur artistique exigeant, selon cinq axes :
1. Hiérarchie : qu'est-ce que l'œil voit en 1er, 2e, 3e ? Est-ce le bon ordre pour convertir vers l'essai gratuit ?
2. Parcours : où l'œil bute-t-il ?
3. Cohérence : liste les valeurs (espacements, rayons, tailles) qui sortent du design system.
4. Accent : la couleur d'accent guide-t-elle vers l'action ou est-elle diluée ?
5. Personnalité : si on masque le logo, qu'est-ce qui distingue cette page d'un template ?
Pour chaque axe : un constat, une note sur 10, et UNE correction prioritaire. Ne propose pas encore les corrections, juste le diagnostic.

Les signes du « template IA »

Voici la liste de contrôle des symptômes du rendu générique — celle que Studio Mango affiche au mur. Si ta maquette en coche plusieurs, elle a besoin d'une passe de personnalité avant d'être montrée à quiconque :

• Dégradés violets ou bleu-rose partout, sans intention
• Emojis dans les titres pour « faire vivant »
• Espacements timides, tout est tassé
• Ombres molles et coins arrondis génériques, identiques sur chaque carte
• Typographie par défaut (la même sans-serif moyenne du haut en bas, aucune graisse assumée)
• Couleur d'accent saupoudrée partout au lieu d'être réservée à l'action
• Textes de remplissage interchangeables (« Boostez votre productivité ») qui pourraient vendre n'importe quoi

Si ton rendu coche ces cases, demande explicitement de l'audace : choix typographiques forts, une couleur d'accent assumée, des contrastes nets, de la générosité d'espace. Note un point intéressant : ces symptômes sont l'exact négatif de ce que tu as appris. Le tassement viole l'échelle d'espacement, l'accent dilué viole le 60-30-10, la typo molle viole l'échelle à ratio. Le générique n'est pas un style : c'est l'absence de système.

Les leviers de la personnalité

Sortir du générique ne demande pas de tout réinventer — il suffit d'actionner deux ou trois leviers avec conviction. Le premier et le plus puissant : la typographie. Une display assumée en titres (une serif à caractère, une graisse extrême, une largeur inhabituelle) transforme une page plus que n'importe quel autre changement. C'est la voix de la marque : Sereno avec une serif chaleureuse en 64 px ne ressemble plus à aucun template.

Deuxième levier : l'accent discipliné. Une seule couleur d'accent, utilisée à trois endroits maximum, crée plus d'impact que cinq couleurs partout. Troisième levier : l'espace généreux — doubler l'espace autour de la hero est le moyen le moins cher de paraître premium. Quatrième levier : un détail signature — une forme récurrente, un style d'illustration cohérent, une micro-interaction soignée — qui revient à travers la page comme un motif musical. Un seul détail signature bien tenu vaut mieux que cinq idées dispersées.

La méthode des deux versions : safe vs audacieuse

Quand tu hésites sur le niveau de risque, ne tranche pas dans l'abstrait : demande deux versions. Une version « safe » — propre, cohérente, sans risque — et une version « audacieuse » — typo display, accent franc, mise en page moins attendue. Le coût marginal est quasi nul (quelques minutes d'artifact), et la comparaison côte à côte rend la décision évidente, là où la discussion théorique tournait en rond.

Cette méthode brille aussi en présentation client : montrer safe et audacieuse positionne la conversation sur « jusqu'où allons-nous ? » plutôt que « est-ce que ça nous plaît ? ». Le client se projette, compare, choisit souvent un point intermédiaire — et se sent acteur de la direction. Studio Mango présentera demain les deux : c'est la marque d'un studio qui maîtrise sa palette de risque, pas d'un studio qui ne sait pas choisir.

flowchart LR
  M["Maquette actuelle"] --> CR["Critique en 5 axes"]
  CR --> S["Version safe : corrections ciblées"]
  CR --> A["Version audacieuse : typo + accent + espace"]
  S --> CH["Comparaison côte à côte"]
  A --> CH
  CH --> D["Décision assumée + justification"]

Micro-interactions et finitions

Les derniers 5 % font 50 % de l'impression. Les micro-interactions — la transition douce d'un survol, une apparition progressive au scroll, un champ qui confirme la saisie — signalent le soin. La règle pour Sereno : des mouvements courts (150-250 ms), doux (courbes d'accélération naturelles, pas de rebond clinquant) et signifiants (chaque animation communique quelque chose : « tu peux cliquer », « c'est bien enregistré »). Une animation décorative qui ne dit rien est du bruit.

Les finitions, ce sont aussi les détails ingrats : les textes réels à la place du lorem ipsum (un témoignage crédible avec prénom et métier vaut dix « Incroyable produit ! »), les états vides et les messages d'erreur, le favicon, les attributs alt des images. Demande à l'IA une « passe de finition » explicite : « relis toute la page comme un perfectionniste : transitions manquantes, textes faibles, détails négligés — liste tout, puis corrige ».

Livrer avec confiance

Récapitulons le chemin parcouru : une intention posée en brief (chapitre 1), un système de tokens cohérent et accessible (chapitre 2), un prototype itéré en boucle courte (chapitre 3), des composants propres et accessibles (chapitre 4), et une passe de critique, d'audace et de finition (ce chapitre). Quand le rythme, la hiérarchie et l'accent sont maîtrisés, tu livres un design qui a une personnalité — pas un énième template. C'est ce que Studio Mango présente fièrement au client demain matin.

Dernier mot sur la posture : l'IA t'a fait gagner la journée entière d'exécution, mais chaque décision visible sur cette page est passée par ton jugement. C'est exactement le bon partage des rôles — et c'est une compétence qui prend de la valeur : savoir diriger la machine vers un résultat qu'elle n'aurait jamais produit seule. Le goût reste le tien ; l'IA accélère.