# Design de site web IA : cinq portes avant la mise en ligne URL: https://noonwp.com/fr/journal/design-site-web-ia Type: blog Locale: fr Published: 2026-11-10 Updated: 2026-11-11 --- > Un site généré par IA paraît fini bien avant de l'être. Cinq portes permettent de garder la vitesse de l'outil sans livrer de surprises : brief, directions, tokens, blocs natifs et audit. ## Design de site web IA : cinq portes avant la mise en ligne Un site généré par IA ressemble à un site fini bien avant de l'être. En quelques dizaines de secondes, le design de site web IA produit une page d'accueil plausible, avec son héros, ses trois cartes de fonctionnalités et son pied de page. La vitesse est réelle, et c'est précisément le piège : les parties inachevées (contraste, ordre des titres, mise en page miroir, discipline des tokens) sont celles qu'un client découvre trois semaines après la livraison. Voici la séquence que nous suivons pour garder la vitesse et supprimer les surprises : cinq portes, dans l'ordre, chacune avec un passage ou un échec clair. ## Pourquoi un site généré paraît-il fini alors qu'il ne l'est pas ? Parce que le modèle optimise ce que montre une capture d'écran. Héros, trois cartes de fonctionnalités, une rangée de témoignages, un pied de page. Chacun de ces éléments est statistiquement familier, si bien que la page entière a l'air professionnelle au premier coup d'œil. Or ce qu'une capture ne montre pas est précisément ce qui décide si le site survit à la remise au client. Prenez l'accessibilité. Le [rapport WebAIM Million 2026](https://webaim.org/projects/million/) a relevé des échecs WCAG 2 détectés sur 95.9% des pages d'accueil du million de sites les plus visités, et un texte à faible contraste sur 83.9% d'entre elles. Un modèle entraîné sur ce web reproduit ce web. Il vous proposera une légende gris pâle sur fond crème avec une parfaite assurance. Le second problème invisible tient à l'endroit où vivent les décisions de design. Une page générée porte souvent ses couleurs, ses tailles et ses espacements sous forme de valeurs littérales dispersées dans le balisage. Changez le bleu de marque le trimestre prochain, et vous chasserez dans quarante blocs. Cette facture de maintenance, c'est le freelance qui la paie, pas le modèle. La bonne question n'est donc pas « l'IA peut-elle dessiner ce site ? ». Elle peut produire un brouillon. La bonne question est : quelles décisions la laissez-vous prendre, et où vérifiez-vous son travail ? Les cinq portes répondent à cette question. ## Porte un : rédiger le brief avant d'ouvrir l'outil La plupart des résultats décevants remontent à un prompt d'une ligne. « Un site pour une boulangerie à Casablanca » donne au modèle le droit d'inventer tout le reste : public, ton, liste des pages, appels à l'action. Il les inventera à partir de la moyenne de tous les sites de boulangerie qu'il a vus. Un brief utile tient en une demi-page. Qui visite le site, et que vient-il faire dans les dix premières secondes ? Quelles sont les trois pages qui doivent exister ? Quelle est l'unique action pour laquelle le site existe (réserver, appeler, commander) ? Citez deux sites que le client admire et un qu'il déteste. Indiquez enfin les langues, sens de lecture compris : si le site sera publié en arabe ou en hébreu, dites-le maintenant, pas après l'approbation de la mise en page. Cette dernière précision compte davantage qu'il n'y paraît. Le sens de lecture de droite à gauche est une propriété de mise en page, pas une tâche de traduction. Un modèle qui n'en sait rien produira une maquette alignée à gauche avec de l'arabe collé dedans. Indiquer le sens dans le brief change les dispositions que l'outil propose, et cela ne coûte qu'une phrase. Évitez les adjectifs « moderne et épuré ». Ils ne transportent aucune information. « Dense et éditorial, comme la une d'un quotidien » en transporte beaucoup. ## Porte deux : demander des directions, jamais des pages L'usage le moins coûteux de l'IA dans ce travail est l'exploration. Demandez entre trois et cinq directions distinctes, sous forme de maquettes grossières et de paires de polices, puis choisissez avant de construire quoi que ce soit. Six croquis coûtent quelques minutes. Reconstruire une page que le client a refusée coûte un après-midi. ![Plusieurs croquis de mise en page au crayon épinglés sur un panneau de liège, qui comparent des directions de design](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/d70243-i1.webp) La discipline consiste à garder ces essais bon marché. Ne laissez pas l'outil rendre des pages complètes avec photographies générées pour chaque direction : les clients tombent amoureux des photos et ne parviennent plus à séparer la mise en page des images. Des blocs gris et de vrais titres suffisent. Si le client ne sait pas choisir entre trois mises en page grises, c'est le brief qui pose problème, et vous l'avez appris gratuitement. La catégorie d'outil compte, et il faut être direct à ce sujet. Les générateurs de site complet comme 10Web construisent un site WordPress entier à partir d'un prompt, d'une URL ou d'un fichier Figma, avec des offres à partir de $10 par mois facturées à l'année pour un site. Les constructeurs hébergés comme Durable transforment quelques réponses en site de petite entreprise fini en une trentaine de secondes. Les deux sont excellents pour la porte deux et faibles pour la porte quatre, parce qu'ils gardent les décisions de design plutôt que de les exposer. Utilisez-les pour voir des options, et méfiez-vous de les employer comme construction finale d'un site que vous maintiendrez pendant des années. ## Porte trois : figer le design dans theme.json avant de construire C'est la porte que la plupart des méthodes sautent, et c'est elle qui sépare un site que vous pouvez maintenir d'un site que vous ne pouvez que présenter. Une fois la direction choisie, extrayez ses décisions en tokens et inscrivez-les dans `theme.json` : palette de couleurs, familles et tailles de police, échelle d'espacement, largeur de contenu. Dès lors, chaque bloc référence un token par son slug, jamais une valeur littérale. La [référence theme.json](https://developer.wordpress.org/themes/global-settings-and-styles/) existe précisément pour cela. Elle donne à un thème de blocs un seul endroit où déclarer la palette et les échelles que l'éditeur propose ensuite comme contrôles. Quand le bleu de marque change, vous modifiez une ligne. Quand un client ouvre l'éditeur de site, il choisit dans votre palette au lieu de disposer d'une roue chromatique libre, ce qui évite discrètement toute une catégorie de modifications hors charte. ![Éventail de cartes d'échantillons de couleurs mates sur un bureau en chêne, avec une règle et un crayon](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/17c64c-i2.webp) Ici, l'IA se rend utile d'une autre façon. Donnez-lui la direction retenue et demandez un jeu de tokens, puis vérifiez-le selon deux règles. Chaque couple texte et fond doit atteindre 4.5:1 pour le texte normal (seuil WCAG AA), donc calculez les ratios vous-même au lieu de faire confiance à l'affirmation du modèle. Et l'échelle doit rester petite : cinq ou six paliers d'espacement, six tailles de caractères. Les modèles adorent vous fournir quatorze gris presque identiques. Supprimez-en onze. Un test pratique pour savoir si cette porte a tenu : ouvrez le thème fini et cherchez un code hexadécimal dans n'importe quel gabarit. Si vous en trouvez un, une décision a échappé au système. ## Porte quatre : construire en blocs natifs et garder le générateur hors de la boucle Il faut maintenant construire. La structure proposée par le modèle mérite généralement d'être conservée : ordre des sections, logique des colonnes, rythme entre zones denses et zones aérées. Le balisage produit l'est rarement. Reconstruisez la structure approuvée avec des blocs natifs (Groupe, Colonnes, Couverture, Boucle de requête) en utilisant vos tokens, et traitez la sortie générée comme un croquis de référence, pas comme un fichier source. Cela semble plus lent. Selon notre expérience, c'est plus rapide dès la deuxième page, parce que les blocs natifs héritent des tokens, réagissent à l'éditeur de site et tiennent le coup quand le client les modifie. Un balisage généré qui code son style en dur combat chacun de ces mécanismes. Les constructeurs de pages occupent l'autre extrémité du même compromis. Divi, reconstruit en Divi 5 en février 2026, inclut Divi AI dans son offre Pro à $277 par an, et le résultat reste dans le système de modules de Divi. C'est un choix légitime pour une agence qui a standardisé sur Divi. C'est pourtant un produit différent d'un thème de blocs, avec un coût de sortie différent, et ce coût doit figurer dans le devis. Là où la génération par IA garde sa place dans la construction, c'est dans la couche répétitive : une variante d'une section tarifs, un texte d'exemple qui ressemble au vrai, des dispositions de héros alternatives que le client peut comparer. Traitez chacune comme un motif brouillon à nettoyer et à enregistrer, jamais comme un travail fini. Une limite honnête : si le projet demande une vraie interaction (archives filtrées, logique de requête personnalisée, tout comportement en JavaScript), aucun générateur ne la portera. Un développeur écrit cette partie, et la contribution de l'IA reste aux bords. ## Porte cinq : auditer ce qu'une capture d'écran ne montre pas Lancez le même audit court sur chaque site, toujours dans le même ordre, pour en faire une habitude plutôt qu'une humeur. D'abord, le contraste. Vérifiez les paires réellement rendues, y compris le texte sur image et les états désactivé et survol que le modèle n'a pas envisagés. Ensuite, la structure des titres : un seul H1, des titres qui descendent sans sauter de niveau, et aucun titre choisi seulement parce qu'il est gros. Troisièmement, le clavier : parcourez toute la page à la tabulation, vérifiez que le focus est visible et que l'ordre suit l'ordre de lecture. Quatrièmement, le texte alternatif de chaque image porteuse de sens, et un alt vide pour les autres. Le cinquième contrôle est celui qui distingue cet audit d'une liste générique : le sens de lecture. Si le site possède une version en arabe ou en hébreu, affichez-la dans le sens de lecture de droite à gauche et cherchez ce qui ne s'est pas miroité. Des icônes qui pointent dans le mauvais sens, une image de héros dont le sujet principal se retrouve face au texte, un espacement écrit en `margin-left` au lieu d'une propriété logique comme `margin-inline-start`. Ces défauts sont peu coûteux à corriger à cette porte et embarrassants à découvrir dans la capture d'écran d'un client. ![Deux ordinateurs portables côte à côte affichant la même mise en page abstraite, pour une comparaison avant et après](https://fdzlnqpwsaniezitwiuw.supabase.co/storage/v1/object/public/cms-media/noonwp/2026-11/6b5736-i3.webp) Conservez les preuves de l'audit : une paire avant et après par page, une note sur ce qui a échoué, une note sur ce que vous avez modifié. Cela transforme « assisté par IA » d'une affirmation vague en livrable, et c'est le paragraphe de votre document de remise qui justifie vos honoraires face à un client qui a essayé un générateur lui-même le week-end précédent. ## Et les constructeurs à un seul prompt ? Ils ont leur place, et elle est étroite. Un constructeur à un prompt est un bon moyen de produire un prototype jetable pour une présentation commerciale, une page d'accueil pour un événement de week-end, ou un point de départ visuel pour un client qui ne sait pas décrire ce qu'il veut. Framer associe un générateur de site par IA à une toile libre et à une offre gratuite, ce qui le rend efficace pour ce type de travail visuel rapide et jetable, avec un plan Basic à partir de $10 par mois. Évitez-les lorsque le site doit vivre sur WordPress, être modifié par un client non technique ou servir un public de droite à gauche, car vous reconstruirez de toute façon le résultat en blocs. Le prototype valait la peine d'exister ; la page ne valait pas la peine d'être livrée. Savoir laquelle des deux situations vous avez sous les yeux vous fera gagner le plus de temps. ## Par quoi commencer sur votre prochain brief Choisissez un projet en cours et appliquez seulement les portes un et trois. Rédigez le brief d'une demi-page, puis figez la palette et les échelles dans `theme.json` avant qu'une seule page n'existe. Chronométrez, et comparez avec le temps qu'il a fallu à votre dernier site pour atteindre un design stable. Si le résultat tient, ajoutez les trois autres portes une à une. Quelle porte vous aurait épargné le plus de douleur sur le dernier site que vous avez livré ? ## FAQ ### Qu'est-ce qu'un bon brief pour un design de site web IA ? Un brief d'une demi-page : le public et ce qu'il vient faire dans les dix premières secondes, les trois pages obligatoires, l'action principale, les langues avec leur sens de lecture, et deux sites admirés ainsi qu'un site détesté. ### Faut-il laisser une IA générer le code final du site ? Non, pour un site que vous maintiendrez dans la durée. Utilisez l'IA pour explorer des directions et proposer des tokens, puis reconstruisez la structure approuvée avec des blocs natifs. ### Quel contraste viser pour le texte ? Au minimum 4.5:1 pour le texte normal, selon le seuil WCAG AA. Calculez les ratios vous-même au lieu de vous fier à l'affirmation du modèle. ### Pourquoi définir les couleurs dans theme.json ? Pour qu'une seule modification se propage à tout le site, et pour que l'éditeur propose la palette validée au lieu d'une roue chromatique libre. ### Comment vérifier un site en arabe ou en hébreu généré par IA ? Affichez-le dans le sens de lecture de droite à gauche, vérifiez que les icônes et les images se sont miroitées, et contrôlez l'usage de propriétés logiques comme margin-inline-start.