L’importance du blanc en web design

Peur du vide

Lorsque l’on évoque l’importance du blanc en design, cela peut laisser dubitatif le graphiste néophyte – qui aura tendance à remplacer ‘blanc’ par ‘vide’.

Cette notion de ‘vide’ (peur du vide ?) est pourtant indispensable à appréhender afin de maitriser tous les rudiments d’une mise en page efficace. Steve jobs ne leur donnera pas totalement tort lorsqu’il disait que ‘faire simple est plus difficile que faire compliqué’.

Less is more

Cette formule de Mies Van der Rohe - architecte et designer Allemand (mouvement Arts & Kraft - années 20) va influencer par la suite toutes les disciplines en lien avec le design (communication visuelle, design d’objet, architecture…). Le principe est de mettre l’accent sur l’essentiel en abandonnant tous les éléments décoratifs et ornements superflus. C’est donc sans surprise que ce concept, prônant le minimalisme et l’utilisation de lignes épurées, se retrouve dans le web design.

Les exemples ci-dessous illustrent parfaitement cette tendance :

EXEMPLE 1 : La composition surchargée (More is less)

Dans ces exemples, on trouve des pages surchargées d’informations, de couleurs et de mentions en tout genre ; Les éléments sont collés les uns aux autres – presque noyés - passant inaperçus.

Par conséquent, on obtient une composition à l’impact limité, la hiérarchisation des blocs / éléments manquant d’efficacité.

Cdiscount

Grosbill

Priceminister

On remarque qu’une quantité excessive d’éléments affaiblit la perception du message et rendra pénible sa lecture.

EXEMPLE 2 : La composition aérée

A l’inverse des exemples ci-dessus, ici, chaque élément de la mise en page respire et se distingue, évitant les amalgames.

L’impression d’espace est indéniable, ce qui confère immédiatement un ensemble harmonieux et élégant.

Sézane

Fnac

Zara

Cette confrontation permet d’apprécier l’importance de la hiérarchisation de l’information.

Quantité et qualité sont donc étroitement liées (une dualité similaire à less is more).

L’utilisation judicieuse d’espaces, zones blanches et autres interlignes permettra d’optimiser le sens de lecture du message et d’en améliorer sa compréhension.

L’importance des grilles

L’utilisation des grilles permet, grâce à leur structure et leur trame régulière, de conserver un équilibre même au sein d’un site très épuré ou d’apparence ‘déstructuré’ (grilles = cohérence visuelle).

Princesse tam tam

Les bonnes proportions typographiques

La bonne proportion des titres et des textes influent également sur l’impact de la mise en page.

Les 3 exemples ci-dessous montrent un travail typographique équilibré et racé – qui se suffit à lui-même et où le peu d’image ne nuit pas à l’ensemble.

 

Velvethammer

 

Panache

 

Caran d'Ache

We ain't Plastic

 

Par ailleurs un paragraphe qui aura un interlignage plus marqué et espacé, sera plus lisible et agréable à l’œil.

Pour conclure

En résumé, l’espace blanc est un élément prépondérant dans la composition d’une mise en page ; Il participe autant à l’équilibre (en matière de composition et d’ergonomie) qu’à l’impact visuel (textes et images renforcés).

Même si ce n’est pas une tâche toujours aisée, il s’agit de trouver le bon équilibre entre extrême simplicité – avec lequel on risque une perte d’identité – et le bon degré de sophistication.

Ce juste équilibre rendra un site plus qualitatif et attrayant et apportera à l’internaute un atout esthétique et émotionnel non négligeable.

 

Références :

http://www.disko.fr/reflexions/brand-content-blog/nayez-plus-peur-du-blanc/

http://www.orignal-communication.fr/actualites/tutoriel/reussir-vos-compositions-daffiches-a-tous-les-coups/

http://www.ergophile.com/2007/07/01/less-is-more/

https://www.anthedesign.fr/webdesign-2/limportance-des-espaces-blancs-dans-le-design/

http://www.webdesignertrends.com/2010/03/tendance-du-webdesign-minimalisme/

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.