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. Il ne sait pas qui consultera la page, ce que cette personne doit comprendre ni quelles informations l’aideront à choisir. Sans cela, même une maquette séduisante est difficile à évaluer : elle peut plaire sans remplir son rôle.

Avant la première maquette, préparez donc le contenu de la page, fixez des règles visuelles et décidez comment vous évaluerez le résultat. La démarche qui suit s’adresse 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 tirées de sa pratique, et ses démonstrations ne garantissent pas la même qualité à tous les projets. Méfiez-vous surtout d’une note comme « 9 sur 10 » attribuée par un autre modèle. Elle aide à comparer des versions. Elle ne dit pas si le visiteur réussira ce qu’il est venu faire.

Notre fil conducteur sera un atelier fictif de réparation de luminaires. Les briefs, maquettes et situations ci-dessous sont des exemples pédagogiques. Nous n’avons mené aucun test utilisateur ni mesuré aucun indicateur commercial.

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. Le contenu de la page découle de ces questions.

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.

Une telle consigne fait apparaître 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.

Le même ordre, comprendre le problème puis développer des solutions, structure le 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. Une présentation sobre, centrée sur les objets, conviendrait à notre atelier : de grandes photos de détails, des légendes explicites et une action « Envoyer des photos » bien visible. C’est notre choix pour cet exemple. Il n’a rien d’un style universel pour les entreprises de services.

Ne transformez pas le brief en liste d’interdictions. « Aucune carte » ne dit rien de l’utilité de la page. Des cartes conviennent très bien à une liste de prestations. Ce qui compte, c’est ce qu’elles disent et la possibilité de comparer.

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 trois pistes suivent des logiques de présentation différentes, il y a donc un vrai choix à faire. La densité de la page, la taille des images et la typographie se discutent ensuite.

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. Voyez-y des pistes créatives et non 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 se discutent à part.

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. Prenez cette technique comme un essai dont on peut très bien se passer.

• 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 d’abord lui-même une chaîne aléatoire, puis en tire sa réponse par une série d’opérations. Leurs travaux portent sur le respect d’instructions probabilistes et la diversité des réponses. La méthode se passe de générateur externe, et c’est ce qui la distingue de la variante pratique de Chimala.

• String Seed of Thought

Rien dans ces résultats ne montre qu’une chaîne aléatoire rend un site plus facile à utiliser ou fait vendre davantage. Pour votre projet, un seul test suffit : 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

La photo d’un luminaire réparé montre ce que l’atelier sait réellement faire. Une image générée ne prouve rien de tel, puisqu’il n’y a derrière elle ni commande ni réparation.

• 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écidez où elle ira dans la page. Si elle accompagne un titre, regardez-les ensemble. Si elle doit être recadrée sur un écran étroit, assurez-vous que le détail important reste dans le cadre. Gardez les textes, boutons et conditions sous forme d’éléments de page ordinaires, que l’on peut modifier 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 nomme l’endroit, le problème et le comportement attendu une fois la correction faite.

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 qui ne se vérifient que sur un site fonctionnel. Une capture suffit pour discuter de la composition. Elle ne dira pas si le formulaire s’envoie.

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 ». Un tel journal vaut mieux qu’une note esthétique qui grimpe.

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. Ne vous arrêtez pas au parcours sans accroc : les champs vides et les échecs de téléversement appellent eux aussi une réponse claire.

Vérifiez à part que le texte se lit facilement et que les commandes sont faciles à atteindre. 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. Le contraste se mesure sur les couleurs réelles du texte et du fond. Un jugement à l’œil ne suffit pas.

• Explication du critère 1.4.3 par le W3C

Pour les cibles de pointage, le critère 2.5.8 de niveau AA fixe un minimum de 24 × 24 pixels CSS. Il prévoit des exceptions, notamment pour les petites cibles suffisamment espacées et les liens au sein d’un texte. C’est un plancher. Le critère ne conseille pas de donner cette taille à tous les boutons.

• Explication du critère 2.5.8 par le W3C

Ces deux vérifications ne valent pas conformité à l’ensemble du standard. Parcourez aussi la page au clavier, regardez si le focus est visible, si les champs ont un libellé et ce que devient la mise en page quand on agrandit le texte. Confiez ensuite une tâche précise à une personne du public visé, sans la guider. Notez où elle hésite et ce qu’elle comprend autrement que vous.

Déterminez quand arrêter les retouches

Pour la première version, écrivez à l’avance ce qui vaut « terminé ». 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. Dernier critère : toute promesse publiée correspond au fonctionnement réel de l’atelier.

Une fois ces critères remplis, rattachez les modifications suivantes à des observations. Si les visiteurs confondent estimation préalable et prix définitif, réécrivez l’explication. Si une photo refuse de se joindre, corrigez le formulaire. Une autre nuance de couleur peut attendre.

Commencez par un seul parcours et faites-le fonctionner. Le prochain échange avec l’IA aura alors un objet précis : un problème que vous pouvez montrer et un moyen de vérifier qu’il a disparu.

• 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 3 octobre 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 et ne constituent pas un compte rendu d’expérience.