Webdesign

10 signes que votre design a été fait par l'IA

Webdesign
Icône du temps
10 minutes
.
Comparaison entre une page d'accueil générée par l'IA sur fond violet et sa version corrigée, miniature de la vidéo d'Amaury de Luca
Icône de lienLogo noir du réseau social X Logo Linkedin noirLogo Facebook noir
Résumé généré par l’IA

Un site conçu avec l'IA se reconnaît souvent dès le premier écran. Un titre géant se détache sur un fond sombre traversé d'un dégradé indigo. Juste en dessous, une grille de cartes présente les fonctionnalités. Nous utilisons Claude sur nos projets clients et ces motifs reviennent à presque chaque génération. Nous avons relevé dix signes qui trahissent un design produit par défaut. Chacun est illustré par un visuel tiré de la vidéo ci-dessous, avec la façon dont notre agence Webflow l'évite. Comptez au passage combien vous en trouvez sur votre propre site.

L'IA reproduit les choix les plus courants quand personne ne lui en impose d'autres

Un modèle comme Claude ou ChatGPT a appris le design sur des milliers d'interfaces existantes. Quand on lui demande un site « moderne » sans autre consigne, il rend la réponse la plus probable. Le résultat ressemble à la moyenne de tout le marché. On appelle « AI slop » ce type de contenu produit en série sans intention. Le terme vise les textes et les images autant que les interfaces.

Aucun des éléments qui suivent n'est mauvais en soi. Ils trahissent l'IA quand ils arrivent ensemble et par défaut. Personne ne les a alors choisis pour la marque.

Les dix signes d'un design généré par l'IA

Les sept premiers signes concernent l'interface. Les trois derniers tiennent au contenu. Ils trahissent souvent le site plus vite que le design lui-même.

1. Une palette indigo et violet sur fond sombre

Le signe le plus visible tient à la palette. Le fond est sombre et un dégradé part de l'indigo vers le violet. Un grand halo flou éclaire le titre, dont un mot reprend souvent le dégradé. Une grille de points habille parfois le fond. L'IA sort cette palette dès qu'on lui demande un rendu moderne. Une néobanque et une app de méditation finissent alors avec la même identité.

Maquette de page d'accueil sur fond sombre avec dégradé indigo vers violet et halo flou derrière le titre, premier signe d'un design généré par l'IA
Fond sombre, dégradé indigo vers violet et halo flou derrière le titre.

Nous partons de la marque et de ses clients pour fixer les couleurs. Ce travail se fait avant d'ouvrir le moindre outil d'IA. Le nuancier est ensuite donné au modèle comme une contrainte, au même titre que le logo.

2. Des titres immenses dans une graisse très fine

Les titres générés sont souvent énormes et composés dans une graisse très fine. Ils paraissent presque transparents. Un mot passe régulièrement en italique pour donner une touche d'élégance. Le rendu flatte une capture d'écran. Sur un téléphone en plein soleil, la lecture devient difficile.

Les règles d'accessibilité du W3C demandent un contraste d'au moins 4,5:1 pour le texte courant et de 3:1 pour les grands textes (critère 1.4.3 des WCAG 2.2). Un titre fin posé avec une opacité réduite descend vite sous ce seuil.

Titre géant en graisse très fine et presque transparent, à 30 % d'opacité, deuxième signe d'un design généré par l'IA
Un titre en graisse très fine à 30 % d'opacité, élégant en capture et difficile à lire en plein soleil.

La typographie porte aussi la voix de la marque. Laissée à l'IA, elle parle comme celle des concurrents. Nous choisissons les polices et leurs graisses avant le premier prompt, puis nous les imposons au modèle. Dans notre test du site Kova avec Claude et Mobbin, les deux typographies fournies dès le départ ont fixé la plus grande partie du rendu.

3. Des cartes pour chaque information

L'IA met des cartes partout. Chaque fonctionnalité a la sienne, comme chaque chiffre clé et chaque avis. On trouve même parfois une carte dans une carte. Le même arrondi s'applique à tous les éléments et une petite icône se pose dans un carré de couleur. Les cartes séparent l'information sans effort et les modèles en abusent pour cette raison.

Grille de cartes pour une fonctionnalité, un chiffre clé, un avis client et une carte imbriquée dans une autre, troisième signe d'un design généré par l'IA
Une carte par fonctionnalité, par chiffre et par avis, jusqu'à la carte dans la carte.

De l'espace, un filet ou un écart de taille dans le texte obtiennent la même séparation avec plus de caractère. Le test est rapide. Retirez la moitié des cartes d'une page. Dans la plupart des cas, aucune ne manque.

4. La même composition pour chaque produit

La page d'accueil générée suit presque toujours le même gabarit. Un badge arrondi annonce une nouveauté en haut de page. Un titre centré, un sous-titre gris et deux boutons suivent. Un bento présente ensuite les fonctionnalités. Les tableaux de bord alignent quatre chiffres au-dessus d'un grand graphique. Les apps mobiles ouvrent sur « Bonjour Thomas » et une carte de résumé.

