Maîtrisez l’art des espacements pour sublimer le design de vos pages

La mauvaise gestion des espaces est l’une des erreurs les plus courantes que je rencontre sur les sites web. Et si en regardant le design de votre site, vous vous dites : « Je ne sais pas pourquoi, mais il y a quelque chose qui cloche ». Eh bien, il s’agit très probablement d’un problème d’espacement, et donc de mise en page.

Ça peut paraitre exagéré, mais la maitrise des espacements est une forme d’art qui apporte immédiatement cohérence, clarté et professionnalisme à votre mise en page :

→ vos visiteurs consomment plus facilement votre contenu
→ les espacements créent une hiérarchie visuelle qui guide vos visiteurs vers les éléments importants
→ ils apportent une cohérence globale à votre page

Voici le sommaire de cet article :

• L’importance du vide en web design
• Utilisez une échelle d’espacement pour gagner du temps et préserver la cohérence de votre design
• Appliquez votre échelle d’espacement à vos éléments de design

C’est parti !

L’importance du vide en web design

Le vide ou espace blanc est l’espace laissé entre vos éléments. C’est un des aspects les plus importants en web design. Pourtant, il est souvent considéré comme une perte d’espace, un gâchis. En réalité c’est un outil très puissant qui permet de donner de l’air à votre contenu (et à vos visiteurs !) et qui apporte un équilibre général à la page.

Voyons quelques cas d’utilisation du vide.

Séparer deux éléments sans artifice

Prenons l’exemple de 2 éléments textuels avec à chaque fois un titre et un paragraphe. Si vous voulez les séparer, vous allez sans doute utiliser des « artifices » comme un séparateur ou une couleur de fond différente.

Bien que ces techniques soient tout à fait valables, elles peuvent surcharger inutilement votre page. Un simple espace vide rempli cette fonction de séparation tout en conservant un design propre et minimaliste.

Mettre un élément en valeur

Si vous voulez faire ressortir un élément important, un bouton par exemple, il y a des chances pour que vous n’y alliez pas avec le dos de la cuillère 😉 En général nous utilisons la taille et la couleur. Tout le monde fait ça, même les pros !

Mais en ajoutant simplement beaucoup de vide autour de notre élément, on capte l’attention de notre visiteur en conservant un design propre et élégant.

Donner une impression de luxe

Le vide a également une fonction esthétique très utilisée par les marques de luxe.

Si vous vous baladez sur des sites de marques de luxe, vous verrez que les espaces vides sont très largement utilisés :

Dans ces deux exemples, les espaces sont clairement blanc. Mais ils peuvent être de n’importe quelle couleur !

Améliorer la lisibilité de vos textes

La hauteur de ligne, les marges entre vos titres et vos paragraphes, la largeur de vos contenus, le padding (marge interne) de vos blocs et même l’espacement entre les lettres sont essentiels pour aider vos visiteurs à lire vos contenus.

Sur l’image du haut, je me suis contenté d’ajouter des éléments avec mon constructeur de page (Divi) sans rien toucher.

En bas, j’ai d’abord ajouter un padding de 16 pixels à mon bloc. J’ai espacé les lettres du sur-titre de 2 pixels et réduit la marge du bas à zéro. Enfn, j’ai ajouté une marge du bas de 24 pixels sous mon titre et mon paragraphe.

Ce sujet est abordé en détail dans mon article sur le design des textes. Vous y apprendrez comment renforcer la lisibilité et l’impact de vos contenus.

« OK, tout ça c’est bien beau. Mais comment je détermine la valeur de ces espaces vides ? Au pifomètre ?! »

Eh bien non ! Pour que tous ces espaces soient harmonieux et cohérents, nous allons mettre en place une échelle d’espacement. Ça va vous faire gagner un temps fou car vous n’aurez qu’à piocher dans les valeurs de votre échelle pour espacer vos éléments.

Utilisez une échelle d’espacement pour gagner du temps et préserver la cohérence de votre design

Définir vos valeurs d’espacement au pif, pixels par pixels, va vous faire perdre énormément de temps. Pire, votre design sera bancal et incohérent.

La solution est de vous limiter à des valeurs définies à l’avance. Mais ces valeurs ne doivent pas sortir de votre chapeau. L’approche la plus simple est de prendre une valeur de base et de construire votre échelle avec des multiples de cette valeur.

En web design il existe plusieurs systèmes d’espacement. Personnellement j’utilise le système de la grille à 8 points (8pt grid). Derrière cette expression étrange se cache en fait un concept très simple : vous partez de la valeur de base de 8, et vous utilisez des multiples de cette valeur pour construire votre échelle d’espacement : 8, 16, 24, 32, 64, 96 etc.

Pourquoi 8 ? Car c’est une valeur parfaitement adaptée au design d’interfaces. Je ne vais pas rentrer dans le détail, mais si le sujet vous intéresse, je vous recommande la lecture de cet article très détaillé sur la 8pt grid (en anglais).

Il est important de noter que de nombreux designers d’interfaces parlent désormais de la 4pt grid. Bien que plus précise (vous avez plus de valeurs au sein de votre échelle), je préfère la grille à 8 points car il y a moins de possibilités (valeurs) et donc moins de risques de se planter.

Appliquez votre échelle d’espacement à vos éléments de design

Maintenant que vous avez votre échelle d’espacement, il va falloir l’appliquer.

Comment procéder ? Le plus simple est de penser à la relation que vos éléments entretiennent les uns avec les autres.

Prenons comme exemple vos relations sociales. Vous avez vos meilleur(e)s ami(e)s (vous savez, ceux que l’on comptent sur les doigts d’une main), vos ami(e)s, vos potes et enfin vos connaissances.

Voyez donc la distance entre vos éléments comme les différents niveaux d’amitié.

Sur l’image de gauche, les espaces sont les mêmes partout (16 pixels).

À droite, la marge interne du bloc (padding) et les espaces entre les éléments sont différents en fonctions de leurs « affinités ».

J’en profite pour souligner un point important.

Si vous concevez vos pages web sur WordPress, il y a de fortes chances que vous utilisiez un constructeur de page. Pour ma part j’utilise Divi.

Le problème, c’est que Divi (et la plupart des constructeurs de pages WordPress) génèrent des marges pré-établies.

Par exemple, ici, il me génère une marge de 30 pixels sous mon titre :

J’ai également fait le test sur Elementor, et lui aussi me génère une marge sous mon titre (20px) :

Et il en va de même pour tous les éléments de design : les sections, les rangées et les modules (texte, bouton, image etc.)

Tout ça pour vous dire que lorsque vous designez vos pages web, vous ne devez pas vous contenter d’ajouter vos éléments, vous allez devoir les paramétrer pour que vos espacements soient cohérents.

Pour finir, voici un exemple d’échelle d’espacement appliquée à une page web :

L’application de l’échelle d’espacement apporte de la cohérence et renforce la hiérarchie visuelle de la page. Même si, je vous l’accorde, à petite échelle cela peut sembler relever du détail n’oubliez pas que l’harmonie d’un design repose sur une multitude de petits détails !

Newsletter mensuelle sur le Web Design

PAR THIBAUT BROUARD

Pour apprendre à concevoir des pages web simples, élégantes et efficaces. En vous inscrivant, vous recevrez en cadeau de bienvenue mon guide du site Internet performant (PDF de 42 pages).

Le respect de votre vie privée est une priorité : votre email est en sécurité et ne sera jamais cédé à des tiers. Vous pourrez vous désincrire à tout moment en un clic. Consultez ma politique de confidentialité.