L'Espacement et le Rythme

Pourquoi c'est important

L'espacement crée la hiérarchie, le rythme guide l'oeil. Un système spatial coherent (base 4px ou 8px) est le secret des interfaces propres d'Airbnb, Stripe et Apple. Muller-Brockmann l'a formalise des 1961 dans ses travaux sur les grilles.

Le framework

1. 01

   Le base unit (4px ou 8px)

   Tous vos espacements sont des multiples de votre base unit. 8, 16, 24, 32, 48, 64. Ca elimine les décisions arbitraires et crée un rythme naturel.

2. 02

   Micro vs Macro

   Micro : espace entre un label et son input (4-8px). Macro : espace entre deux sections (48-80px). Les deux echelles obeissent au meme système.

3. 03

   Le rythme vertical

   Fixez vos line-heights en multiples de votre base unit. Le texte, les cards, les sections, tout respire au meme rythme. L'oeil detecte cette harmonie sans la nommer.

4. 04

   La grille

   Colonnes, gutters et marges forment la structure. 12 colonnes en desktop, 4 en mobile. Le gutter respecte votre base unit. Pas d'exception.

5. 05

   Proximite = Relation

   Deux éléments a 8px sont percus comme lies. Les memes a 32px sont percus comme separes. L'espacement communique la relation entre les contenus sans un seul mot (Gestalt, proximite).

Pour aller plus loin