Je ne suis pas designer. Je suis développeur, et j'aime les belles choses. Pendant des années, j'ai passé des soirées sur Awwwards et Behance à chercher de l'inspiration, puis dans Figma à essayer de l'adapter à mes projets. Ça donnait des résultats honnêtes, mais je savais où s'arrêtaient mes compétences : un designer aguerri va plus loin que moi.

Je viens de refaire mon site en travaillant autrement, avec le canevas de design de Claude. Comme le reste de mon carnet, cet article raconte ce que j'ai testé et ce que j'en retiens. Il prolonge mon article sur mon usage de l'IA : l'IA amplifie des compétences qu'on a déjà, et les décisions restent humaines.

Des pistes au lieu d'une seule

Le principe est simple. Pour chaque élément du site (l'en-tête, le menu, les boutons, les cartes, la mascotte, l'e-mail que je reçois quand vous m'écrivez), je décrivais ce que je voulais. Claude affichait sur un canevas entre 6 et 24 alternatives, côte à côte. Je choisissais, j'ajustais en quelques échanges, puis la version retenue était intégrée dans le vrai code du site.

Voir une douzaine de pistes d'un coup change la façon de décider. On ne se demande plus « est-ce que ça me plaît ? » devant une seule proposition. On compare, et les axes qu'on veut vraiment suivre apparaissent vite. Ensuite, on peut s'y plonger à fond.

En chiffres : la refonte complète m'a pris une journée. Avec ma méthode d'avant (inspiration, Figma, code à la main), j'aurais compté une semaine.

Une précision, pour que ce chiffre ne trompe personne : je suis resté dans ma charte. Mes couleurs, mes typographies et ma mascotte existaient déjà. J'ai amélioré chaque partie qui ne me plaisait plus, je n'ai pas créé un site de zéro en un jour.

Un cas réel : la mascotte à la clé

Sur l'accueil, ma mascotte violette tient une clé à côté du bouton qui invite à me contacter. J'aime les interactions cachées, et je voulais qu'elle réagisse quand on s'approche. J'ai demandé 12 alternatives de réactions pour trois moments : quand la souris arrive sur le bouton, quand elle le quitte, et quand elle bouge trop vite autour de la mascotte.

En quelques échanges, j'ai gardé trois réactions :

  • Des confettis jaillissent au-dessus d'elle quand la souris arrive sur le bouton.
  • Un petit bug visuel quand on quitte le bouton sans cliquer : elle tremble, se dédouble en rouge et bleu, et affiche « 404 : visiteur introuvable ».
  • Des yeux en spirale si on fait tourner la souris trop vite autour d'elle : elle a le tournis pendant deux secondes et demie.

À vous : passez la souris sur le bouton, quittez-le sans cliquer, puis tournez vite autour de la mascotte.

Parlons de votre projet

Ou rejouez chaque réaction :Sur téléphone, il n'y a pas de survol. Touchez une réaction pour la voir :

Vous avez demandé moins d'animations à votre appareil : la mascotte reste donc calme. C'est voulu.

La dernière, peu de visiteurs la découvriront. Je l'ai gardée quand même : c'est le genre de détail que j'aime, et qui donne de l'âme à un site.

Ce que j'ai écarté

Parmi les 12 propositions, j'ai refusé toutes celles qui dénaturaient le personnage, celles qui changeaient trop son apparence. Je cherchais une réaction discrète, qui reste la mascotte qu'on connaît. Ce critère, aucune IA ne pouvait le deviner à ma place : c'est mon personnage, et c'est à moi de savoir ce qui lui ressemble.

Ce que j'ai demandé, et comment

Je n'ai pas rencontré de fausse route, et je pense que c'est grâce à la façon de demander. J'ai travaillé de deux manières.

  1. Une demande cadrée

    Ne pas dénaturer la mascotte, respecter le réglage « réduire les animations », décrire précisément le déclencheur (le survol du bouton, par exemple), et donner des exemples du rendu que j'attendais. C'est là que servent mes années de développeur et mes heures passées sur Awwwards : savoir ce qu'on veut, et le dire clairement.

  2. Une demande libre

    À d'autres moments, je n'ai rien précisé de ce que j'attendais, pour laisser des pistes apparaître sans contrainte. C'est souvent là que sortent les idées que je n'aurais pas eues seul.

Il y a encore quelques mois, passer d'une maquette au vrai code demandait beaucoup d'allers-retours. Aujourd'hui, le rendu est quasiment fidèle du premier coup, et mes retours sont compris sans avoir à les répéter.

Ce qui reste entre mes mains

Le point clé : l'IA produit les options. Le choix, et la vérification avant la mise en ligne, c'est mon travail.

Même avec un rendu presque parfait, rien n'est parti en ligne sans passer par moi :

  • Sur téléphone, où il n'y a ni souris ni survol. Les réactions de la mascotte ne s'activent qu'avec une souris, le site reste propre au doigt.
  • Avec le réglage « réduire les animations » activé, pour les visiteurs que le mouvement gêne : les animations s'effacent.
  • Avec Lighthouse, l'outil de mesure de Google, pour vérifier que la vitesse et l'accessibilité n'ont pas reculé.
  • En relisant le code produit, avant de le publier.

C'est le même partage que pour l'audit SEO de mon article précédent : l'IA accélère, mais ce qui part sur un site en production passe par des mains humaines.

Et les designers dans tout ça ?

Je ne prends pas la place d'un designer, et je continue de les recommander. Tout dépend du besoin et du budget. Si vous voulez une identité forte, construite de zéro, je vous oriente vers des designers confirmés, et je développe le site à partir de leur travail.

Mais avec mes compétences, et encore plus avec ces outils, je peux aujourd'hui proposer directement des solutions soignées à des indépendants et des TPE qui n'auraient pas engagé de designer. Je vois l'IA comme un outil qui fait gagner beaucoup de temps à tout le monde, et qui débloque des choses qu'on n'aurait jamais pris le temps de faire. La mascotte qui a le tournis en fait partie.

Ce que ça pourrait changer pour vous

Pour être honnête : je n'ai pas encore utilisé cette méthode avec un client. Je l'ai d'abord éprouvée à fond sur mon propre site, pour savoir ce qu'elle vaut avant de vous la proposer.

Mais la question va vite se poser, et je vois bien où elle sert. Beaucoup de clients ont besoin de voir pour décider. Plutôt que de valider ou refuser une maquette unique, vous pourriez comparer plusieurs pistes pour votre page d'accueil ou vos boutons, choisir celle qui vous ressemble, et avancer plus vite. Les décisions vous reviennent, la vérification me revient, et à la livraison vous recevez le code, les accès et une prise en main, comme pour n'importe quel projet.