Concevoir un bon site avec l’IA : du brief à la vérification de l’interface

« Crée un beau site moderne » laisse trop de décisions au modèle. Qui consultera la page ? Que doit comprendre cette personne ? Quelles informations l’aideront à choisir ? Sans ces réponses, même une maquette séduisante est difficile à évaluer : elle peut plaire sans remplir son rôle.

Pour utiliser l’IA en conception, préparez le contenu de la page, définissez des règles visuelles et décidez à l’avance comment vous évaluerez le résultat. Voici une démarche destinée aux dirigeants de petites entreprises, aux responsables produit et aux designers qui créent un site avec l’IA.

Ce que l’on peut retenir de l’approche d’Anshu Chimala

Dans How to turn your AI into a world-class designer, Anshu Chimala propose d’explorer plusieurs pistes créatives, de développer celle que l’on retient, puis de l’affiner par itérations. Il suggère notamment de confier une capture d’écran à un autre agent critique, sans lui transmettre l’historique de développement, et de générer des images au service d’une intention précise.

• How to turn your AI into a world-class designer

Ce sont des recommandations issues de sa pratique. Ses démonstrations ne garantissent pas une qualité équivalente dans tous les projets. Une note comme « 9 sur 10 » attribuée par un autre modèle mérite aussi du recul : elle peut aider à comparer des versions, mais ne montre pas si le visiteur réussira ce qu’il est venu faire.

Notre fil conducteur sera un atelier fictif de réparation de luminaires. Tous les briefs, maquettes et situations ci-dessous sont pédagogiques. Aucun résultat de test utilisateur ni indicateur commercial n’a été mesuré.

Commencez par la décision du visiteur

Pour l’atelier, « recevoir des demandes » est un objectif trop vague. Le visiteur doit savoir si l’on peut réparer son luminaire, quoi envoyer pour obtenir un premier avis et comment confier l’objet à l’atelier. Ces questions déterminent le contenu de la page.

Commencez par une consigne courte :

Nous concevons le site d’un atelier de réparation de luminaires. Le visiteur veut savoir si son objet peut être restauré. L’action principale consiste à envoyer des photos et une description de la panne pour un premier examen. Avant cela, il doit connaître les interventions proposées, les étapes de la demande et les conditions de prise en charge. Dresse la liste des contenus nécessaires. Signale séparément les informations manquantes. N’invente ni prix, ni délais, ni avis clients, ni garanties.

Cette demande permet de repérer les lacunes avant de dessiner la page. Si les conditions de prise en charge sont inconnues, demandez-les à l’atelier. Une belle section contenant une promesse inventée ne ferait que reporter le problème.

Comprendre le problème avant de développer des solutions est aussi le principe du Double Diamond du Design Council. Il distingue quatre phases : Discover, Define, Develop et Deliver, soit explorer, définir, développer et livrer en testant les solutions. La génération de maquettes ne couvre qu’une partie de cette démarche.

• Double Diamond du Design Council

Rédigez un brief qui aide à trancher

Un brief utile relie les choix visuels au contenu. Pour notre atelier, on peut proposer une présentation sobre centrée sur les objets : de grandes photos de détails, des légendes explicites et une action « Envoyer des photos » bien visible. C’est un choix pour cet exemple, pas un style universel pour les entreprises de services.

Évitez de transformer le brief en liste d’interdictions. « Aucune carte » ne dit rien de l’utilité de la page. Des cartes peuvent convenir à une liste de prestations ; l’essentiel est leur contenu et la possibilité de comparer les informations.

Comparez les pistes à contenu égal

Préparez les mêmes titres, prestations et images pour comparer les mises en page. Si une version comporte des textes précis et des photos détaillées alors qu’une autre utilise des contenus provisoires, plusieurs variables changent à la fois.

Pour l’atelier, on peut organiser la page de trois façons :

