Une interface peut avoir les bonnes couleurs, la bonne typographie, et donner malgré tout l'impression d'un assemblage bâclé. Le coupable est rarement celui qu'on croit. Regardez les vides entre les éléments plutôt que les éléments eux-mêmes.
L'espace entre un titre et son paragraphe. La distance entre deux cartes. Le rembourrage à l'intérieur d'un bouton. C'est là, dans neuf cas sur dix, que tout se délite. Le spacing n'a pas été décidé, il a été estimé à l'œil, élément après élément, jusqu'à ce que plus rien ne se réponde.
C'est la partie du design que la plupart des gens ignorent, parce qu'elle ne se photographie pas comme une palette. Personne ne fait de capture d'écran en s'exclamant sur la qualité des marges. Pourtant l'espacement travaille plus dur que presque tout le reste, et c'est ce qui se corrige le plus facilement une fois le système compris.
Le spacing n'est pas décoratif. Il communique. Ce principe vient d'une loi de la perception visuelle, la loi de proximité issue de la Gestalt : les éléments proches sont perçus comme un groupe, pas comme des objets isolés. Le cerveau opère ce classement seul, sans qu'on le lui demande.
Autrement dit, chaque décision d'espacement est une décision de regroupement, que vous le vouliez ou non. L'erreur classique consiste à placer le label d'un champ à égale distance de deux zones de saisie. L'utilisateur doit alors calculer : « ce label appartient-il au champ au-dessus ou à celui du dessous ? » Personne n'a conçu cette confusion volontairement. Elle est née d'un espacement arbitraire.
Quand le spacing est aléatoire, le cerveau cherche quand même un motif, et échoue. Cet échec se traduit par un vague « quelque chose cloche », même quand la personne serait incapable de dire quoi. La plupart des interfaces qui paraissent brouillonnes souffrent d'un problème de proximité, pas de couleur.
La solution vers laquelle presque tous les grands systèmes de design ont convergé tient en une phrase : choisir une unité de base et faire de chaque valeur d'espacement un multiple de celle-ci. On utilise donc des multiples de 8 (8, 16, 24, 32, 40, 48, 56, 64) pour toutes les marges, le padding, les largeurs, les hauteurs, les interlignes et même la taille des icônes.
Ce chiffre n'a rien d'arbitraire. Les écrans ont besoin de calculs qui tombent juste partout. La plupart des résolutions se divisent proprement par 8 sur au moins un axe, ce qui évite le flou des demi-pixels sur Android, iOS et bureau. Les largeurs mobiles de 360, 375 ou 390 pixels se divisent toutes sans reste par 8.
Google Material Design place ce système au cœur de son fonctionnement. Les Human Interface Guidelines d'Apple s'y réfèrent aussi, avec un peu plus de souplesse. La grille de 8 points s'est imposée comme standard entre 2017 et 2018, portée par des designers comme Elliot Dahl et adoptée par des acteurs comme Google et IBM. Chez Atlassian, chaque valeur d'espacement est un multiple de l'unité de base, de 0 à 80 pixels.
Le vrai bénéfice n'est pas la pureté esthétique. C'est la suppression d'une décision que vous prendriez sinon des centaines de fois. Plutôt que de vous demander si un bouton mérite 13 ou 15 pixels de padding, la grille tranche : 8 ou 16. Cette contrainte libère l'attention pour les vrais problèmes, la hiérarchie et l'interaction.
Pour les endroits serrés, écart entre une icône et son label, rembourrage compact d'un badge, la plupart des systèmes autorisent une sous-unité de 4px. Quand 8px paraît trop large et 0 trop petit, 4px comble le vide. La cohérence prime sur le dogme. Ce qu'il faut fuir, ce sont les valeurs sorties de nulle part comme 13 ou 19 pixels, adoptées parce qu'elles « sentaient bon » sur le moment.
Une échelle courante sur laquelle beaucoup d'équipes se calent : 4, 8, 12, 16, 24, 32, 48, 64, 96. Elle couvre la grande majorité des besoins, du petit écart entre une icône et son texte jusqu'à l'espace entre deux sections de page.
Une fois l'échelle choisie, la vraie compétence consiste à décider quelle valeur va où. Une règle suffit : l'espace à l'intérieur d'un groupe doit être plus petit que l'espace entre les groupes.
Prenez une carte avec 20px de padding intérieur. Si vous en placez deux côte à côte, la marge qui les sépare doit être d'au moins 20px, voire plus. Chaque carte reste ainsi une unité distincte, entourée d'un vrai souffle. Si la marge était plus petite que le padding, les deux cartes fusionneraient visuellement et le regroupement deviendrait illisible.
Cette règle du interne-vers-externe s'applique partout, pas seulement aux cartes. Sur un formulaire, on colle le label à son champ (4 à 8px), puis on ménage un écart net (24px et plus) avant le groupe suivant. Un label proche de son champ dit « ceci va ensemble ». Le même label noyé dans le vide oblige l'utilisateur à calculer au lieu de lire.
Sur une fiche produit, le prix se colle au titre pendant que le bouton d'ajout au panier reçoit une séparation nette, parce qu'il s'agit d'une action d'une autre nature. Le principe ne varie pas : un espacement serré signifie « c'est une seule idée », un espacement généreux signifie « ce sont des idées différentes ». Inversez le rapport quelque part et l'utilisateur devra deviner une structure qui aurait dû sauter aux yeux.
Pas besoin d'outil supplémentaire pour contrôler votre propre travail. Ouvrez l'interface, site en ligne ou fichier Figma, peu importe, et déroulez cette vérification en une dizaine de minutes.
Si la majorité de vos cinq mesures sont hors échelle, ou si le regroupement ne correspond pas au contenu, vous avez trouvé où corriger et pourquoi la mise en page vous semblait bancale avant même de pouvoir l'expliquer.
Trop de padding dans les cartes. C'est la surcorrection la plus fréquente. On lit quelque part que « le blanc fait premium » et on applique la formule sans limite, 32 ou 40 pixels de rembourrage partout, quelle que soit la densité du contenu. Résultat : des cartes creuses plutôt qu'aérées. Le padding intérieur doit suivre la densité du contenu, pas une vague croyance que davantage vaut mieux.
Pas assez d'espace entre les sections. L'erreur inverse, souvent née de la volonté de caser plus de contenu au-dessus de la ligne de flottaison. Quand les ruptures de section sont compressées, l'utilisateur perd le repère qui indique qu'un sujet s'achève et qu'un autre commence. Il finit par lire la section trois comme la suite de la section deux.
Un espacement incohérent entre composants similaires. Si une carte affiche 16px de padding et sa voisine 20px, personne ne le remarquera consciemment. Mais la mise en page paraîtra vaguement instable, comme un cadre légèrement de travers qui vous agace avant que vous n'en identifiiez la cause.
Oublier le mobile. Des éléments qui semblent groupés sur un écran de 1440 pixels peuvent s'effondrer à 375 pixels si la mise en page n'a pas été vérifiée aux deux tailles.
Dans Figma, réglez le « Big nudge » sur 8px depuis les préférences. Chaque Maj + flèche déplace alors un élément d'exactement une unité de grille. Ce simple paramètre supprime presque toute tentation d'estimer un écart à l'œil, puisque la façon la plus rapide de bouger un objet est déjà verrouillée sur votre échelle.
Définissez ensuite votre échelle sous forme de variables plutôt que de nombres bruts (space/100 = 8, space/200 = 16, et ainsi de suite) pour que chaque membre de l'équipe pointe vers les mêmes jetons. Côté développement, les propriétés personnalisées CSS reproduisent la même logique :
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; }
Une fois ces jetons en place, plus personne ne saisit une valeur en pixels bruts dans une marge ou un padding. On appelle un token, et le token est toujours sur l'échelle par définition. Une carte utilise padding: var(--space-4) et margin-bottom: var(--space-6), sans discussion.
Le système en lui-même n'a rien de fascinant. C'est une courte liste de nombres. Ce qu'il fait, c'est prendre une décision que vous prendriez sinon mal, des centaines de fois, et la transformer en une décision prise une seule fois. Tout le reste n'est que de l'application, et c'est précisément cette application qui donne à une interface l'air d'avoir été voulue.
