Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

Comment utiliser la perception figure-fond en design ?

L’une des théories les plus utiles en design, celle qui vous dira comment mettre en avant des éléments sur vos publications visuelles, c’est celle...

Publié par Melanie De Coster

L’une des théories les plus utiles en design, celle qui vous dira comment mettre en avant des éléments sur vos publications visuelles, c’est celle qui parle de la perception figure-fond.

Issue de la gestalt – comme la loi de clôture ou la loi de similitude, entre autres – , cette loi s’appuie sur les principes d’avant-plan et d’arrière-plan.

Et il existe de nombreuses manières de l’utiliser…

Pourquoi tout repose sur un vase (ou pas)

La perception figure-fond s’appuie sur l’idée que nous établissons une distinction entre la figure, qui se détache visuellement, et le fond, qui est moins distinct. L’une des illustrations parmi les plus connues de cette théorie est le dessin du vase d’Edgar Rubin.

vase d'Edgar Rubin

Selon la manière dont on le regarde, et surtout selon celle dont il est encadré, vous verrez apparaître deux visages de profil, se faisant face, ou un vase.

Dans cet exemple, surtout pour la version noir et blanc, on parle d’image instable  : il est facile de passer d’une perception à l’autre, et aucune ne prend le dessus. C’est un peu plus difficile, cependant, quand le vase est un peu plus décoré  : il faut savoir que les visages sont là pour qu’ils apparaissent.

Il existe d’autres astuces qui permettent de faire ressortir une figure.

Les éléments qui attirent l’attention

Il existe différentes options pour indiquer au cerveau sur quelles parties d’une image se focaliser  :

  • La taille  : une théorie visuelle veut que, lorsque deux éléments se chevauchent ou se superposent, le plus petit des deux est automatiquement considéré comme étant la figure, c’est-à-dire la forme principale à regarder. Donc un petit pois sur une nappe blanche apparaîtra bien comme important  !
  • Le relief  : il a aussi été établi qu’une forme convexe, soit bombée vers l’extérieur, aura plus tendance à être considérée comme une figure qu’une forme concave (et creusée).
  • Les couleurs  : les teintes chaudes renforcent les figures, les froides seront plus réservées aux fonds.
  • L’emplacement  : c’est avant tout une question de perspective. Les éléments placés en bas d’un visuel semblent plus proches de nous, donc plus importants, que ceux disposés dans la partie haute
  • Le contraste  : un contraste important permet de mettre encore plus en évidence un élément par rapport à l’autre. Dans le cas contraire, une ambiguïté se crée, mais vous pouvez également jouer avec.

Tous pareils ou tous différents  : le combat visuel  !

Jouer sur les ombres et les contrastes permet de créer des visuels qui s’approchent des illusions d’optique, comme dans le cas du vase d’Edgar Rubin, vu plus haut.

C’est aussi une pratique utilisée par certains graphistes pour proposer de doubles niveaux de lecture des images.

perception figure fond

Créateur : Simon C. Page

En forçant l’œil à naviguer entre les deux versions possibles d’un visuel, vous captez l’attention de son propriétaire. Ce qui est toujours une bonne option en communication, et qui doit être le but recherché par toutes vos compositions graphiques.

exemple figure fond

Créateur : Michael Pippo

Comment utiliser la perception figure-fond en web design  ?

Connaître les bases de cette perception aide à savoir comment mettre en avant un élément… mais aussi comment indiquer très facilement à un internaute là où il doit concentrer son attention, ou l’endroit où il peut cliquer.

C’est ainsi que l’organisation d’un site doit s’appuyer sur un fond en retrait, avec différentes zones qui deviennent des figures, essentiellement par le biais des contrastes de couleur.

Ce n’est pas totalement innocent non plus si les appels à l’action sont positionnés dans le bas des écrans  : ils sont ainsi plus proches des utilisateurs, qui n’ont pas de grands efforts à effectuer pour appuyer dessus  !

Le design, c’est de l’instinct, de l’art, mais c’est aussi de la psychologie.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Graphistes : comment réagir lorsqu’un client vous fait perdre patience ?

Lorsque vous travaillez avec des clients, la patience est une qualité indispensable qu’il faut s’avoir doser justement. Vous devez évidemment communiquer...

Publié le par Charlotte Chollat
Graphisme

Tuto : Comment détourer des cheveux dans Photoshop ?

Lors d’un précédent tutoriel Photoshop, nous vous avions appris à réaliser un simple détourage avec l’outil baguette magique. Si cette solution convient pour des...

Publié le par Charlotte Chollat