Si vous considérez le graphisme comme un simple procédé d’arrangement de formes sur un fond, alors vous ne voyez que la moitié de ce que vous faites. Les espaces négatifs d’un fond sont tout aussi importants que les éléments positifs que l’on arrange sur ce fond.

 

Le design est un exercice d’équilibre entre les formes et les vides. Pour travailler plus efficacement avec l’espace, vous devez d’abord être conscient de son existence, et apprendre à voir les formes que créent ces espaces vides et ce qu’elles communiquent.

 

 

Cet article est le second de la série sur les principes de design :

 

 

Cette suite d’articles est une traduction de l’anglais provenant de Smashing Magazine, avec leur accord

 

Le premier article de cette série était consacré à la découverte des principes de Gestalt. Les articles suivants incluants celui-ci parleront des différentes façons d’utiliser la Gestalt dans un travail de Design. Beaucoup des principes de Design que nous utilisons aujourd’hui proviennent en effet de cette théorie.

 

Relation figure/fond

 

Le principe de Gestalt qui s’applique le plus à l’espace est celui de la Ségrégation, plus communément appelé Relation figure/fond. Tout les éléments de votre travail seront perçus soit comme des fonds soit comme des figures (un personnage, et un arrière plan par exemple), la relation entre ces 2 catégories est mutuellement exclusive. Aucune ne peut être perçue sans sa relation avec l’autre, ainsi une figure ne peut être perçue sans un fond, et vis versa. De plus, il est impossible de changer l’une sans changer l’autre.

 

Cette relation figure/fond est aussi complémentaire. Un fond ou une figure peuvent se renforcer ou se déprécier mutuellement, et savoir installer une bonne relation entre un fond et une figure est un des aspects les plus importants du Design. Cette relation crée un contexte d’interprétation de votre travail et un message particulier.

 

“Les espaces blancs doivent être considérés comme des éléments actifs, et non comme des arrière-plan passifs.”
— Jan Tschichold

 

stable-reversible-ambigous-opt
 

Regardez les 3 panneaux ci-dessus. Sur la gauche, vous voyez une série de ligne noire avec un interlignage constant. Ensemble, les lignes noires et blanches forme un « gris » homogène, chaque contribue au résultat de manière égale. Réduire l’interlignage à 0 (sur la seconde image) change complètement notre perception, rendant l’ensemble très noir et compact. La disparition de l’espace négatif n’est pas le seul résultat, les éléments restants sont devenus eux même une seule et même forme.

Sur la 3ème image, 2 lignes noires ont été retirées. Un blanc actif apparaît, il semble se tenir devant le fond gris, le fond est devenu la forme, et la forme est devenu le fond, ajoutant plus de profondeur à l’ensemble.

 

 

stable-reversible-ambigous-opt
 

 

Il y a 3 types de relations figure/fond :

 

  • Stable (image de gauche ci-dessus) : La figure et le fond sont facilement identifiable et peu ambigus. Un des 2 domine en général la composition.
  • Réversible (image au centre) : Le fond et la figure attirent l’oeil de manière égale. Cela crée une tension, car aucun des 2 ne peut prendre le pas sur l’autre. En résulte un design dynamique.
  • Ambiguë (image de droite) : Les éléments peuvent apparaître soit comme un fond soit comme une forme, en même temps. Ils créent des formes intéressantes, et le spectateur est laissé libre de sa propre interprétation de la composition.

 

Selon la relation que vous choisissez et la manière dont vous équilibrez la figure et le fond, vous allez influencer la manière dont votre audience regarde et interprète les différentes parties de votre design.

 

La relation figure/fond n’est pas le seul principe de la Gestalt dans lequel l’espace joue un rôle fondamental. 2 autres principes utilisent l’espace :

 

  • Proximité
    La proximité utilise l’espace pour connecter et séparer des éléments en cloisonnant certaines parties dans l’espace. Par exemple, les paragraphes de texte d’une page. L’espace entre les paragraphes est plus important que l’espace entre les lignes, ce qui joue le rôle de « cloison ».
  • Fermeture
    La fermeture utilise l’espace comme « liant » entre différents éléments. Les spectateurs remplissent ces vides avec leurs propres informations pour faire émerger un tout d’un ensemble de formes. Trop d’espaces vides et l’oeil ne sera pas capable de compléter la forme. Trop peu d’espace vide et l’oeil n’a pas besoin de faire intervenir la Fermeture. Seul un équilibre parfait entre les espaces vides et les espaces remplis activera ce « besoin » de fermeture de l’oeil.

 

