Claude Design

Claude Design produit des visuels à partir d’une description : maquettes d’interface, présentations, documents d’une page, schémas. C’est un produit distinct de la conversation ordinaire, avec son propre espace de travail.

Ce chapitre explique à quoi il sert réellement, et — point tout aussi important — à quoi il ne sert pas.

Ce que ça produit, et pour qui#

L’usage type est le passage de l’idée au montrable. Vous avez une intention, vous n’avez ni le temps ni les compétences pour la mettre en forme, et vous devez la faire comprendre à quelqu’un.

Ce que ça sert très bien.

Une maquette d’écran pour discuter d’une fonctionnalité avec une équipe. Une présentation dont vous avez le contenu mais pas la mise en forme. Un document d’une page pour synthétiser une offre. Un schéma qui explique un processus. Plusieurs directions visuelles à comparer avant d’engager un vrai travail.

Ce que ça ne sert pas.

Construire une identité de marque. Produire une interface qui partira en production sans reprise. Remplacer le travail d’un designer sur un support qui représentera l’entreprise pendant des années.

La bonne façon de le voir : c’est un outil de conversation, pas un outil de production finale. Il fait exister une idée assez vite pour qu’on puisse en discuter — ce qui est déjà énorme, parce que la plupart des idées meurent faute d’avoir pu être montrées.

Le brief : ce qui change tout#

Sans direction, un style par défaut s’applique. Il est cohérent, souvent agréable, et il ne sera pas le vôtre. Ce n’est pas un défaut d’exécution : c’est l’absence de brief.

Un brief visuel utile ressemble à ceci.

Objet : [ce qu’il faut produire, et pour quel usage précis].
Public : [qui regarde, dans quel contexte, avec combien de temps].
Message unique : [ce que la personne doit retenir, en une phrase].

Direction visuelle :
- Couleurs : [codes hexadécimaux exacts]. Couleur d’accent : [code],
  utilisée uniquement pour [quoi].
- Typographie : titres en [police], texte en [police]. Si tu ne peux
  pas les utiliser, prends les plus proches et dis-le-moi.
- Densité : [aérée / dense], et pourquoi.
- Références : ce que ça doit évoquer, ce que ça ne doit surtout pas
  évoquer.

À éviter absolument : [les travers de votre secteur : dégradés,
photos de gens qui se serrent la main, icônes génériques, jargon].

Contraintes : [format, nombre d’écrans ou de pages, accessibilité].

Les deux lignes qui rapportent le plus sont « ce que ça ne doit surtout pas évoquer » et « à éviter absolument ». Comme au chapitre 6, l’interdit nommé est plus efficace que la consigne positive.

Imposer une charte#

Si votre organisation a une charte, ne la décrivez pas : donnez-la.

Une charte décrite en mots — « moderne, épuré, professionnel » — ne contient aucune information manipulable. Ce qu’il faut fournir :

• les codes couleur exacts, avec l’usage de chacun ;
• les noms de police et les tailles ;
• les règles d’espacement et de grille, si vous en avez ;
• un exemple existant que vous jugez conforme.

L’exemple existant vaut plus que la description, pour les raisons vues au chapitre 6.

Selon les évolutions du produit, il est possible d’importer directement un système de design existant plutôt que de le décrire — vérifiez ce que propose votre version.

Itérer sur un visuel#

Les principes du chapitre 15 s’appliquent, avec une spécificité : sur un visuel, la modification ciblée est encore plus importante, parce qu’une réécriture complète change l’équilibre général.

Désignez précisément. « Le bloc de droite, celui qui contient les trois chiffres » plutôt que « la partie du milieu ».

Une modification à la fois. Trois changements simultanés produisent un résultat dont vous ne saurez pas lequel a marché.

Distinguez le fond de la forme. « Ce n’est pas la mise en page qui ne va pas, c’est que le message principal n’est pas celui qu’il faut. » Sans cette distinction, vous ferez retoucher indéfiniment une mise en page qui sert le mauvais message.

Ce qui marche et que je veux garder tel quel : [désigner].

Ce qui ne va pas : [désigner précisément, et dire POURQUOI — pas
« je n’aime pas » mais « on ne voit pas tout de suite le chiffre
principal »].

Modifie uniquement cela. Ne retouche ni la palette, ni la typographie,
ni la structure générale.

Dire pourquoi quelque chose ne va pas change complètement le résultat : « je n’aime pas cette couleur » produit une autre couleur au hasard ; « cette couleur ne se distingue pas assez du fond, le titre passe inaperçu » produit une correction qui règle le problème.

Du visuel au produit#

Une chaîne intéressante existe entre Claude Design et Claude Code : une maquette peut servir de point de départ à une implémentation réelle, et le résultat peut revenir.

Deux mises en garde valent d’être posées.

Une maquette n’est pas une spécification. Elle montre à quoi ça ressemble, pas comment ça se comporte : ce qui se passe quand les données manquent, quand le texte est trois fois plus long, quand l’utilisateur fait une erreur.

Le code produit à partir d’une maquette est un point de départ. Accessibilité, comportement sur petit écran, gestion des états d’erreur : autant de choses qui se travaillent après, et qui font la différence entre une démonstration et un produit.

Je dois présenter [l’offre] à [qui], en [durée], pour obtenir
[la décision précise attendue].

Ne produis rien de visuel pour l’instant.

Donne-moi seulement : le titre de chaque diapositive, et le message
unique qu’elle porte.

Contraintes : une idée par diapositive ; la conclusion posée avant la
moitié du temps ; une diapositive consacrée à l’objection la plus
probable de [la personne qui décide].

Tu es [la personne qui décide], et tu es pressé.

Tu ne regardes que les titres et le premier niveau de chaque
diapositive. Que comprends-tu ? Que te manque-t-il pour décider ?

Puis : quelle est ta première objection, et à quelle diapositive
apparaît-elle ?

Ce qu’il faut retenir#