L'espace négatif EN WEB DESIGN

L’espace négatif en web design

 

L’espace négatif est peut être le concept le plus sous-estimé des grands principes du web design.

Pourtant, sa valeur est énorme au point que l’on rencontre ce principe aussi bien dans l’art que dans l’architecture ou le design d’intérieur.

C’est peut être son caractère contre-intuitif qui le rend si méconnu. Le vide représente le néant, l’inutile mais bien utilisé, il est une arme redoutable pour diriger l’attention de celui qui le regarde tout en lui procurant une impression d’élégance et de fluidité.

Qu’est ce que l’espace négatif en web design?

En web design, l’espace négatif désigne les espaces vides entre les éléments visuels de votre design, comme les boutons, les titres et les images. Ces espaces servent à guider l’œil de l’utilisateur et à l' orienter vers les éléments les plus importants de votre interface.

Ce concept s’applique bien évidemment à un site web ou à une charte graphique  mais il s’avère également bien utile dans le domaine de la création de logo. 

Dans un  logo, l’espace négatif permet à un élément d’interagir avec un autre afin de créer une forme ou des lettres.

Dépasser l’idée que le vide est inutile 

Certains concepteurs de site web essayent de maximiser l’espace en mettant toujours plus d’éléments. Ils se disent que de cette manière, l’utilisateur a le plus d’information possible. Ils ont horreur du vide qu’ils considèrent comme inutile.

Il en résulte des sites avec du texte difficile à lire, confus et simplement… moches.

   

Voyez : même le vide est indispensable.

Olivier Lockert

Psychologue et auteur français

Certes, l’auteur de cette citation étant psychologue, il ne faisait certainement pas référence au web design. Pourtant et nous l’avons vu, le vide est utile dans de nombreuses disciplines.

Utiliser correctement sur votre site internet, votre charte graphique ou votre logo, il n’est même pas perçu comme tel par l’internaute et apporte au contraire de la fraîcheur et de la cohérence dans le design.

Le typographe et dessinateur, Jan Tschichold, père de la publicité moderne écrivait dès le milieu du 20ème siècle:

White space is to be regarded as an active element, not a passive background.” – 

En français, l’espace négatif doit être considéré comme un élément actif et non pas comme un arrière-plan passif. 

Regarder l’espace négatif comme un élément actif

Si l’on dépasse l’idée que l’espace négatif n’est que du vide et que le cide est inutile alors on peut débloquer toute sa puissance.

Voici quelques uns des nombreux avantages que procurent l’espace négatif:

 Mettre en avant des éléments clés:

Sur une page web, il y a beaucoup d’informations (souvent trop). Vous devez les hiérarchiser et déterminer l’ordre d'importance de chacun d’eux. 

Utiliser les espaces négatifs est un excellent moyen de mettre en avant un élément.

Vous pouvez par exemple rajouter de l’espace autour d’une image ou d’un titre pour attirer naturellement l'œil de vos visiteurs.

source werkstatt.fr

Sur la page d’accueil de l’agence créative Werksatt, l’élément textuel est placé au centre avec une très grande quantité d’espace négatif.

L'œil est irrésistiblement attiré vers ce titre, et la lecture dans les pays occidentaux se faisant de haut en bas, le regard va naturellement se porter sur le tout petit call to action, invitant l’internaute à cliquer pour voir le portfolio.  

Améliorer la lisibilité

C'est bien connu, un gros pavé de texte n'incite pas à la lecture.

L’internaute qui cherche une information est pressé. Il veut son information et vite. S’il doit la chercher dans un texte compact, il va se décourager avant même d’essayer.

Vous pouvez augmenter l’interlignage c'est-à-dire l’espace entre le bas de deux lignes d’un texte ou le crénage qui, lui, représente l’espace entre deux lettres. 

Selon la police d’écriture utilisée et l’effet recherché vous pouvez augmenter légèrement l’interlignage et le crénage 

Attention néanmoins, à ne pas tomber dans l’excès.

Des espacements trop éloignés des standards habituels risquent de dérouter le lecteur et vous perdrez finalement en lisibilité.

 

Donne un aspect élégant et épuré:

Pour le web design, des espaces négatifs importants vont souvent de pair avec les tendances du minimalisme. En web design, le minimalisme est souvent associé à l’idée d'élégance, de pureté et parfois même associé au luxe. 

C’est également cet aspect apporté par l’espace négatif.

