Les espacements en web design : créer des pages plus claires et cohérentes

Quand on commence à s’intéresser au webdesign, on regarde surtout ce qu’il y a dans la page : les couleurs, les typographies, les images, les boutons ou les illustrations. C’est assez logique, puisque ce sont les éléments que l’on voit.

Mais avec le temps, je me suis rendu compte que ce qui se trouvait entre ces éléments était presque aussi important.

Quelques pixels de plus ou de moins peuvent suffire à changer complètement la perception d’une page. Deux éléments trop proches semblent appartenir au même groupe. Trop éloignés, ils donnent l’impression de ne plus avoir grand-chose à faire ensemble.

Lorsque les espacements manquent de cohérence, quelque chose paraît souvent étrange sans que l’on réussisse vraiment à expliquer pourquoi. Alors, on déplace un élément, on modifie une taille ou on ajoute une couleur…

Et parfois, il suffisait simplement de laisser un peu plus d’air.

C’est précisément le sujet de cet article.

L’espace fait partie du design

Commençons par une idée toute simple : le vide n’est pas de l’espace perdu. Il fait partie de la composition.

Prenez deux blocs de contenu que vous souhaitez clairement séparer. Le premier réflexe pourrait être d’ajouter une ligne, une couleur de fond ou une bordure. Pourtant, il suffit souvent d’augmenter l’espace entre eux.

Même chose pour mettre un élément en valeur. Un titre entouré d’espace attire naturellement davantage l’œil. Un bouton légèrement isolé du contenu devient plus facile à identifier. Une image qui respire peut prendre davantage de place dans la composition sans avoir besoin d’être agrandie.

L’espacement joue également un rôle important dans la lisibilité : entre un titre et son paragraphe, entre deux paragraphes ou entre les lignes d’un texte.

Une excellente typographie aura, elle aussi, beaucoup de mal à faire des miracles si tout est tassé. J’aborde plus précisément la largeur de lecture, la hauteur de ligne et le rythme typographique dans Design des textes : rendre vos contenus plus lisibles et agréables à lire.

Avant d’ajouter un nouvel élément graphique pour organiser une page, posez-vous donc toujours cette question :

Est-ce qu’un peu d’espace ne suffirait pas ?

Très souvent, la réponse est oui.

Une ligne peut séparer deux contenus. Un espace suffisamment marqué peut remplir le même rôle avec encore plus de simplicité.

Tous les espaces n’ont pas la même fonction

C’est probablement l’un des principes que j’utilise le plus aujourd’hui :

Plus deux éléments sont liés, plus ils doivent être proches.

Prenons un exemple très simple. Un titre et le paragraphe placé juste en dessous appartiennent au même ensemble : il paraît donc logique de les garder relativement proches.

Ajoutez maintenant un second titre accompagné de son paragraphe. L’espace entre les deux groupes devra être plus important que celui qui sépare chaque titre de son contenu.

Lorsque ces deux groupes appartiennent à une section et qu’une nouvelle section commence ensuite, l’espace augmente encore.

On obtient donc une progression de ce type :

Un titre proche de son paragraphe

Cette faible distance indique que les deux éléments appartiennent au même ensemble.

Un second bloc dans la même section

L’espace augmente légèrement pour distinguer les deux idées sans les séparer complètement.

Une nouvelle section commence ici

Une respiration plus généreuse signale qu’un nouvel ensemble de contenus débute.

Un second bloc lié à cette section

Le titre se rapproche à nouveau de son paragraphe pour rendre leur relation évidente.

Trois niveaux de proximité suffisent déjà à rendre visibles les relations entre les différents contenus.

Présenté ainsi, le principe paraît presque évident. Pourtant, lorsqu’on construit directement une page dans un constructeur visuel, il est très facile de perdre cette logique : 30 pixels ici parce que cela semble correct, 50 ailleurs, puis 20 un peu plus bas…

