Tutoriel Vidéo Figma UI/UX : Les white spaces

Télécharger la vidéo

Dans cette vidéo je vous présente la notion de “white spaces” dans le web design.

Pour le texte

La hauteur de ligne

L’utilisation d’espace dans les textes est importante car il permet d’améliorer le confort de lecture.

Des lignes de textes trop rapprochées rend la lecture d’une ligne plus difficile et l’utilisateur. À l'inverse des lignes trop espacées rendent le texte décousu. Aussi il est important d'utiliser une hauteur de ligne convenable pour l'affichage de bloc de texte avec une valeur située entre 120 % et 160 % de la hauteur de ligne (il faudra adapter suivant la taille de police de base et la police utilisée).

En revanche, il ne faudra pas nécessairement appliquée cette valeur systématiquement. Dans le cadre d'un titre, qui sera plus gros que le reste des éléments, on aura tendance à utiliser une hauteur de ligne plus petite (110 % par exemple).

L’alignement

L'alignement des textes peut aussi être utilisé pour véhiculer un message différent. Par exemple, un texte centré peut permettre de mettre en avant une ligne de texte (pour un titre ou un slogan par exemple) mais on évitera cet alignement pour des blocs de contenu (la lecture de plusieurs ligne centrée n’est pas très naturelle).

Aussi, un texte centré rend plus difficile le scan rapide de la page. Ainsi le choix d'un tel alignement doit donc être bien réfléchi et dépendre de votre situation. Vous pouvez aussi utiliser d'autres éléments visuels afin de balancer les espaces (une image en dessous de votre titre/slogan par exemple).

Soyez cohérent

On se répète encore un peu par rapport à la vidéo précédente mais la cohérence est importante car le cerveau se repose sur des règles pour analyser rapidement le contenu. Si vous fixez un espace spécifique pour séparer deux blocs, gardez cette valeur sur l’ensemble de votre application. Aussi, les espaces doivent grandir en fonction des types de contenu qu’ils séparent.

Deux paragraphes seront plus espacés avec un espace équivalent à la hauteur de ligne. Par contre un titre de second niveau aura une marge en haut supérieur pour marquer une nouvelle section et permettra à l’utilisateur de mieux séparer inconsciemment le contexte.

Espace = Qualité

Enfin il faut savoir que, inconsciemment, notre cerveau associe l'utilisation d’espace avec une notion de qualité. Si on fait une analogie avec le monde réel, lorsque l’on se rend dans un magasin de luxe les produits vont être espacés les uns des autres et le magasin offrira des espaces de circulation important. À l'opposé, un magasin qui dispose les choses en vrac donnera une impression de qualité inférieure (mais aussi une impression de surabondance).

Ce sentiment donné par les espaces peut être utilisé à votre avantage. Si vous créez un site pour une marque de luxe par exemple, on aura tendance à créer des pages avec beaucoup d'espace blanc, ce qui permettra de donner à l'utilisateur une impression de luxe et de qualité (on peut observer ce langage visuel sur le site d’Apple). À l'inverse si on design un e-commerce généraliste, on aura tendance à rapprocher plus les éléments pour donner une impression d'abondance et de prix plus intéressants.