Introduction — Avec le nouveau GPT, c'est fini le design ?

Chapitre d'ouverture du cours 5XUI · Projet Web UI/UX · 2026-2027

Slides du chapitre#

• deck2introdesignia.pdf

1. Exercice : le prompt générique#

Commençons par ce que vous avez tous en tête. On ouvre un générateur, on lui demande un site, et trente secondes plus tard on a une page. Propre, responsive, en ligne en deux clics. Alors, à quoi sert un webdesigner en 2026 ?

Plutôt que d'en parler, faisons-le.

Consigne. Choisissez un sujet de petit site vitrine : un food truck, un salon de coiffure, un club de tennis de table, un photographe, un gîte. Écrivez un prompt générique, comme le ferait quelqu'un qui n'a jamais réfléchi au design : « Fais-moi un site moderne et épuré pour un food truck. » Lancez-le dans l'outil de votre choix. Quinze minutes.

Puis regardez le résultat, et posez-vous une seule question : qui a décidé quoi ?

Personne n'a décidé que ce food truck parlait aux étudiants du campus plutôt qu'aux familles du dimanche. Personne n'a décidé que la couleur devait ouvrir l'appétit plutôt que rassurer. Personne n'a décidé de ce que le visiteur doit faire en arrivant, ni pourquoi il reviendrait. La page ressemble à toutes les autres parce que personne n'a rien demandé de précis. Comparez vos résultats entre vous : ils se ressemblent tous.

2. Le mot clé, c'est « demande »#

L'IA fait tout ce qu'on lui demande. C'est vrai, et c'est précisément le point : elle fait ce qu'on lui demande. Elle ne fonctionne pas en autonomie complète. Il lui faut un objectif, un contexte, un public, une intention. Sans ça, elle produit la moyenne statistique de tout ce qu'elle a vu, ce qu'on appelle aujourd'hui le slop : lisse, générique, interchangeable, oubliable.

Ce qui manque à la machine, c'est exactement ce que ce cours vous apprend.

Le cahier des charges est un brief#

Voici le pont entre les deux volets de ce cours. Pendant des années, on a enseigné le cahier des charges comme un document administratif : le client, les objectifs, le public cible, le contenu, la charte, le planning, le budget. C'est toujours vrai. Mais en 2026, ce document est devenu autre chose : c'est le brief que vous donnez à vos outils.

Un cahier des charges bien écrit, c'est un prompt parfait. Un objectif clair, un persona précis, une tonalité définie, une arborescence pensée, une charte graphique argumentée : donnez ça à une IA et elle produit quelque chose de juste. Donnez-lui « fais-moi un site sympa » et elle produit du slop.

Savoir briefer une IA et savoir écrire un cahier des charges, c'est la même compétence. Celui qui sait formuler une intention dirige la machine. Celui qui ne sait pas la subit.

3. Exercice : le prompt révisé#

Reprenez votre sujet. Cette fois, décidez avant d'écrire. Répondez à ces questions sur papier, en cinq minutes :

• Pour qui ? Une personne précise : son âge, ce qu'elle cherche, ce qu'elle craint, où elle est quand elle ouvre le site.
• Pour quoi faire ? Une seule action attendue du visiteur : appeler, réserver, venir, commander.
• Quelle ambiance ? Trois adjectifs, et trois que vous refusez.
• Quelle référence ? Une image de votre téléphone, un lieu, une affiche, une pochette de disque que le site devrait évoquer.
• Quel détail ? Une idée qui n'appartient qu'à ce projet : le camion est orange, le coiffeur collectionne les vinyles, le club a 60 ans.

Réécrivez le prompt avec ces décisions. Relancez. Comparez avec la première version, et avec les résultats des autres.

Ce que vous devriez constater : les pages ne se ressemblent plus. Certaines sont ratées, mais elles sont ratées de façon personnelle. Et c'est vous qui avez fait la différence, pas l'outil.

4. L'IA, partenaire d'idéation et d'expérimentation#

Diriger, ce n'est pas seulement filtrer. L'IA est aussi le meilleur partenaire d'exploration que vous aurez jamais, précisément parce qu'elle est rapide et qu'elle ne se vexe pas :

• Demandez dix logos différents, pas un. Gardez les deux qui vous parlent, demandez dix variantes de chacun.
• Demandez vingt palettes de couleurs à partir d'une photo de votre carnet d'inspiration.
• Demandez cinq maquettes de la même page, dans cinq directions opposées.
• Puis croisez : la typographie de la troisième avec la grille de la première, le ton de la cinquième. Itérez sur ce que vous préférez. Jetez le reste sans regret.

Explorer vingt directions au lieu de deux, produire des maquettes en une journée et passer le reste de la semaine à les rendre bonnes : voilà ce que ces outils changent pour vous. Mais à chaque étape, c'est vous qui choisissez, qui croisez, qui tranchez. L'outil propose, l'étudiant dirige.