02-closure
 

L’espace négatif comme un élément de Design

 

Pensez à la musique. Si chaque note ou chant était joué en même temps, vous n’auriez pas de musique. Vous auriez du bruit. La musique apparaît lorsque les sons sont mis en opposition avec les silences. Variez les moments de silences et de notes crée un rythme et une mélodie. Sans silence, il n’y a pas de musique.

 

L’espace négatif fonctionne de la même façon. Il donne aux différents éléments de la place pour exister. Cela donne à l’oeil l’opportunité de se se déplacer à son gré dans l’image et de découvrir les éléments qu’il cherche. Le positif n’est vu qu’en présence du négatif. Sans espace négatif, vous n’avez pas de design, vous avez un bruit visuel, quelque chose d’abstrait, d’incompréhensible.

 

A moins que ce bruit ne soit ce que vous essayez de communiquer, chercher à espacer vos éléments. Les gens se plaignent moins d’un espace trop important que d’un ensemble trop compact.

 

 

L’espace négatif possède plusieurs avantages :

 

  • Il crée du contraste, de l’emphase et de la hiérarchie;
  • Il génère une tension visuelle et un aspect dramatique;
  • Il permet un repos visuel entre les différents groupes d’éléments

 

Comme la relation figure/fond l’implique, vous n’avez un espace que si vous avez des éléments à y mettre. Avant l’addition d’éléments positifs, l’espace négatif est indéfini, non-existant. La relation figure/fond soit être établie avant que l’espace négatif ne puisse exister.

 

Une des fonctions les plus importantes de l’espace négatif est d’améliorer la lisibilité. Les espaces macroscopiques rendent les textes plus attractifs, et les espaces microscopiques les rendent plus lisibles.

 

  • Espaces microscopiques
    Ce sont les espaces entre les éléments d’un groupe. Les espaces entre les lettres, les mots, les paragraphes.
  • Espaces macroscopiques
    Ce sont les espaces entre les groupes d’éléments. Ils séparent les éléments ou groupes d’éléments et crées des « grilles » invisibles que peut suivre l’oeil pour se repérer dans une composition.

 

Les espaces négatifs sont un bon indice de qualité. Plus d’espace mène à moins d’éléments ou une rareté d’éléments. Comparez des produits low-costs à des produits haut-de-gamme. Lesquels sont épurés et possèdent peu de texte, et lesquels remplissent chaque espaces vides d’informations ? Qu’est ce que l’espace négatif vous communique ?

 

L’espace négatif sont vecteurs d’autres sentiments tels que :

 

  • sophistication,
  • simplicité,
  • luxe,
  • propreté,
  • solitude,
  • Ouverture.

 

Vous gâchez de l’espace quand vous échouez à le considerer en tant qu’élément à part entière. Vous pouvez gâcher de l’espace en voulant trop le remplir. Vous pouvez gâcher de l’espace en l’enfermant dans des éléments qui ne sont pas supposés être connecté à d’autres espaces négatifs dans la composition.

 

Le Design est avant tout un arrangement de formes, et ceci inclue que les formes sont crées par les espaces négatifs qui les entourent. N’ayez pas peur d’utiliser l’espace. Considérez-le comme un élément de design sous votre contrôle.

 

Quelques exemples d’espaces négatifs sur des sites web

 

Pour mieux utiliser l’espace, vous devez d’abord devenir conscient à tout moment de son existence. Apprenez à reconnaitre les espaces dans différentes compositions. Remarquez les formes que ces espaces créent et ce que ces formes communiquent. A cette fin, regardons quelques sites web pour comprendre comment sont utilisés ces espaces négatifs.

 

Old Guard

 