Au bout d’un moment, les valeurs s’accumulent et la cohérence disparaît.

Aujourd’hui, j’essaie donc moins de me demander :

« Combien de pixels dois-je mettre ici ? »

et davantage :

« Quelle relation existe entre ces deux éléments ? »

Cette question ne donne pas encore la valeur exacte, mais elle fournit déjà une excellente indication.

Ces relations participent également à la hiérarchie visuelle d’une page : l’espace aide l’œil à comprendre ce qui forme un ensemble, ce qui marque une séparation et ce qui mérite davantage d’attention.

Une petite échelle plutôt que 36 valeurs différentes

À ce stade, il reste tout de même une question :

Combien met-on ?

20 px ? 24 ? 32 ? 40 ?

Pendant longtemps, j’ai fait comme beaucoup de monde : j’ajustais l’espace jusqu’à ce que le résultat me semble correct. Et cela fonctionne.

Le problème, c’est qu’en répétant cette opération partout, on finit avec 24 pixels ici, 27 là, puis 35 un peu plus bas. Quelques mois plus tard, on ne sait plus très bien pourquoi toutes ces valeurs ont été choisies. 😅

Aujourd’hui, je préfère utiliser une échelle d’espacement. L’idée est simple : plutôt que d’utiliser n’importe quelle valeur, je définis quelques niveaux à l’avance.

Par exemple :

• XXS, XS et S pour les relations les plus proches ;
• M et L pour séparer les blocs et les composants ;
• XL, 2XL et 3XL pour créer les respirations les plus importantes.

Ces rôles restent des repères. Le niveau adapté dépend toujours de la relation entre les éléments et de la composition.

Ce ne sont que des noms : vous pouvez parfaitement les appeler autrement. Les valeurs elles-mêmes ne sont pas davantage gravées dans le marbre.

On parle souvent de grilles fondées sur des multiples de 4 ou de 8 pixels. C’est une excellente base, mais il n’est pas nécessaire de sortir la calculatrice chaque fois que vous ajoutez une marge.

Ce qui compte surtout, c’est de disposer d’un nombre limité de valeurs cohérentes et réutilisables.

Au lieu de prendre une nouvelle décision pour chaque élément, vous piochez dans un petit système que vous connaissez déjà. Et lorsqu’on construit beaucoup de pages, cela représente, mine de rien, énormément de décisions en moins.

L’échelle fluide utilisée sur ComnWeb : huit niveaux qui évoluent entre une valeur minimale et une valeur maximale selon la largeur de l’écran.

Aujourd’hui, je préfère définir le système une fois

C’est probablement l’une des choses qui a le plus changé dans ma façon de construire des sites.

Pendant longtemps, je réglais les espacements directement dans chaque module : une marge ici, un padding là, puis une petite correction sur tablette et une autre sur mobile.

Cela fonctionne très bien au début.

Le problème apparaît quelques mois plus tard, lorsqu’on décide qu’un espacement utilisé à plusieurs endroits devrait finalement être un peu plus grand.

Il faut alors retrouver chaque occurrence et la modifier séparément.

Amusant. 😅

Aujourd’hui, je préfère faire l’inverse.

Je définis dès le départ une petite échelle d’espacements, puis je la réutilise à l’aide des variables et des presets de Divi.

Plutôt que de retenir qu’un élément possède précisément 20 ou 30 pixels de marge, je lui applique simplement le niveau d’espacement correspondant à son rôle.

Si je décide ensuite de faire évoluer cette valeur, je la modifie à un seul endroit. Le changement se répercute partout où elle est utilisée.

Des espacements qui s'adaptent à l'écran

Sur ComnWeb, ces espacements ne correspondent d’ailleurs pas toujours à une valeur fixe.

Ils évoluent progressivement entre une valeur minimale sur les petits écrans et une valeur maximale sur les plus grands.

Pour cela, j’utilise la fonction CSS clamp(). Elle permet de définir une valeur minimale, une valeur fluide et une valeur maximale.