Page d'accueil avec badge de nouveauté, titre centré, sous-titre gris, deux boutons et bento des fonctionnalités en dessous, quatrième signe d'un design généré par l'IA
Badge de nouveauté, titre centré, sous-titre gris et deux boutons au-dessus d'un bento.

Ces mises en page fonctionnent. Elles répondent à un type de produit et ignorent les besoins propres à votre cible. L'IA y retombe parce qu'on lui demande de designer sans lui montrer une seule référence.

Nous cherchons ces références sur Mobbin. La bibliothèque réunit plus de 600 000 écrans et parcours tirés d'apps et de sites en ligne. Pour un onboarding, nous regardons comment Revolut, Airbnb ou Notion s'y prennent. Nous comptons les étapes. Nous notons les informations demandées en premier et le moment où arrivent les autorisations. Nous relevons ensuite les motifs qui reviennent avant de trancher pour le produit du client.

Le MCP de Mobbin permet à Claude d'aller chercher ces références lui-même avant de dessiner. Il demande l'abonnement Pro de Mobbin, avec 10 % de réduction via notre lien.

5. Toutes les sections ont le même poids

Chaque section reçoit son titre centré, sa phrase d'introduction et ses trois colonnes. La suivante reprend le même schéma, puis la suivante encore. Chaque fonctionnalité a son icône, son titre et ses deux lignes de texte. Tout est symétrique et rien ne ressort.

Page dont chaque section répète un titre centré et trois colonnes icône, titre et deux lignes, cinquième signe d'un design généré par l'IA
Trois sections construites sur le même modèle, sans élément qui prenne le dessus.

Sur un vrai site, les éléments n'ont pas la même valeur. Vos tarifs méritent plus de place que vos valeurs et le bouton principal doit se voir avant le reste. La hiérarchie part d'une question simple sur la priorité du client qui lit la page.

6. Une décoration qui ne sert pas l'utilisateur

L'IA multiplie les effets de verre et les bordures qui brillent. Des points clignotent pour signaler un statut. Les cartes grossissent au survol et chaque bloc apparaît en fondu au défilement. Ces effets rendent bien en capture. Pour l'utilisateur, une animation inutile fait perdre du temps.

Effet de verre, bordure lumineuse, points de statut colorés et carte qui grossit au survol, sixième signe d'un design généré par l'IA
Effet de verre, bordure qui brille, points de statut et carte qui grossit au survol.

Le mouvement peut aussi gêner. Le W3C rappelle que le mouvement déclenché au défilement peut provoquer vertiges et nausées chez les personnes sujettes aux troubles vestibulaires (critère 2.3.3 des WCAG 2.2). Nous passons donc chaque effet au même filtre. S'il montre une action, un état ou une hiérarchie, il reste. S'il renforce la marque, il reste aussi. S'il rend seulement bien, nous le retirons.

7. Des visuels sans une seule vraie photo

Les visuels générés mélangent illustrations 3D génériques et formes abstraites qui flottent. Les portraits viennent de banques d'images ou sont générés de toutes pièces. Aucune photo de l'équipe, des locaux ou du produit n'apparaît. Le visiteur a l'impression que personne ne se tient derrière le site.

Illustrations 3D génériques, formes abstraites et portraits de banque d'images trop parfaits, septième signe d'un design généré par l'IA
Illustrations 3D génériques, formes abstraites et portraits un peu trop parfaits.

Le Nielsen Norman Group l'a observé dans ses études d'oculométrie. Les utilisateurs ignorent les photos de personnes génériques issues de banques d'images et regardent celles des vraies personnes qui travaillent dans l'entreprise (Nielsen Norman Group). Sur la page équipe de FreshBooks, un testeur a passé 10 % de temps en plus sur les portraits que sur les biographies. Les biographies occupaient pourtant 316 % de place en plus. Une photo un peu imparfaite de votre équipe vaut donc davantage qu'un visuel généré. Elle prouve que l'entreprise existe.

8. Un texte qui pourrait aller sur n'importe quel site

Le texte est le signe que presque personne ne remarque. Une fois repéré, il se voit partout. Les modèles ont leurs tournures, comme « Ce n'est pas un simple outil, c'est un partenaire ». Ils alignent trois mots en rafale du type « Simple. Rapide. Efficace. » Ils posent des questions qui se répondent seules, comme « Le résultat ? Une croissance explosive. »

Exemples de tournures de phrases typiques de l'IA, dont « Ce n'est pas un simple outil, c'est un partenaire » et « Simple. Rapide. Efficace. », huitième signe d'un design généré par l'IA
Les tournures que les modèles reproduisent d'un site à l'autre.