5. Diriger, c'est aussi équiper#

Il n'y a pas que diriger qu'il faut savoir faire. Un bon directeur artistique donne à son équipe les moyens de travailler. Avec un agent, c'est pareil : il faut se mettre à sa place.

• Connaître ses capacités et ses limites. Qu'est-ce qu'il fait bien, qu'est-ce qu'il rate, qu'est-ce qu'il ne peut pas voir ?
• Se demander comment il va résoudre le problème. Quelles infos lui manquent ? Quelles décisions avez-vous prises dans votre tête sans les lui dire ?
• Lui fournir un vrai environnement. Un ordinateur avec ce qu'il faut pour travailler, un navigateur pour tester ce qu'il produit, un projet bien structuré.
• L'orienter vers les bons outils. Un bon framework, une bonne bibliothèque, un bon package. Un agent qui part sur un mauvais outil produit du mauvais travail, vite.

C'est pour ça qu'on apprend aussi les bases de Vue.js à la main dans ce cours. Pas pour concurrencer la machine, mais pour savoir de quoi on parle : pour diriger, pour l'aider quand elle est coincée (ça arrive de moins en moins, mais ça arrive), et surtout pour l'orienter vers les bons outils pour le travail qu'on lui demande. Celui qui n'a jamais écrit un composant ne peut pas juger un composant.

6. À la main, avec la machine, ou les deux ?#

Il y a trois façons de traverser ce moment, et elles sont toutes légitimes.

Tout à la main. Certains designers refusent les générateurs et mettent le cœur à l'ouvrage : dessin, collage, typographie, photo, code écrit ligne par ligne. Ce n'est pas un repli nostalgique. Regardez les tendances 2026 : l'imperfection assumée, le collage, la photocopie, le fait-main deviennent des codes de marque recherchés, précisément parce que le monde se noie dans le contenu généré. Quand tout est lisse, la trace de la main vaut cher. Cette voie exige d'être excellent, patient, et d'assumer d'être plus lent.

Tout avec la machine. D'autres embrassent les outils à fond : agents, générateurs, itération massive. C'est la voie de la vitesse et de l'exploration. Son risque est évident : sans œil, sans intention, elle mène droit au slop. Elle ne vaut que si la direction est forte.

Les deux. La plupart d'entre vous, et la plupart des studios, seront ici : la machine pour explorer, itérer, produire vite ; la main pour décider, finir, donner la texture, faire ce que le prompt ne donne pas. L'IA génère, vous finissez à la main.

Choisissez votre voie, mais choisissez-la en connaissance. C'est pour ça que ce cours vous fait travailler les deux mains : p5.js, le dessin, Figma et le code d'un côté ; les agents et les générateurs de l'autre. Et regardez votre position : vous êtes jeunes, vous n'avez pas encore de nom, pas de réputation à protéger. Vous n'avez rien à défendre et tout à essayer. C'est le meilleur moment pour tester les trois.

Ce qui a de la valeur sur le marché en 2026#

Quelle que soit la voie, ce qui se paie est le même. Ce que la machine n'a pas :

• L'intention. Savoir ce qu'on veut dire, à qui, et pourquoi.
• Le goût. Reconnaître ce qui est juste et ce qui ne l'est pas, avant de pouvoir l'expliquer.
• Le souci du détail. Le pixel qui dépasse, la ligne trop longue, le contraste insuffisant. Le slop est fait de détails que personne n'a regardés.
• Creuser une idée. Ne pas s'arrêter au premier résultat. Le premier résultat, c'est la moyenne.
• La personnalité. Une direction artistique qui vous appartient, qu'on reconnaît.
• Se démarquer. Quand tout le monde a accès aux mêmes outils, la différence, c'est vous.

À ça s'ajoutent deux choses qu'on oublie souvent. D'abord la communication : parler à un client, écrire clairement, présenter et défendre un choix. Ensuite le craft : Photoshop, Figma, le dessin restent pertinents dès qu'on veut plus de contrôle que ce que donne un prompt. Continuez à apprendre à dessiner : la main pense.

7. Le contrat de l'année#

Voici comment on va travailler. L'IA est votre stagiaire ultra-rapide, infatigable et sans goût. Vous êtes son directeur artistique : vous décidez, vous briefez, vous équipez, vous jugez, vous corrigez, vous refusez. On vous note sur la direction, jamais sur l'exécution.

Pour diriger, il faut un œil. Et un œil, ça se cultive. C'est l'objet des deux chapitres suivants : le carnet d'inspiration, pour remplir votre base de données visuelle, et le test du slop, pour apprendre à mettre des mots sur ce que vous voyez.

Soyez curieux. Allez à des expos, lisez, regardez des œuvres, consommez de la culture sous toutes ses formes. Travaillez une direction artistique qui soit la vôtre. Vous avez une année, un portfolio à faire et un TFE à préparer. Creusez.