L’espacement s’adapte alors naturellement à la largeur disponible, sans avoir besoin d’ajouter un nouveau réglage à chaque breakpoint.

Pas besoin de comprendre la formule pour retenir le principe : le système reste le même, mais ses proportions s’adaptent à l’écran.

C’est plus rapide, évidemment.

Mais ce que j’apprécie surtout, c’est que le site devient plus cohérent et beaucoup plus simple à faire évoluer.

Et ce principe n’a rien de spécifique à Divi.

Que vous utilisiez un autre constructeur WordPress, du CSS ou un logiciel de conception, l’idée reste la même :

définir une fois, réutiliser partout.

Mais parfois… 40 pixels ne ressemblent pas à 40 pixels

Et voilà le moment où je vais légèrement nuancer tout ce que je viens d’écrire.

Même avec un système parfaitement défini, il arrive qu’un espacement ne fonctionne tout simplement pas.

J’en ai encore eu un exemple récemment, pendant la refonte de ce site.

Deux groupes utilisaient exactement le même espacement de 40 pixels. Sur le papier, tout semblait parfait. À l’écran, pas du tout : l’un paraissait beaucoup plus espacé que l’autre.

La valeur était pourtant identique, mais pas l’espace perçu. La composition des illustrations, leur zone transparente et la structure des colonnes modifiaient complètement le résultat.

J’aurais pu conserver mes 40 pixels simplement parce que « c’est la valeur du système ». J’en ai finalement mis 24, et visuellement, cela fonctionnait beaucoup mieux.

Ce petit détail résume assez bien la manière dont j’utilise aujourd’hui ce genre de système : une règle est là pour donner un cadre, pas pour remplacer votre œil.

La plupart du temps, mon échelle d’espacement m’évite de prendre une nouvelle décision et garantit une véritable cohérence entre les pages. Mais si quelque chose paraît déséquilibré, je l’ajuste.

Ce n’est pas trahir le système : c’est éviter de l’appliquer aveuglément.

Commencez par observer les relations

Si vous souhaitez améliorer les espacements de vos pages, je ne vous conseillerais pas de commencer par chercher la grille parfaite ou les valeurs idéales.

Commencez beaucoup plus simplement : observez votre page et demandez-vous :

• Quels éléments vont ensemble ?
• Où se termine un groupe ?
• Où commence réellement le suivant ?
• Quels contenus ont besoin de respirer davantage ?

À partir de là, définissez quelques niveaux d’espacement et essayez de les réutiliser autant que possible.

Votre échelle évoluera probablement au fil des projets, et c’est parfaitement normal. La mienne aussi a changé avec le temps et continuera certainement à évoluer.

L’important n’est pas de trouver le système d’espacement ultime™, mais d’arrêter de choisir chaque marge au hasard.

Un bon système fait finalement quelque chose de très simple : il rend les pages plus cohérentes tout en réduisant le nombre de décisions à prendre.

Et franchement, c’est déjà beaucoup.

Exemple d’une micro landing page construite autour d’une échelle d’espacement cohérente.

Pour aller plus loin

Les espacements ne fonctionnent évidemment pas seuls. Ils font partie d’un ensemble de choix qui permettent au visiteur de comprendre naturellement une page : typographie, proportions, contrastes, position des éléments et hiérarchie visuelle.

Pour prolonger le sujet, vous pouvez découvrir :

→ Design des textes : rendre vos contenus plus lisibles et agréables à lire
Pour mieux utiliser les tailles, les largeurs de texte et les hauteurs de ligne.

→ Hiérarchie visuelle : guider le regard et clarifier vos pages
Pour organiser les éléments d’une page selon leur importance.

Et maintenant ?

Cet article fait partie des principes que j'utilise quotidiennement pour concevoir mes sites.

Vous voulez continuer à apprendre.

Découvrez mon guide gratuit pour préparer, concevoir et faire durer un site professionnel.