Faragiri

Apprendre le design

Sept sujets, un ordre qui marche, et l'endroit exact où l'on décroche : le libellé qui rallonge en français et casse la maquette qu'on ne peut plus modifier.

6Sections
10Min de lecture
1Profondeur

Le découpage

Un écran, cinq des sept sujets, et deux qui n'y sont pas

L'inscription au panier hebdomadaire d'une AMAP de Villeurbanne. Chaque partie de cet écran a été décidée dans un sujet différent de ce pilier. La personne qui s'inscrit n'en voit qu'une seule.

panier-de-cusset.example/inscription
  1. 01Le Panier de Cusset
  2. 02Légumes de saison, 42 semaines par an
  3. 03Un cageot dessiné à la main
  4. 04Prénom, Nom, Point de retrait, Valider mon inscription
  5. 05Le paiement était demandé ici, il a été repoussé au premier retrait
  1. 01Le logotypeDesign graphique. Il doit tenir sur le tampon de l'association comme il tient ici
  2. 02Les tailles et les écartsLes bases. Toutes les mesures de l'écran sortent d'un seul nombre
  3. 03L'imageIllustration, faute d'une photo du dépôt utilisable en février
  4. 04Les champs et le boutonDesign d'interface. Le libellé du bouton fait 22 signes et le composant doit tenir
  5. 05L'ordre des questionsUX. Quelle question vient d'abord, et laquelle n'est pas posée

La CAO et les outils n'y sont pas. Rien sur un écran n'a jamais été usiné, et le programme dans lequel celui-ci a été dessiné ne laisse aucune trace qu'un lecteur puisse voir, ce qui est l'argument pour que les outils soient un sujet plutôt que le haut de la carte.

Une affiche devient de l'encre. Une maquette d'écran devient du code que quelqu'un d'autre écrira. Un plan de pièce devient du métal, et une machine le mesure. Trois fins de fichier, et c'est ce qui découpe ce domaine en sept sujets plutôt qu'en trois métiers.

Ces trois fins portent en France des noms que le client emploie avant vous. Le bon à tirer se signe, et une fois signé la faute vous appartient et part à 2 000 exemplaires. La recette se prononce sur un écran qui, lui, continuera de bouger après votre départ. La cote se vérifie au pied à coulisse et ne se discute pas. Choisir un sujet ici, c'est choisir lequel de ces trois moments vous acceptez d'attendre.

Trois fins de fichier, sept sujets, et un seul logiciel

Deux sujets se terminent dans l'encre, deux dans du code que vous n'écrirez pas, un dans la matière. Le sixième ne fabrique aucun objet et traverse les cinq autres : les bases du design, la grille, le contraste, la hiérarchie et l'espace. Le septième, les outils du design, est posé à ce niveau parce que c'est ainsi que la question se tape, et pas parce qu'un logiciel serait une sorte de design.

Le découpage habituel est celui des fiches de poste : le graphiste d'un côté, l'UX/UI designer de l'autre, le dessin d'images en marge comme un loisir qui paie parfois, et le dessinateur-projeteur nulle part sur la carte. Il tient jusqu'à la semaine où quelqu'un doit faire deux de ces métiers, et la plupart des semaines sont celles-là. L'oubli coûteux est le dernier : dessiner une devanture ou un carter demande le même genre de décision que mettre une affiche en page, devant un juge qui mesure. Le savoir a une forme, dit la page d'accueil de cet atlas ; des huit mondes qu'elle ouvre, celui-ci est le seul dont les frontières sont des arguments sur qui contrôle le travail.

Se situer là-dedans tient à une seule question : une fois le travail livré, qui trouve la faute ? Si c'est vous en rouvrant le fichier le lendemain matin, vous êtes du côté de l'encre, et la difficulté est de savoir s'arrêter. Si c'est un inconnu qui n'arrive pas à finir ce qu'il était venu faire, vous êtes du côté de l'écran, et la difficulté est que personne ne vous écrira pour le dire. Si c'est un contrôle dimensionnel, vous êtes en dessin technique, où avoir tort est au moins mesurable.

L'espacement avant la couleur, et le logiciel en dernier

