Photo par: Charlotte Massanès

UX / UI Design

L’utilisation du blanc en webdesign : le grand méchant blanc !

16/09/2020
Charlotte Massanès

Aahh le blanc…ami des designers, il est souvent incompris voire malaimé. Mais pourquoi ? Après tout il ne fait de mal à personne, il peut d’ailleurs se révéler être un véritable allié dans le monde du webdesign ! Oui mais voilà, le blanc, ça fait peur. Alors essayons de voir comment ce blanc pourrait reconquérir les coeurs, notamment celui de nos clients. Studio HB, agence web à Lyon, vous propose un débrief sur l’utilisation du blanc en webdesign.

Les aprioris du blanc sur un site

“Mais là c’est vide quand même non ?”
Quand on dit “blanc”, on associe souvent cette idée au vide. Et le vide, peu de gens l’apprécie (sauf les Yamakasis mais c’est une autre histoire). Alors est-ce qu’on essaierait pas déjà d’attribuer à ce “blanc” d’autres adjectifs un peu moins effrayant juste pour voir ce que ça donne dans le discours ? Si on associe le blanc à : l’espace, la respiration, la douceur, la pureté, le calme, le flottement…on se sent déjà un peu plus à l’aise.

L’utilité du blanc en webdesign

“Oui c’est bien beau tout ça, mais concrètement ça sert à quelque chose ?”
Oui, on n’essaie pas de vous vendre du vent ! Le blanc n’est évidemment pas qu’une question ou argument d’esthétisme. Il permet de mettre en exergue l’essentiel, d’augmenter l’impact d’un message à faire passer car on le déleste d’éléments superflus qui pourraient gêner la bonne lecture du message à faire passer.

“Oui, c’est bien beau tout ça, mais concrètement ça sert à quelque chose ?”
Oui, on n’essaie pas de vous vendre du vent ! Le blanc n’est évidemment pas qu’une question ou argument d’esthétisme. Il permet de mettre en exergue l’essentiel, d’augmenter l’impact d’un message à faire passer car on le déleste d’éléments superflus qui pourraient gêner la bonne lecture du message.

Quand il y a trop de choses à voir à un même niveau, on ne sait plus où regarder ! Un utilisateur n’aura pas envie de perdre du temps à trouver une information, il est alors primordial de hiérarchiser correctement sa mise en page et de laisser respirer le contenu afin qu’il soit plus efficace. C’est le principe du “Less is more”, célèbre formule de l’architecte Allemand Mies van der Rohe.

Site : https://www.cdiscount.com/ : accumulation d’informations, difficile de guider l’oeil de l’utilisateur.

Site : https://www.susannekaufmann.com/en : blanc tournant permet de guider l’oeil et de laisser la place à chaque élément pour gagner en impact et en compréhension.

Comment bien utiliser le blanc en webdesign ?

“Ok mais comment bien s’en servir, de ce blanc ?”
La magie des grilles ! L’utilisation d’une structure que l’on appelle “grille” en webdesign permet d’avoir une vraie régularité et de construire son site en gardant un bon équilibre. De ce fait, un site semblant déstructuré ne l’est en fait pas vraiment et l’aspect épuré reste totalement maîtrisé.

En plus des grilles, il est indispensable de faire un vrai travail de typographie afin de guider correctement l’utilisateur dans le sens de lecture, déjà facilité par la suppression d’éléments superflus. Il faut donc veiller à avoir les bonnes proportions entre les différents titres, paragraphes de textes et autres accroches textuelles.

Site : http://humbertpoyet.ouiwill.com/ : page “destructurée” suivant une grille permettant de garder une véritable structure et donc une cohérence de mise en page, le travail typographique est aussi présent afin de toujours guider l’oeil de l’utilisateur.

En résumé, le blanc ou l’espace vide permet de mettre en valeur, d’attirer l’attention sur ce qui est important et est donc au service de l’ergonomie de votre site ! Il est tout de suite plus chaleureux comme ça, non ?

restons connectés

Inscrivez vous à notre newsletter pour vous tenir informés de nos derniers articles et posts LinkedIn

newsletter