Comment utiliser l'espace négatif pour créer de superbes sites Web

Les sites Web et les applications contiennent toutes sortes d'éléments visuels qui doivent coexister : boutons, colonnes, icônes, images, lignes, médias et typographie. Tous ces éléments ont besoin d'un canevas (la page Web vierge), et ce canevas a besoin d' un espace vide, c'est-à-dire d'un espace négatif ou blanc. L'œil du spectateur ne peut pas traiter ce qu'il voit sans lui.

Abonnez-vous à notre chaîne Youtube

Qu'est-ce que l'espace négatif ?

L'espace positif est la partie du travail qui est remplie du sujet ou d'autres points focaux. L'espace négatif prend le reste. Il peut être vierge ou blanc, de couleur ou de design contrastant, une image d'arrière-plan subtile - quoi qu'il en soit, il semblera vide au lieu d'être plein ou encombré. Cependant, juste parce que l'espace négatif est creux, cela ne veut pas dire qu'il est sans importance - il attire l'attention sur l'espace positif, et devient parfois même l'espace positif lui-même lorsqu'on le regarde différemment.

Exemples d'espace négatif

L'espace négatif – et son pendant, l'espace positif – se retrouve dans toutes sortes d'art et de design, y compris la conception de sites Web. Regardons le logo FedEx. Vous voyez des lettres violettes et oranges, n'est-ce pas ? Il y a une flèche là-dedans, cependant, dans l'espace blanc :

Cette flèche FedEx cachée utilise l'espace négatif de la même manière que pour le dessin et la peinture - le contour est créé tout comme l'espace positif est créé. Dans un exemple comme celui-ci, l'espace négatif n'est pas créé simplement parce que c'est là où l'espace positif n'est pas .

Le paon NBC fait la même chose :

Alors que le but de l'espace négatif est généralement de mettre l'accent sur l'espace positif, il devient parfois l'objet de conceptions intelligentes. Voici un autre exemple – regardez comment les dents du loup forment un arbre :

Il y a un terme pour cela : renversement figure-fond. Cela signifie essentiellement que les couleurs de premier plan et d'arrière-plan changent de place pour changer la perspective et les interprétations. Si vous aimez ça, découvrez le travail de MC Escher, en particulier ses gravures de transformation.

L'espace négatif joue le même rôle en photographie. Regardez ce portrait que j'ai fait du fils de mon cousin, Julian. Le fond noir met tout l'accent sur lui :

Vous pouvez trouver un espace négatif dans la nature, comme dans l'espace entre les pétales de fleurs, et dans un design fonctionnel, comme dans l'espace à travers la poignée d'une tasse à café.

Nous l'utilisons également sur notre site Web. Notre page d'accueil contient un tas d'informations, mais elle n'est pas écrasante en raison de la façon dont nous l'avons espacée. Et même si l'arrière-plan a des notes de couleur et des formes à ajouter au design, il n'est en aucun cas gênant - il donne toujours l'impression d'être agréablement vide sans être ennuyeux ( et c'est sur la marque).

Types d'espace négatif

Il existe plusieurs types d'espaces négatifs. Micro et macro font référence à la taille de l'espace négatif dans une composition. Actif et passif font référence à ce que ces zones font pour l'utilisateur.

Micro vs Macro Espace Négatif

L'espace micro négatif fait référence aux petits espaces entre les éléments - l'espacement entre les lignes de texte ou la zone entre les liens dans un menu de navigation. Cela a un impact sur la lisibilité du contenu pour le lecteur. S'il n'y a pas assez d'espace entre les lignes ou si le texte sort des marges, l'utilisateur aura du mal à le lire et à le comprendre.

L'espace macro négatif est plus grand ; c'est l'espace autour de la mise en page et les espaces entre les grands éléments de conception. Un exemple est la zone entre les blocs de contenu. Ce sont les parties vides du conteneur qui contiennent la conception entière.

Les sites Web avec de petites quantités d'espace macro négatif ont tendance à être très informatifs. Les sites Web avec de grandes quantités d'espace macro négatif sont souvent minimalistes ou mettent en valeur le luxe. Le premier exemple est un petit espace macro négatif, et le second est un grand espace macro négatif :

Espace négatif actif vs passif

L'espace négatif actif ajoute à la structure de la page, améliore le flux de contenu et guide l'utilisateur là où vous voulez qu'il aille. L'espace négatif passif améliore l'apparence du site Web mais ne déplace pas l'utilisateur dans un flux spécifique. Lorsque l'espace est décentré et asymétrique, il est généralement actif. Lorsqu'il est équilibré et symétrique, il est généralement passif - il évoque moins de mouvement, ce qui n'oblige pas l'utilisateur à le regarder d'une certaine manière. Voici un exemple d'espace négatif actif :

Et voici un exemple d'espace négatif passif :

Espace négatif et composition

L'espace négatif est important pour la composition pour plusieurs raisons :