Le design de Old guard (le site de Tom Johnson, UX Designer britannique) utilise beaucoup d’espaces blancs, donnant aux textes et aux autres éléments de la place pour respirer. Aucune raison de douter du fond et de la figure.

 

guard
 

L’information est contenue et séparée par l’espace (rappel du principe de proximité), distinguant les différents groupes d’éléments. Vous pouvez facilement savoir ou les articles commencent et finissent, juste par la présence d’espaces négatifs entre eux.

 

Le contenu principal est centré sur la page, avec de grands espaces vides sur les cotés. Ces espaces contiennent occasionnellement certains éléments importants. Ces éléments viennent « perturber » ces espaces laissé vides et donc attirent particulièrement l’oeil de l’internaute.

 

Introducing The Novel

 

L’espace négatif du haut de page de Introducing the Novel est asymétrique et actif. Notez comme le bloc d’espace vide à gauche dirige l’oeil directement vers le contenu. Si vous cliquez sur le site et scrollez plus bas sur la page, vous remarquerez que l’espace est aussi utilisé pour séparer les éléments en groupes d’informations.

 

novel
 

Les lignes fines sont aussi utilisées pour grouper et séparer ces groupes. Remarquez sur le site comme les lignes ne se touchent pas forcément, permettant à l’espace de circuler et connecter certaines zones. On évite ainsi un enfermement de l’espace et on aère à la zone.

 

New Adventures in Web Design

 

Comme plusieurs sites ci-dessus, la version 2013 de  New Adventures in Web Design (un évènement organisé sur 2 jours ayant pour thème le futur du web) laisse beaucoup de place libre autour des différents éléments. Certains groupes d’éléments distincts sont visibles, séparés par l’espace lui même. L’espace négatif joue donc un rôle actif et important dans la page.

 

fleche
 

Un des détails intéressants de la page est cette ellipse grise dotée de flèches en haut à gauche de l’image.

Ces flèches bloquent elles la circulation de l’espace ? Parce qu’elles ne se touchent pas, et que chacune d’elle est périodiquement interrompu, l’espace peut circuler à l’intérieur de l’ellipse, bien qu’il y soit enserré.

La couleur grise claire aide. Elle évite aux flèches de dominer l’attention, tout en dirigeant subtilement l’oeil sur la page.

 

Quelques exemples de logos

 

On fini avec quelques logos qui incorporent l’espace comme un élément indispensable de leur design. Au lieu de les analyser un par un, on va plutôt faire quelque remarques et vous laisser explorer les détails pas vous même.

 

Les logos ci-dessous utilisent beaucoup la relation figure/fond. Certains ne peuvent être compris avant d’avoir vu la figure et l’espace négatif, les 2 étants nécessaires à la compréhension de la forme.

 

Plusieurs de ces logos font aussi fonctionner le principe de principe de Fermeture. Ce que vous percevez n’est pas forcément présent, mais vous le voyez quand même. Quelques uns de ces logos jouent aussi avec des relations figures et fond ambiguës. Ce qu’ils communiquent est à la fois dans le fond et la figure, d’ou ces choix d’ambiguïté. On obtient ainsi une communication double avec une forme simple.

 

10-logos
 

Conclusion

 

Si 2 choses sont à retenir dans cet articles, ce sont :

 

  • La connexion entre l’utilisation de l’espace dans le design et le principe de Gestalt qu’est la relation figure/fond. Les principes de Gestalt sont le socle sur lequel s’appuie la quasi-totalité de nos principes de design actuels.
  • L’importance de passer du temps à observer comment l’espace est utilisé dans n’importe quelle composition graphique. Ne laissez pas l’espace n’être qu’un support pour vos éléments. Apprenez à utiliser l’espace comme un élément actif de vos compositions. Analysez-le, utilisez-le pour améliorer votre communication et comprenez comment il interagit avec les autres groupes d’éléments qui l’entourent.

 

Dans le prochain article de cette suite dédiée aux principes de designs, on ajoutera plus de principes de Gestalt à l’équation pour explorer les points de focal, le principe de continuité, et le principe de destin commun, ce qui nous amènera a comprendre comment fonctionne l’équilibre visuel d’une composition.