L’exemple le plus connu est certainement les sites d’Apple, qui finalement arrive à se passer de texte grâce à une utilisation parfaite de l’espace négatif.

source apple.fr

Les différents types d’espace négatif

Les espaces négatifs micro et macro

Les espaces négatifs micro représentent l'espacement entre des petits éléments comme les lignes, les mots et les lettres alors que l’on parle d’espaces négatifs macro les espaces entre les plus gros éléments.

Ces deux aspects sont tout aussi importants l’un que l’autre pour réaliser un bon design.

 

Les espaces négatifs passifs et actifs

On peut également distinguer les espaces négatifs par le fait qu’ils soient passifs ou actifs.

Les espaces négatifs passifs

Les espaces négatifs passifs représentent l’espacement qui apparait naturellement entre les éléments, comme du texte ou des liens. D’une manière générale si votre site manque d’espacement, il sera vite illisible. L’internaute dépensera une énergie considérable pour essayer d’identifier les informations utiles. Il se lassera très vite et quittera simplement la page.

 

page accueil agencepourlarelance.com

 

Regardez attentivement, l’exemple ci-dessus. Vous remarquez quelque chose au niveau des liens dans la barre de navigation? et sur l’espacement des mots sur le titre et le paragraphe? Rien?

C’est normal! Ces espaces sont minimes, naturels et n’attirent pas plus l’attention que ça. Ils sont là pour améliorer la visibilité sans pour autant être remarqués.

C’est ça l’espace négatif  passif.

 

L’espace négatif actif

L’espace négatif actif  fait référence au placement volontaire d’un espace blanc afin de mettre l'accent sur un élément particulier.

Cet exemple illustre parfaitement ce concept. L'œil est automatiquement attiré vers le tout petit personnage en bas à droite grâce à une utilisation massive et volontaire de l’espace négatif sur toute la page.

Comment utiliser l’espace négatif sur mon site web

  1. l’espace négatif ce n’est pas forcément que tout blanc

Vous pouvez varier les couleurs de vos espaces négatifs si vous n’utilisez pas des couleurs trop criardes. Le gris clair, le crème ou le noir sont de bonnes options pour remplacer le blanc.

  1. Essayez de trouver l’espace négatif dans la vie de tous les jours

Vous ne vous en rendez probablement pas compte mais l’espace négatif est partout autour de vous. Sur les espaces publicitaires lorsque vous êtes en voiture par exemple. Le designer part du principe que vous êtes dans les bouchons et que vous ne prêterez attention à l’affiche que quelques secondes. Le message doit être immédiatement perçu et la marque mise en avant. Pour ça, l’espace négatif est indispensable.

  1. soyez minimaliste

une approche consiste à vous demander avant de commencer à penser au design de votre page, quelles informations vous souhaitez y voir figurer. Vous les classez par ordre d’importance et vous vous efforcez à mettre le plus d’espace négatif en fonction de leur importance 

  1. Faites preuve de fantaisie.

L’espace négatif nécessite un certain équilibre sans pour autant être symétrique. SI vous naviguez sur un site comme Pinterest construit sous forme de blocs d’images, vous pouvez observer que les images ne sont pas toutes de même taille. L’espace négatif qui les entoure est toujours le même mais la taille des images varie.

Vous l’avez compris, l’espace négatif doit être la pièce fondamentale du design de votre site web. Néanmoins, vous pouvez également l’utiliser de façon efficace pour sublimer votre logo

Comment utiliser l’espace négatif dans votre logo?

Le cas d’un objet dans une lettre

L’académie des oscars

Vous pouvez utiliser l’espace négatif directement à une lettre du logo. C’est ce qu’on fait très habilement les designers du logo de l’académie des Oscars

bien_utiliser_espace_négatif_logo

La célèbre statuette est intégrée en espace négatif au “A” de Academy

 

L’Alchimiste

Si vous vendez un produit bien précis il peut être très judicieux d’essayer de l'intégrer à votre logo grâce à l’espace négatif.

Le logo de l’Alchimiste Microbrasserie met en avant une bouteille de bière en l’incorporant dans la lettre “A”

source alchimiste.ca

Intégrer une image dans l’espace négatif de lettres

Le designer Yoga Perdana a eu la très bonne idée d’intégrer un chat dans l’espace négatif dans les lettres du logo “Cat”

bien_utiliser_espace_négatif_logo

 

Le logo FedEx

Ce logo a été bardé de prix de design pour l’ingéniosité de ses concepteurs.