L'ordre que presque tout le monde prend commence par le logiciel, parce qu'il existe un tutoriel de trois heures pour le logiciel et aucun pour le jugement. Une deuxième raison s'ajoute en France : la commande arrive rédigée en noms de fichiers. Le client demande un fichier Illustrator ou une maquette Figma, jamais une décision, et on apprend donc un format avant d'apprendre à choisir. Le signe le plus net est un portfolio d'écrans jolis, tous pour un produit que personne n'a commandé, et tous impossibles à modifier. Le logiciel se prend en dernier, appris dans la forme du travail plutôt que dans celle de ses menus.

Dans les bases, un deuxième mauvais ordre existe et il est plus discret. La couleur s'apprend en premier, parce que c'est la partie qui ressemble à du design, et l'espacement attend que personne ne remarque qu'il a été sauté. Prenez-les dans l'autre sens. Une page composée dans un seul gris avec les écarts justes bat une palette posée sur des écarts faux, et un client qui trouve qu'une maquette fait bon marché regarde presque toujours l'espacement. Le français durcit encore cet ordre : à contenu égal, une interface française tient environ un cinquième de signes de plus que sa source anglaise, et la place manque donc bien avant que la palette ait la moindre importance. L'espacement avant la couleur est l'ordre, et la palette devient plus facile ensuite parce qu'il lui reste moins à rattraper.

Avant la lecture

Ce sur quoi l'œil se pose avant qu'un mot ait été lu

La taille tire le plus fort, puis le contraste, puis le vide autour. La position vient quatrième et la couleur dernière.

Premier regard
  • L'écart de taille39 contre 16 sur la même carte, et l'œil n'envisage pas l'autre
  • Le contrasteLe noir sur blanc arrive avant le gris sur blanc, quoi que fasse le gris
  • L'isolementLe vide autour d'une chose, et c'est pourquoi un écart est une décision et pas un reste
  • La positionLe haut de la page et son bord gauche, une fois les trois au-dessus à égalité
  • La couleurElle déplace l'œil le moins, et c'est elle qu'on apprend en premier

L'ordre est argumenté ici plutôt que mesuré, et il vaut pour une page de texte ordinaire. Une seule photographie forte redistribue les cinq.

Le premier vrai changement est une chaîne de caractères

C'est ici que les gens de ce pilier cessent de progresser sans s'apercevoir qu'ils se sont arrêtés. Dans Figma les deux noms sont auto layout et les composants, et quelqu'un qui les saute peut dessiner n'importe quel écran et ne peut en modifier aucun.

Hakim Benali en est à sa sixième semaine sur le formulaire d'inscription du Panier de Cusset, une AMAP de Villeurbanne, et il a 18 écrans. L'association relit et demande une seule chose : le bouton ne dira plus Envoyer mais Valider mon inscription, 7 signes contre 22. Le bouton déborde alors à la largeur du téléphone, sur les 18 écrans. Dessiné sur le calque, cela fait 18 fichiers ouverts, une quarantaine de boutons repris à la main, et deux laissés à l'ancienne largeur parce qu'il était tard. Construit en composant, c'est une seule valeur, tapée une fois, et 18 écrans se redessinent.

La conclusion qu'on tire d'une soirée passée à élargir des boutons est qu'on travaille trop lentement. Elle est fausse : la maquette livrée ne répondait qu'à une seule chaîne de caractères, et le français en fait arriver une autre plus vite qu'ailleurs, parce que le premier retour d'un client français porte presque toujours sur un libellé. La règle qui sort de là se vérifie au caractère près : dessiner sur la chaîne la plus longue, pas la plus courte. Et la plus longue ne se devine pas depuis l'anglais, parce que le français raccourcit aussi souvent qu'il allonge.

  • Save fait 4 signes, Enregistrer en fait 11.
  • Last name en fait 9, Nom en fait 3.
  • Birth date en fait 10, Date de naissance en fait 17.
  • Search en fait 6, Rechercher en fait 10.
  • Password en fait 8, Mot de passe en fait 12.

Ce n'est pas un travers propre à Figma. La même impasse porte dans InDesign le nom de styles de paragraphe : composer le texte en le sélectionnant et en le changeant fonctionne jusqu'à la page 96 d'un catalogue, le jour où le client descend le texte courant d'un cran et où il n'existe nulle part d'où le descendre.

L'endroit où l'on décroche

Un changement entré par le bas redessine tout, ou il se refait 18 fois à la main

Rien ici n'est une étape et rien n'est numéroté. Chaque dalle est portée par celle du dessous, et la dalle par laquelle le changement entre, c'est ce qu'il coûte.

  1. 18 écransCe que l'association regarde, et la seule couche que la plupart construisent18 reprises
  2. Le formulaire d'inscriptionAssemblé à partir du composant plutôt que redessiné à côté
  3. Le champ et son libelléLe composant, et la dalle qu'un fichier de calques n'a pas
  4. Des écarts de 8 et des marges internes de 16Deux nombres qui portent un nom, tenus au même endroitune reprise

Elle ne dit rien du temps que coûte la construction de la dalle du bas, ce qui est l'objection juste : le premier écran est plus lent ainsi, le dix-huitième ne l'est pas.

Ce qu'on ouvre en 2026, et ce que le client attend

Figma tient l'interface par défaut depuis 2019 environ, quand il a pris la place de Sketch en tournant dans un navigateur et en laissant plusieurs personnes dans le même fichier. L'offre gratuite est réelle et suffit à apprendre tout ce qui précède. Les deux fonctions citées plus haut n'y sont pas des options avancées : elles sont la raison pour laquelle ce programme diffère de celui qu'il a remplacé.

L'impression, elle, n'a pas bougé. InDesign met en page les documents longs et Illustrator dessine les vecteurs ; InDesign a pris cette place à QuarkXPress au milieu des années 2000 sans que rien ne la lui reprenne depuis, et il n'existe aucun chemin gratuit, seulement un essai. En France la question n'est d'ailleurs pas là : l'agence et l'imprimeur attendent un fichier Adobe, et c'est un fait sur les clients plutôt que sur le logiciel. Affinity Designer et Publisher sont ce qu'on achète à la place quand l'abonnement est impossible, la licence se paie une fois, et les imprimeurs acceptent les fichiers, ce qui est le seul test qui compte. Serif a été racheté par Canva en 2024 et les conditions ont bougé depuis ; vérifiez le prix le jour même.

Penpot est l'autre réponse honnête : libre, hébergeable chez soi, et celle vers laquelle aller quand les fichiers n'ont pas le droit de vivre sur le serveur de quelqu'un d'autre, ce qui arrive dès qu'un donneur d'ordre public entre dans le projet. AutoCAD tient le dessin technique depuis 1982, quand il a remplacé la planche à dessin, et c'est le format qui explique sa place : tous ceux à qui vous enverrez un plan savent ouvrir un DWG. C'est un abonnement, gratuit pour les étudiants, et FreeCAD est la voie libre. Les modèles génératifs fabriquent beaucoup de variantes en peu de temps, ce qui est un gain réel sur le premier après-midi d'un projet, mais ils ne tiennent aucun système : leur place est là où la variation est le produit, c'est-à-dire l'IA générative, et pas là où c'est la constance.

Reste l'outil dont aucune page anglaise ne parle, et il ne s'installe pas : en France le contraste n'est pas une affaire de goût. Le RGAA est la déclinaison française de la norme européenne, il s'impose aux organismes publics, et depuis l'entrée en application de l'accessibilité européenne en juin 2025 il atteint un ensemble de services privés qui s'élargit. Il se consulte librement et se coche critère par critère. La conséquence pratique tient en deux valeurs : le gris #767676 sur blanc passe 4,5 pour 1, #999999 non, et c'est la différence entre un texte qu'on lit et un texte qui disparaît sur un téléphone en plein soleil.

Le signal, c'est de pouvoir dire pourquoi chaque taille est celle-là

