Intéressons-nous aujourd’hui à un aspect souvent sous-estimé mais crucial du design : l’espace.
J’ai toujours aimé dire que l’espace, sur une interface, c’est un peu comme la virgule dans une longue phrase : c’est ce qui permet de respirer.
Dans une interface, l’espace n’est pas du vide : il faut plutôt voir cela comme quelque chose qui permet aux éléments de rester visibles.
UniCore propose une grille d’espacements qui repose sur des primitives simples et des usages sémantiques clairs.
Aussi, et comme toujours, le système s’adapte automatiquement aux différents équipements (desktop, laptop, tablette, mobile).
Les primitives d’espacement
La base repose sur une échelle modulaire.
Chaque valeur primitive correspond à un multiple de 2 ou 4, exprimé en pixels :
Exemple d’échelle :
px = 1 ; 0,5 = 2 ; 1 = 4 ; 1,5 = 6 ; 2 = 8 ; 2,5 = 10 ; 3 = 12 ; 3,5 = 14…
Cette granularité permet d’obtenir des espacements réguliers mais flexibles.
Les espaces sémantiques
À partir de ces primitives, UniCore définit des espaces sémantiques selon trois usages principaux : l’intervalle entre éléments (gap), la marge (margin), et l’espacement interne (padding).
Par exemple, padding-1 correspond à 4px (space-1) pour l’équipement de type ordinateur (desktop) et des équipements et à 6px (space-1,5) pour les équipements de type tablette et mobile (laptop, tablet, mobile).
Tableau des valeurs d’espaces sémantiques – UniCore V1.0
L’intervalle entre éléments (gap) est utilisé pour gérer l’espace dans un conteneur (stack, grid, row…).
La marge elle, gère l’espace externe d’un élément vis-à-vis de son environnement. Elle est utile pour séparer des blocs ou donner de la respiration à un composant dans une page.
Enfin, l’espacement interne (padding) gère l’espace interne d’un composant, entre son contenu et ses bords. Cela garantit confort de lecture (un texte qui ne colle pas aux bords par exemple) et clarté visuelle.
Une logique responsive intégrée
Comme pour les tailles, les espacements s’adaptent automatiquement selon l’équipement.
- Sur un grand écran, les espacements restent équilibrés pour occuper l’espace sans exagération.
- Sur un mobile, ils deviennent légèrement plus grands afin de préserver la lisibilité et le confort tactile (attention toutefois à ne pas exagérer non plus, l’espace alloué sur les petits équipements étant restreint)
Les espaces dans UniCore ne sont pas des pixels posés au hasard.
Ils constituent la « respiration » d’un système, pensé pour la cohérence, la lisibilité et l’adaptation.
