Human Centered Design & Gestalt

Aude Schaff
3 min readNov 7, 2020

--

Notion fondamentale en design et graphisme, la théorie de la Gestalt aide le web designer à mettre visuellement en place ses projets, et cela de manière réfléchie. Pour cela, elle définit les différentes manières dont le cerveau perçoit son environnement, en le structurant et le simplifiant par des formes. Une forme est constituée par un ensemble d’éléments qui, seuls, ne peuvent être interprétés correctement.

“La relation et l’interaction des éléments les uns avec les autres forment un tout.”

La théorie de la Gestalt se décline sous 7 lois :

  • La proximité
  • La similarité
  • La symétrie
  • La clôture
  • La continuité
  • Le fond/la figure
  • Le point focal

Bien que ces lois soient applicables dans le domaine de la photographie, nous nous concentrerons sur le web en analysant 3 sites dégageant au moins une de ces lois.

Site n°1 : Swabtheworld

  1. La symétrie : la section est divisée en deux par un axe central.
Symétrie

2. Fond: les sections sont séparées par des fonds de couleur différentes.

Fond

3. Clôture : les différents articles sont séparés par des lignes horizontales et les liens en bas de page par des encadrés.

Clôture

3. Proximité : on retrouve une suite d’éléments qui sont proches les uns des autres pour délimiter un rappel de la navigation. On peut aussi dégager la loi de Similarité entre les éléments de navigation.

5. La continuité : Quand plusieurs éléments permettent une navigation continu, quand des éléments donne un sens de lecture. Dans ce cas-ci, il s’agit des éléments de texte qui donnent un sens de lecture.

Continuité
Continuité

Site n°2 : Stelvio.k95

  1. Le Point focal : L’affiche rouge se trouvant au centre de l’écran attire directement l’attention grâce à sa position et à sa couleur.
Point Focal

2. La Similarité : pour les éléments de navigation

Similarité

3. La Proximité

Proximité
Proximité

4. La Clôture

Clôture
Clôture

Site n°3 : Locomotive

  1. La Similarité
Similarité
Similarité (liens)

2. La Clôture

Clôture

3. Le Point focal

Point focal

4. La Continuité

Continuité

--

--