• Vous devez voir l'espace dans une composition afin de le garder bien proportionné.
• Il vous permet également de jouer avec les relations entre différents objets dans une conception.
• Dans la conception de sites Web, cela peut jouer un rôle important pour garder les gens sur votre page.
• La quantité d'espace autour d'un élément détermine la concentration sur l'élément - plus d'espace signifie plus de concentration.

Choisir le bon équilibre entre espace négatif et espace positif

La quantité d'espace négatif et positif que vous utiliserez dépendra du look que vous recherchez et de ce que vous voulez évoquer chez le spectateur.

• Si vous voulez un design esthétique, vous utiliserez probablement à parts égales un espace négatif et un espace positif.
• Pour un design qui semble volontairement austère et minimaliste, vous opterez pour un espace plus négatif.
• Pour avoir l'air accablant et dans votre visage, vous pouvez opter pour un espace plus positif.

Les concepteurs doivent jouer avec l'espacement jusqu'à ce qu'ils trouvent le bon équilibre pour la marque et les objectifs du site Web.

Désencombrer les sites Web riches en texte avec un espace négatif

Lorsque vous devez regrouper une tonne d'informations sur une page, il devient difficile de déterminer où placer l'espace négatif, en particulier si ces informations contiennent beaucoup de texte, ce qui peut rapidement sembler encombré. HostingDude est un excellent exemple d'espace trop positif :

Le New York Times, d'autre part, a trouvé comment emballer sa page d'accueil avec ses actualités sans rendre vos yeux fous, et tout cela grâce à l'espacement (et aux choix de couleurs). Bien qu'il n'y ait pas beaucoup de place pour l'espace macro, ils ont profité du micro espace :

Même si les éléments sur HostingDude sont plus rapprochés, les éléments sur le site Web du New York Times semblent plus unifiés grâce à l'espace supplémentaire entre eux. L'œil a plus de facilité à comprendre la page, ce qui lui donne un design plus complet et plus cohérent. Lorsque l'œil a la possibilité de se reposer, il est mieux en mesure de percevoir ce qu'il voit. L'espace négatif croit que moins c'est plus.

Casser du texte avec un espace négatif

Vous avez vu comment les concepteurs peuvent créer une page d'accueil esthétique et riche en texte, mais qu'en est-il des blocs de texte plus longs eux-mêmes ? Mélanger de courts paragraphes avec de longs, des titres en gras, créer des listes et ajouter des médias tout au long d'un article aide à créer un espace négatif autour des mots, le rendant plus attrayant pour le lecteur. L'apparence compte, même avec la copie, et les grands designers en tiennent compte.

Expliquer le point de l'espace négatif aux clients

Les concepteurs de sites Web peuvent se heurter aux clients à propos de l'espace négatif. Les clients voient encore plus de place pour insérer des informations importantes et lucratives. Ils estiment que l'espace vide est de l'espace gaspillé. Les concepteurs, d'autre part, voient la pause visuelle dont l'œil a besoin pour réellement s'imprégner des informations qui existent déjà. Ils savent que tout l' espace sur un site Web est important, même l'espace sans contenu.

C'est là que les outils de maquette et de prototypage sont utiles. Montrez au client deux versions de son site Web, l'une avec une quantité agréable d'espace négatif et l'autre surchargée d'espace positif. Demandez-leur de regarder les sites Web côte à côte et demandez-leur de jouer avec eux. Je suppose qu'ils auront plus de facilité à naviguer sur le site Web bien conçu et se sentiront perdus sur celui qui est mal conçu.

Emballer

Les sites Web ont un tas d'éléments différents, et si vous voulez que ces éléments vivent en harmonie et attirent le spectateur, vous avez besoin d'un espace blanc autour d'eux. La quantité d'espace blanc que vous utilisez et son fonctionnement dépendent (a) de votre image de marque et (b) des actions que vous souhaitez que l'utilisateur entreprenne. Vous pouvez également faire preuve de créativité avec l'espace blanc, par exemple en inversant les couleurs ou en dessinant avec un espace négatif pour le définir d'une manière intéressante ou frappante.

Quelle que soit l'approche que vous adoptez, l'espace blanc doit être équilibré – cela ne signifie pas nécessairement symétrique, cependant. Au lieu de cela, cela signifie que les éléments existent sur une page sans rivaliser les uns avec les autres et tout en attirant le type d'attention que vous souhaitez qu'ils suscitent. Pour le téléspectateur, l'équilibre signifie être capable de consulter un site Web sans être confus ou submergé.

Expérimentez avec l'espace blanc sur votre site Web. Ajoutez-en, retirez-en. Réduisez la macro et augmentez la micro, ou vice versa. Testez comment un espace plus ou moins blanc autour de certains éléments incite l'utilisateur à agir. La beauté de l'espace blanc est qu'il s'agit d'une technique artistique, ce qui signifie qu'il n'y a pas de règles strictes.

Concevoir un site de voyage? Vous allez probablement utiliser beaucoup d'espace macro. Consultez notre tour d'horizon des thèmes Divi Child pour les sites Web de voyage.

Image en vedette via StockVector / Shutterstock.com