• Par type de panne. Le visiteur reconnaît son problème, puis consulte les conditions de prise en charge.
• Par exemple de restauration. Des travaux réels, accompagnés d’explications, structurent la page.
• Par étapes de réparation. La page explique le parcours, de la première photo à la récupération de l’objet.

Ces pistes présentent l’information selon des logiques différentes : le choix a donc un sens concret. Vous pourrez ensuite discuter de la densité de la page, de la taille des images et de la typographie.

Prépare trois structures de page selon ces trois principes. Utilise les mêmes informations de départ et la même action principale. Pour chaque structure, explique à quelle question elle répond d’abord et quelles informations apparaissent plus bas. N’ajoute pas encore d’effets décoratifs. Signale les contenus manquants qui empêchent de décider.

Les trois maquettes ci-dessous traitent le même sujet. La première met en avant les pannes, la deuxième l’objet et la troisième les étapes de la demande. Les palettes et les compositions varient aussi : ce sont des pistes créatives, pas une expérience contrôlée. Pour tester uniquement la structure, conservez le même traitement visuel et les mêmes contenus.

Demandez à une personne extérieure au projet de trouver les conditions de prise en charge et d’expliquer l’étape suivante. Si elle n’y parvient pas, revoyez la structure. Ses préférences de couleur sont une autre question.

Une chaîne aléatoire peut-elle stimuler les idées ?

Si les propositions se ressemblent trop, une source d’associations inhabituelle peut être utile. Chimala suggère de générer une chaîne aléatoire avec un script externe, puis de s’en servir comme point de départ créatif. Considérez cette technique comme un essai, pas comme un passage obligé. Source : Lenny’s Newsletter.

• Source : Lenny’s Newsletter

Les chercheurs de Sakana AI présentent une méthode appelée String Seed of Thought : le modèle génère une chaîne, puis effectue des opérations sur celle-ci pour construire sa réponse. Leurs travaux portent sur le respect d’instructions probabilistes et la diversité des réponses. Leur méthode ne nécessite pas de générateur externe, contrairement à la variante pratique de Chimala.

• String Seed of Thought

Ces résultats ne démontrent pas qu’une chaîne aléatoire améliore l’ergonomie d’un site ou les ventes. Pour votre projet, posez une question plus précise : l’essai a-t-il produit une piste qui répond au besoin et mérite d’être développée ? Sinon, mettez-la de côté. La nouveauté ne justifie pas à elle seule de remplacer une navigation compréhensible.

Choisissez les images selon leur fonction

Une photo d’un luminaire réparé peut montrer ce que l’atelier sait réellement faire. Une image générée ne remplit pas ce rôle : elle ne correspond à aucune commande ni réparation effective.

• Créer des images avec l’IA pour un site : du premier essai à la bannière

Distinguez les usages. Un portfolio demande de vraies photos dont l’utilisation est autorisée. Un schéma original peut expliquer comment contacter l’atelier. Une illustration conceptuelle peut donner le ton ou servir de couverture, à condition d’en préciser l’origine.

Avant de générer une image, déterminez sa place dans la page. Si elle accompagne un titre, vérifiez-les ensemble. Si elle sera recadrée sur un écran étroit, assurez-vous que le détail important reste visible. Conservez les textes, boutons et conditions sous forme d’éléments de page ordinaires, modifiables indépendamment de l’image.

Voici une consigne pour notre exemple :

Crée un schéma expliquant comment demander un premier avis sur un luminaire. Trois étapes : photographier l’objet entier, prendre un gros plan du dommage et décrire ce qui ne fonctionne pas. Les légendes doivent rester du texte normal dans la page. Ne présente pas des réparations fictives comme le portfolio de l’atelier.

Transformez les remarques en corrections vérifiables

« Le design fait bas de gamme » ne dit pas quoi modifier. Une remarque utile désigne un emplacement, un problème et le résultat attendu après correction.

Vous pouvez confier une première analyse à l’IA. Fournissez-lui la tâche du visiteur, le brief et l’écran actuel. Demandez-lui de distinguer les problèmes visibles des hypothèses à vérifier sur un site fonctionnel. Une capture permet d’examiner la composition, mais pas de tester l’envoi d’un formulaire.