En effet, une flèche en espace négatif se forme entre le “E” et le “X” qui symbolise la mise en avant et le mouvement.

 

Intégrer du texte dans l’image

Boom burgers

Le logo “Boom Burgers” est un exemple de l’inverse au logo “cat”. Cette fois ce sont des lettres qui sont placées dans une image grâce à l’espace négatif.

bien_utiliser_espace_négatif_logo

A noter que la queue de la vache forme le point d’exclamation.

Utiliser les ombres dans les logos en 3D

Logo Ulrich design

Vous pouvez utiliser l’espace négatif pour créer des ombres et réaliser des objets en 3D

Ici, l’objet en 3D est placé devant une unique source de lumière de façon à éclairer une partie de l’objet en question, tandis que l’autre partie est projetée en zone d’ombre. La zone éclairée est ainsi utilisée comme espace positif, et l’ombre comme espace négatif (ou inversement). On obtient ainsi une autre forme de chevauchement.

 

Quelques exemples d’utilisation réussie de l’espace négatif sur un site web

 

Google:

 

source google.fr

Google a dans son ADN un design des plus minimalistes mais le moins que l'on puisse dire c'est que c’est efficace.

Il y a une tonne de vide sur la page du géant des moteurs de recherche. L’utilisateur est attiré vers les zones les plus importantes:Gmail, images et la barre de recherche. Aucune confusion possible, on sait ce que l’on doit faire et comment le faire..

 

Shopify

Autre exemple d’utilisation intelligente de l’espace négatif. Avec son design, Shopify invite l’utilisateur à faire un essai gratuit. Remarquez l’espace négatif qui entoure le bouton call to action et le met efficacement en valeur.

Dropbox

La page d’accueil du site de dropbox est l’exemple parfait d’une utilisation réussie d‘espaces négatifs micros et macros. Vous pouvez remarquer aussi l’utilisation d’une palette de couleurs à l’aspect naturel et d'une police de caractère adaptée donnant un sentiment de calme tout en inspirant confiance.

page accueil dropbox.fr

Squarespace

La page d’accueil du cms Squarespace comporte  très peu d’éléments et en dépit de “ce vide” l’utilisateur dispose de toutes les informations nécessaires pour comprendre de quoi il s’agit. 

page accueil squarespace.com

 

L’espace négatif macro utilisé est parfaitement désigner pour attirer l’attention dans le coin en haut à gauche.

A noter également que le bouton call to action sur la barre de navigation contraste efficacement avec le fond noir.

 

Apple

Difficile de parler d’espace négatif sans citer Apple. Leurs designers sont parmi les plus doués qui existent en la matière.

Chacune de leur page suit la même logique, utiliser l’espace négatif pour mettre en valeur le design et l’élégance de leurs produits.

 

page apple tv

 

 

L’exemple type de l’absence de prise en compte de l’espace négatif:

Haaa ces bon vieux catalogues publicitaires qui inondent nos boîtes aux lettres. Vu que l’on paye à la page et qu’elles ont une dimension prédéfinie, autant en mettre le plus possible non?

 

  

Le résultat?

L’attention est sollicitée partout au point que l’on ne sait pas où l’on doit regarder. Sur un catalogue papier, ça passera quoi qu’il arrive si la marque est assez forte et que la personne qui l’a entre les mains souhaitent le feuilleter mais pour un site web, c’est du suicide. 

Si vous vous inspirez du design d’un catalogue pour votre site web vos visiteurs vont se lasser extrêmement vite et filer chez la concurrence. Vous aurez un taux de rebond (pourcentage des visiteurs qui quittent votre site après avoir visionné la première page) qui bat des records!

 

 Pour conclure:

 

Que l’on soit convaincu ou non par la mouvance du minimalisme, force est de constater qu’un design trop encombré produit des résultats catastrophiques.

N’oubliez pas que votre site web doit avoir un but: présenter les informations de votre société, proposer un rendez-vous ou vendre un produit.

Vous devez guider vos visiteurs vers l’action que vous souhaitez qu’ils réalisent et bien utiliser l’espace négatif est un atout essentiel pour atteindre ce but.

Par ailleurs, bien maîtriser l’espace négatif pour la création de votre logo lui donne un aspect moderne tout en suscitant la curiosité. N’est ce pas là le premier pas de la transformation d’un inconnu en prospect? La curiosité?  

 

Pour aller plus loin: