Lois de la Gestalt

Dans le cadre d’un cours lié au web, ‘Human Centered Design’, j’ai analysé sous forme d’exercice différents sites web intégrant les lois de la Gestalt.
 
 En effet, pour faciliter sa propre lecture, l’utilisateur sépare instinctivement les différents éléments d’un ensemble et les regroupe. Ces 7 principes sont donc nécessaires : la similarité, la proximité, la clôture, la symétrie, la continuité, le principe de figure/fond ainsi que le point focal.

La similarité
Ce principe nous aide à créer des groupes d’éléments étant similaires. Dans les exemples ci-dessous, les boutons de navigation ressortent de la même façon (même typo, même encadrement). Mais le fait que la même couleur revienne à plusieurs reprises dans le site est également un cas de similarité.
https://upperquad.com/
https://heartbeat.ua/
La proximité
Ce principe nous aide à regrouper des éléments proches les uns des autres. Ainsi, un titre proche d’un texte, lui-même proche d’une image formeront un ensemble. Ici, il y a un élément graphique (une ligne, un guillemet) qui renforce cet ensemble. De plus, il est récurent.
https://www.andchange.com/
https://tux.co/en/
La clôture
C’est un principe qui permet de voir une forme dans sa globalité en comblant les vides. Dans le premier exemple, un texte sur fond blanc est encastré dans une image et dans le deuxième, 2 légères lignes entourent le texte en haut et en bas. Ainsi l’esprit humain visualise des rectangles regroupant des éléments.
https://couleecreative.com/
http://north-east-venture.com/
La symétrie
Cette loi sépare en deux parties distinctes et symétriques un ensemble afin d’en créer deux autres. Plus bas, chaque partie est semblable à l’autre et l’on retrouve facilement l’axe de symétrie entre celles-ci.
http://fannymyard-design.com/
https://lesanimals.digital/
La continuité
Ce principe se base sur le fait que les éléments rapprochés forment un même ensemble. Dans ces exemples, le fait que des images du même type se suivent, elles forment un groupe et le fait qu’un élément soit “coupé” et présent sur une page et sur la suivante indique aussi de la continuité.
https://www.sofiapapadopoulou.com/
https://couleecreative.com/
Le principe de figure/fond
Dans ce cas, c’est l’arrière et l’avant-plan qui doivent être distincts l’un de l’autre. La typo (blanche) et le visuel de packaging (sur fond blanc) ont de l’importance et ressortent effectivement bien dans les exemples.
https://landing.adobe.com/en/na/products/marketing-cloud/ctir-3108-running-on-experience/
http://www.inchandyard.de/en/#
Le point focal
Ce dernier principe consiste à attirer le regard vers le centre d’un ensemble. Les exemples ci-dessous démontre, par des images mais aussi de la typo que le centre est la zone vers laquelle le regard converge.
https://betakbook.com/
http://www.moxhe.com.au/

Pour terminer, voici 3 sites combinant plusieurs principes de Gestaltisme.

http://weaintplastic.com/

Premièrement, la première zone du site applique le principe du point focal en centrant un élément graphique au milieu de cette zone. 
Ensuite, quand on scroll, les titres et de leurs soulignements sont proches, c’est le principe de proximité. Ils dévoilent aussi le principe de similarité car ils sont identiques et récurrents au début de chaque nouvelle zone. La proximité est aussi utilisée dans certains textes avec titres et sous-titres vers le milieu de la page. 
Enfin, le principe de clôture est appliqué à une citation, un fond légèrement gris est effectivement derrière celle-ci. De plus, ce fond revient quand on scroll et que l’on change de zone dans la page. Et en plus de faire ressortir le principe de clôture, il démontre le principe de continuité entre les différentes zones.

http://www.epok-design.fr/

Tout d’abord, le principe de symétrie est le plus flagrant, deux parties (4 boutons et deux images/textes) composent chaque page du site. 
Ensuite, les boutons de navigation au 4 coins des pages apparaissent de la même façon et sont encadrés lorsque qu’on clique, c’est le principe de similarité. La similitude entre les couleurs typo et les couleurs présentes dans les visuels est aussi à noter. 
Pour finir, le principe de continuité est appliqué notamment avec une ligne qui nous indique que l’on peut en voir davantage sur un projet. Mais, il va de même pour les images. Les principales images sont bien visibles et les autres deviennent transparentes mais sont toujours présentes dans la continuité des autres.

https://www.volcan.com/en

En premier lieu, le point focal est appliqué avec le verre à la page d’accueil et la typo vient renforcer cela. 
Puis, le principe de symétrie est récurrent dans le site. 
Finalement, les boutons de navigation à gauche et à droite, utilisent le principe de similarité car ils sont identiques et, en plus, symétriques donc placé au même endroit mais à l’opposé l’un de l’autre. Ce principe est aussi visible au niveau de la couleur, que l’on retrouve dans les textes, les titres, mais aussi dans les éléments graphiques et dans les images (cercles).

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.