La ponctuation trahit aussi le modèle. Les tirets longs et les points-virgules reviennent sans cesse. Les deux-points d'annonce et les virgules en série aussi. Le vocabulaire suit avec « libérez votre potentiel » ou « propulsez votre business ». Un texte que l'on peut coller tel quel sur le site d'un concurrent ne dit rien de votre entreprise.

Nous écrivons comme nous parlerions au client. Les phrases restent simples et les mots précis. Les exemples viennent de son propre marché. Le sujet a sa propre discipline, détaillée dans notre article sur l'UX writing.

9. Des chiffres et des avis inventés

Les maquettes générées affichent « plus de 10 000 clients » ou « 99,9 % de satisfaction ». Un témoignage signé Sarah, directrice marketing, s'accompagne d'une photo générée. Les tableaux de bord se remplissent de chiffres inventés. L'interface a l'air terminée alors que tout est faux.

Faux chiffres « 10 000+ clients satisfaits » et « 99,9 % de satisfaction » avec une courbe de chiffre d'affaires et un témoignage inventés, neuvième signe d'un design généré par l'IA
Des chiffres ronds, une courbe de chiffre d'affaires et un témoignage signé Sarah, tous inventés par le modèle.

Ces contenus de remplissage finissent parfois en ligne. Un faux avis publié sur un site est une pratique commerciale trompeuse. La DGCCRF rappelle que le délit est puni de deux ans d'emprisonnement et de 300 000 € d'amende (fiche de la DGCCRF sur les faux avis). Tant qu'aucun chiffre réel n'existe, nous n'en affichons aucun.

10. Rien n'est propre à la marque

Le dernier signe découle des neuf autres. On comprend qu'on est sur un site, une app ou un tableau de bord. Rien n'explique pourquoi le produit existe ni en quoi il se distingue. Le test du logo suffit pour le vérifier. Remplacez votre logo par celui d'un concurrent. Si la page fonctionne toujours, elle ne parle pas assez de vous.

Page d'accueil générique « La solution tout-en-un pour les équipes modernes » avec un logo interchangeable, dixième signe d'un design généré par l'IA
Le test du logo sur une page d'accueil qui pourrait appartenir à n'importe quel éditeur.

Utiliser l'IA pour designer sans perdre l'identité de la marque

L'IA réussit très bien le design évident. Elle va plus loin quand la réflexion a été faite en amont. Sur nos projets, la stratégie passe donc avant le premier prompt. La cible, le marché et les arguments qui différencient le produit se fixent pendant l'atelier de lancement. Nous rassemblons ensuite les références et relevons sur Mobbin comment les meilleures équipes produit ont résolu le même problème.

Le modèle reçoit enfin les typographies, les couleurs et de vraies photos sous forme de consignes écrites. Nous détaillons cette méthode dans notre guide sur le design d'une homepage avec Claude et les Skills. Le résultat sert de base de travail à notre équipe de design UX/UI, qui le reprend avant toute intégration dans Webflow.

Les limites de cette grille

Aucun de ces éléments n'est interdit. Nous utilisons tous des cartes, des icônes et parfois des dégradés. Un site peut cocher deux ou trois signes et rester cohérent avec sa marque. La grille repère les choix faits par défaut. Elle ne juge pas la qualité d'un design pris isolément.

Faire relire le design de votre site par notre équipe

Un regard extérieur repère vite les choix faits par défaut. Trente minutes suffisent pour passer votre page d'accueil au crible de ces dix signes avec notre équipe. Réserver un appel.

FAQ : reconnaître et éviter un design généré par l'IA

Que désigne l'AI slop en design ?

L'expression désigne les interfaces produites en série par l'IA sans intention de marque. Elles reprennent la même palette indigo et violet, les mêmes cartes et la même composition. Leur texte pourrait aller sur n'importe quel site. Le mot anglais « slop » désigne une bouillie et s'applique aussi aux textes et aux images générés.

Peut-on concevoir un site avec l'IA sans qu'il ressemble aux autres ?

Oui, à condition de lui fournir le contexte qu'elle ne peut pas deviner. La cible, le positionnement et les références visuelles se fixent avant le premier prompt. Les typographies, les couleurs et les vraies photos arrivent ensuite comme des contraintes. Le résultat reste une base de travail qu'un designer reprend avant la mise en ligne.

Quel outil donne des références de design à Claude ?

Le MCP de Mobbin connecte Claude à une bibliothèque de plus de 600 000 écrans d'apps et de sites en ligne. Claude y cherche des références avant de proposer une interface. Le connecteur demande un abonnement Mobbin Pro, Team ou Enterprise. Les Skills de Claude complètent le dispositif avec un fichier de règles propre à la marque.

Les faux avis générés par l'IA sont-ils interdits ?

Oui. En France, publier de faux avis ou se présenter faussement comme un consommateur relève des pratiques commerciales trompeuses. La DGCCRF précise que le délit est puni de deux ans d'emprisonnement et de 300 000 € d'amende. L'amende peut être portée à 10 % du chiffre d'affaires annuel moyen.