Tenez un journal court : observation, modification, vérification. Par exemple : « La description disparaissait après un échec d’envoi → conservation du texte saisi → nouvel échec simulé pour vérifier que la description reste présente ». Ce suivi est plus utile qu’une note esthétique qui augmente.

Vérifiez l’interface en situation d’usage

Avant le lancement, parcourez le scénario principal de bout en bout. Pour l’atelier : trouver les conditions, préparer les photos, remplir la demande, corriger une erreur et recevoir une confirmation claire. Testez aussi les champs vides et les échecs de téléversement : ils nécessitent des réponses compréhensibles.

Vérifiez séparément la lisibilité et les commandes. Le critère de contraste de niveau AA des WCAG 2.2 exige au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, sous réserve des exceptions prévues. Le grand texte commence à 18 pt, ou à 14 pt en gras. Vérifiez les couleurs du texte et du fond plutôt que de juger l’image à l’œil. Explication du critère 1.4.3 par le W3C.

• Explication du critère 1.4.3 par le W3C

Pour les cibles de pointage, le critère 2.5.8 de niveau AA prévoit un minimum de 24 × 24 pixels CSS, avec des exceptions, notamment pour les petites cibles suffisamment espacées et les liens au sein d’un texte. C’est un seuil minimal, pas une recommandation de dimensionner tous les boutons ainsi. Explication du critère 2.5.8 par le W3C.

• Explication du critère 2.5.8 par le W3C

Ces deux vérifications ne suffisent pas à établir la conformité à l’ensemble du standard. Parcourez aussi la page au clavier, vérifiez la visibilité du focus, les libellés et l’agrandissement du texte. Confiez ensuite une tâche précise à une personne du public visé, sans la guider. Notez ses hésitations et ses interprétations inattendues.

Déterminez quand arrêter les retouches

Pour la première version de l’atelier, fixez les critères à l’avance : le visiteur trouve les interventions et les conditions, comprend quoi envoyer, remplit sa demande, conserve ses données après une erreur et reçoit une confirmation. Toute promesse publiée doit correspondre au fonctionnement réel de l’atelier.

Une fois ces critères remplis, rattachez les modifications suivantes à des observations. Une confusion entre estimation préalable et prix définitif justifie de revoir l’explication. L’impossibilité de joindre une photo justifie une correction du formulaire. L’envie d’essayer une autre nuance peut attendre.

Commencez par un seul parcours et rendez-le fonctionnel. Vous disposerez alors d’une base concrète pour le prochain échange avec l’IA : un problème précis et un moyen de vérifier sa résolution.

• Créer un site professionnel avec l’IA : du cahier des charges au test du formulaire
• Création de sites chez Neaptide

Sources

1. Anshu Chimala — How to turn your AI into a world-class designer, Lenny’s Newsletter, 1er septembre 2026. Article original. Seule la partie accessible publiquement a été utilisée ; la suite réservée aux abonnés n’a pas été consultée.
2. Design Council — The Double Diamond. Description du processus. Distinction entre compréhension du problème, développement et vérification des solutions.
3. Kou Misaki, Takuya Akiba, Sakana AI — String Seed of Thought: Prompting LLMs for Distribution-Faithful and Diverse Generation. Méthode et expériences. Diversité des réponses et instructions probabilistes.
4. W3C — Understanding SC 1.4.3: Contrast (Minimum). Contraste du texte.
5. W3C — Understanding SC 2.5.8: Target Size (Minimum). Taille des cibles et exceptions.

• Article original
• Description du processus
• Méthode et expériences
• Contraste du texte
• Taille des cibles et exceptions

Sources vérifiées le 20 septembre 2026. Le brief de l’atelier, les consignes, tableaux et schémas ont été conçus pour cet article. Ils décrivent une démarche proposée, pas un compte rendu d’expérience.