Ouvrez un fichier fait il y a un mois et comptez les tailles de caractères distinctes. Le fichier d'un débutant en contient onze ou douze, chacune obtenue en tirant une poignée jusqu'à ce que cela paraisse juste ; celui de quelqu'un qui a appris les bases en contient cinq ou six, reliées par un nombre qu'il peut énoncer à voix haute. Une carte A5 pour une conserverie associative de Quimper, composée à partir d'un texte courant de 16 pt : multipliez par 1,25 et arrondissez à chaque pas, et au-dessus viennent 20, 25, 31 et 39 ; divisez une fois et 13 se place en dessous pour la ligne d'adresse. La carte est donc réglée sur une échelle typographique de 16, 20, 25, 31 et 39, avec 13 pour les mentions et 31 laissé de côté, parce qu'une échelle est un jeu où l'on choisit et pas un jeu qu'il faut dépenser.

Les écarts marchent pareil. Prenez une unité et multipliez-la : un 4 donne des écarts de 8 et des marges internes de 16, et toutes les mesures du formulaire de Hakim tombent alors sur 4, 8, 16, 24 ou 32. Ce qui compte n'est pas le choix du 4, c'est qu'un écran construit sur cinq valeurs d'écart paraisse composé et qu'un écran construit sur dix-neuf paraisse malade, sans que personne, vous compris, puisse dire laquelle des dix-neuf était fausse. Une dernière valeur ne demande aucun avis : le texte courant tient 60 à 75 signes par ligne, comptés plutôt que sentis, et une ligne de 110 signes est la première raison pour laquelle une page dont personne ne s'est plaint n'est pas lue.

Le signal à trois mois n'est donc pas que le travail est plus joli. C'est que quelqu'un d'autre ouvre votre fichier et change la couleur d'accent en moins d'une minute, et qu'un libellé rallongé de dix signes ne vous coûte plus une soirée.

L'échelle

Six tailles sorties d'un seul nombre, et des pas qui grandissent avec elles

Le pas de 31 à 39 est plus grand que celui de 13 à 16, et c'est pourquoi un jeu construit par multiplication paraît régulier alors que ses écarts ne le sont pas.

Corps en points sur une carte A5 pour une conserverie associative de Quimper, depuis une base à zéro.

  1. 13l'adresse
  2. 16le texte courant
  3. 20ce qu'il faut apporter
  4. 25les titres
  5. 31non utilisé
  6. 39le nom

Elle laisse de côté l'interlignage, qui est l'autre moitié d'une échelle et se règle en rapport plutôt qu'en taille.

Par où entrer

Quel que soit le sujet qui vous a amené ici, les bases passent d'abord, et la porte d'entrée est la typographie, parce que la plupart de ce qu'un client appelle un problème de mise en page est un problème de texte déguisé. La page la moins évidente du pilier est Apprendre à voir, et c'est celle qui change le plus : cela s'entraîne en refaisant à taille réelle un travail qu'on admire, puis en mesurant où le sien est parti ailleurs, et c'est la même compétence que la photographie entraîne dans un viseur.

Prenez l'UX design avant le design d'interface quand la chose sera utilisée plutôt que regardée, et entrez par l'enquête plutôt que par le maquettage, parce que le maquettage est la partie bon marché. N'entrez dans l'interface par les composants qu'après avoir construit deux fois la même chose à la main ; comme première leçon, une bibliothèque est un classeur vide. Un écran se termine d'ailleurs dans un navigateur et pas dans le fichier, ce qui fait du développement web un détour plus court que la plupart des maquettistes ne le croient.

Le design graphique est le sujet à ouvrir quand le travail sera imprimé, parce que l'impression est l'endroit où une faute cesse d'être modifiable, et l'illustration celui où l'on cale sur la fin plutôt que sur le début. La CAO et le dessin technique est le sujet que la plupart des cartes du design laissent tomber, et ses plans doivent être lus par quelqu'un que vous ne rencontrerez jamais, dans un atelier, vite. Figma vient quand vous savez ce que vous fabriquez et que vous voulez le programme hors du chemin.

Ce qu'aucun des sept ne tranche, c'est le délai : le temps qui passe entre le moment où vous livrez et celui où vous apprenez que c'était faux. Sur un tirage, c'est le matin où les cartons arrivent. Sur une pièce usinée, c'est l'instant où deux morceaux refusent de se rejoindre. Sur un écran, la recette arrive trop tard pour vous servir, et la question à poser ensuite est donc comment savoir avant elle. Elle a une réponse, elle s'achète par après-midi, et c'est l'utilisabilité.

À côté

Au-dessus