Bon OK je sais le blanc n’est pas une couleur, mais pour ne pas nous perdre dans des querelles d’experts nous allons appelez ça une couleur. “Ça” ? Oui “ça“, ce non-élément graphique qui est l’élément le plus utilisé sur votre page web et à qui l’on peut faire dire de nombreuses choses. Je rebondis sur un article récemment publié chez WDL (Whitespace: The Underutilized Design Element) et qui m’a fait redécouvrir celui publié sur A List Appart (Whitespace).
Le blanc (“whitespace” en anglais) est en effet indispensable pour faire respirer une mise en page et éviter de saturer l’interface.
Le blanc est essentiel à la fois pour structurer la grille de lecture (en mettant en évidence les colonnes verticales mais également les lignes verticales) et rythmer la page dans sa verticalité.
Les espaces blancs sont essentiels pour améliorer la lisibilité et pour concentrer l’attention. D’une part car ils facilitent le décryptage de la page (et son survol par l’oeil) et d’autre part car ils mettent en évidence les contenus qu’ils côtoient. Formulé autrement : si vous voulez mettre en évidence un bloc de contenus, oubliez les couleurs qui flashent et privilégiez plutôt de larges espaces blancs autours.
Dans l’exemple qui suit (Rikcat Industries), les espaces blancs permettent de faire ressortir les titres sans avoir recours à de la couleur :
Les espaces blanc sont aussi très intéressants pou faire des regroupements comme ici sur le site d’Astheria ou le blanc permet d’associer les titres avec les chapô des articles :
Enfin le blanc peut donner, s’il est bien utiliser, une impression d’élégance et de sophistication comme sur le site de Urban Outfitters :
Notez que lorsque l’on parle de blanc il peut également s’agir d’espaces vides, comme sur ce blog où le header est vide mais avec un léger dégradé.
Bref, le blanc est une couleur très puissante et un élément essentiel de l’architecture graphique de vos pages web. Je suis à la recherche d’écrits de référence sur ce sujet, si vous avez des suggestions, merci de les mettre dans les commentaires.
Je comprend que le jeu de mot du titre est amusant mais le blanc dont on parle ici ne fait pas référence à la couleur (ou la non couleur). Le blanc peut-être, noir, rouge, jaune ou même blanc… Il s’agit juste d’un espace vide entre les différents éléments du mise en page.
Vous semblez mélanger les deux dans votre article et malgré la précision de l’avant dernier paragraphe ça porte à confusion.
@Mox Folder Précision bienvenu même si le discours est plus flagrant et compréhensible avec du blanc.
@World La mise en page de Rikcat est magnifique. Structurer autant une page avec deux couleurs (une en fait) et quelques traits est un vrai tour de force et illustre parfaitement le propos.
@Mox je pense qu’il ne s’agit pas seulement de blanc dans le sens de l’espacement mais aussi de blanc dans le sens de la réduction de couleur.
Je pense que le fait de s’obliger à réduire les couleurs, en utilisant que deux ou trois, nous pousse à être plus créatif pour rendre la page plus simple.
J’ai aussi un faible pour le design de Rikcat. Ce billet est à rapprocher des articles sur le rythme vertical :
http://www.biologeek.com/ergonomie,informatique/l-importance-du-rythme-vertical-en-design-css/
http://www.htmlzengarden.com/2009/11/le_rythme_vertical_en_css/
L’avantage du blanc sur les autres couleurs, c’est aussi un bon contraste et une lisibilité accrue.
[…] on constate souvent qu’il est trés mal utilisé. Pour plus d’info sur le sujet, vous pouvez lire cet article sur […]
Les “blancs” en tant qu’espaces de respiration/valorisation sont essentiels à l’équilibre global d’une page mais il faut souvent faire face à cette peur du vide que l’on retrouve chez certains clients qui vous rétorque qu’ils “ne vous paye pas pour avoir du blanc” justement
[…] Le blanc est la couleur la plus importante ; […]