Ce que j’aurais souhaité savoir sur les espacements avant de débuter

L’un des sujets qui semble le moins documenté et qui pourtant fait tout le sel d’un Design System c’est bien la gestion des espacements. Je n’ai pas l’impression d’arriver à trouver sufisamment d’informations sur le sujet et pourtant c’est ce qui me fait me tirer les cheveux (enfin ce qu’il en reste).

Au début c’est simple

Un designer arrive avec une règle somme toute cohérente. Partir sur des multiples de 4 comme l’ensemble des design system de la planète en ce moment. On se retrouve donc avec du 4, 8, 16, 32px pour les gouverner tous.

Les designers ajustent le "nudge" dans leur outil préféré pour passer de 10 à 8px lorsque l’on déplace les éléments, et le développeur ajoute une série de variables basées sur 1rem (16px).

Jusqu’ici tout le monde est heureux, les intégrateurs vont donc aller inspecter les maquettes, et trouver (normalement) leurs petits. Si l’on omet les cas ou les espacements ont un peu ripés de quelques pixels et les calculs approximatifs qui donnent des chiffres après la virgule sur certains espacements… globalement ça va.

Et puis tout déraille

Alors évidémment comme on souhaite simplifier la vie des intégrateurs et aussi par soucis d’efficacité, nous allons ajouter des marges ou des padding par défaut au-dessus de chaque composant.

Une bonne idée qui peut parfois se transformer en léger cauchemard lorsque des paddings s’ajoutent les uns aux autres. Adieu donc les jolies maquettes avec des espacements sélectionnés avec amour. On se retrouve avec des gaps gigantesques entre les composants ou alors des assemblages hasardeux ou les éléments qui devaient être proches les uns des autres se retrouvent dispersés sans cohérence.

Une solution à l’horizon

Pour donner plus de flexibilité, certains composants sont créés en dev purement pour gérer les espacements entre les autres composants. Les intégrateurs peuvent alors personnaliser l’écart et espérer reproduire bon an, mal an, l’affichage prévu dans les écrans statiques.

C’est sans compter avec le responsive

La vie d’un designer est relativement simple. Je crée une maquette en 375px, une autre en 1440 et roule ma poule. Les responsables valident et tout le monde semble se congratuler d’un travail rondement mené. Ce n’est bien sur pas ça que l’utilisateur verra. Ce petit rigolo, à l’inverse, aura un setup un peu bizarre à base de zoom sur l’écran (si l’on est chanceux) ou carrément de zoom sur la police qui va complètement détruire ces merveilleux écrans réalisés avec tendresse et artisanat.

Même chose pour ces sombres personnages qui affichent côte à côté deux navigateurs, où ceux (de moins en moins nombreux je vous l’accorde) qui vont ouvrir votre service sur un ipad et ses nombreuses déclinaisons.