HEY

Accès gratuit : Webflow Expert pendant 10 jours

Théorie de Gestalt sur Webflow : comment fonctionne-t-elle ?

Dans la conception d'un site, il faut respecter une règle : la théorie de Gestalt sur Webflow. Qu’est-ce que c’est ? Quels avantages promet-elle ?

Mis à jour le

28/8/2020

Gestalt sur Webflow
Photo by Brooke Lark on Unsplash

Quand tu crées un site webflow, te fies-tu à ton instinct pour son design ? Parfois, ça peut marcher. Fais quand même attention, surtout pour la conception d’un site de grande envergure. Se fier à son instinct est loin d’être suffisant ! Il faut respecter une certaine règle, notamment la théorie de Gestalt sur Webflow. Qu’est-ce que c’est ? Quels avantages promet-elle ?

La théorie de Gestalt sur Webflow : ce que tu dois savoir

Gestalt est un mot allemand qui signifie "formes". Plus qu’un simple mot, la théorie des formes (ou psychologie des formes) est tout un concept. Je t’explique :

Un groupe est toujours composé de plusieurs éléments individuels. On voit un ensemble, et pourtant, cet ensemble peut être séparé. Dans le cas d’un site web par exemple, une page web est composée de :

  • textes
  • couleurs
  • formes
  • etc.

C’est précisément là que la théorie de Gestalt entre en jeu. Elle décrit comment l’esprit humain perçoit les éléments visuels. Si tu réussis à la cerner, je suis sûr que tu pourras réaliser un site web qui plaira vraiment à tes cibles ! Mais avant, il faut essayer de comprendre le cerveau humain.

Gestalt sur Webflow
Photo by Jessica Lewis on Unsplash

Le cerveau humain : fonctionnement face au webdesign

À la vue d’un site web, le premier réflexe du cerveau est de le décomposer en plusieurs éléments simples. Il est donc capable de percevoir les différents espaces qui constituent un site web : l’espace positif et l’espace négatif.

Les espaces d’un site web

L’espace positif est représenté par les formes, couleurs, motifs… du site web. En quelque sorte, il est l’objet ou le point central de l’ensemble. D’un autre côté, l’espace négatif est le fond qui, en général, est un espace blanc. Il est le “non-élément”, l’arrière-plan, la partie statique du site.

Un design sur Webflow est réussi quand l’équilibre entre ces deux espaces est respecté (un peu comme le Yin et le Yang). Trop d’espaces positifs encombrent le site tandis que trop d’espaces négatifs donneront un sentiment de vide. Comment savoir que cet équilibre existe ?

C’est simple ! Quand tu as fini un site, tu peux demander l’avis d’une ou plusieurs tierces personnes. D’après elles, les espaces entre les sites web paraissent-ils naturels ? La page est-elle assez désencombrée ? N’y a-t-il pas beaucoup de distractions ? Le style et l’apparence du site sont-ils corrects ? Bref, l’ensemble est-il homogène, esthétique ?

Au cas où la première vue du site fait naître une malaise, tu dois revoir certaines choses ! Assure-toi toutefois que tu fais les choses de la bonne manière en respectant les 6 lois de Gestalt sur Webflow.

Gestalt sur Webflow
Photo by Lana Mikah on Unsplash

Les lois du Gestalt sur Webflow : quelles sont-elles ?

En tout, nous distinguons :

  • bonne forme
  • proximité
  • continuité
  • similitude
  • clôture
  • destin commun

1. La loi de la bonne forme

Quand plusieurs formes similaires sont rapprochées, le cerveau les traduira sous forme d’un ensemble. Les logos par exemple sont constitués de différents points. Quant aux dessins, il s’agit d’une mosaïque de couleurs. Et ainsi de suite.

2. La loi de la proximité

Parlons maintenant de ses éléments qui se placent côte à côte. Tu as peut-être remarqué qu’ils attirent facilement l’oeil. Appliquée en webdesign, cette loi fait référence au thème principal du site web.

3. La loi de la continuité

Presque dans tous les sites web performants, je vois qu’une étude a été mise en place pour inciter les internautes à suivre un chemin précis. La loi de la continuité peut alors t’aider ! Elle consiste à mieux organiser les informations, toujours en faisant bon usage de différents formes et éléments (traits, cercles, pointillés…).

4. La loi de similitude

Une seule couleur (ou forme) est souvent appliquée pour tous les boutons de CTA d’un site web. Comprends-tu la raison de ce choix ? En fait, la loi de similitude de Gestalt en est la source. Le cerveau comprendra ainsi assez vite qu’il doit réaliser une action à chaque fois qu’il voit la même couleur (ou forme).

5. La loi de clôture

Dis-moi, quand tu vois un cercle en pointillé, est-ce que tu te soucies des détails ? En général, le cerveau ignore cette discontinuité (pointillé). Pour lui, il s’agit tout simplement d’un cercle. Pareillement, une ligne en pointillé sera une simple ligne pour lui.

Or, le fait est que les discontinuités sont designs et modernes. Elles sont actuellement très tendance dans la conception d’un site web. Voici un exemple qui représente bien cette loi de discontinuité dans le webdesign : le menu hamburger et ses 3 traits. Pour le cerveau, ces 3 traits sont comme une sorte de liste qu’il est normal que si l’on clique dessus, on ait accès au menu du site.

6. La loi de destin commun

Le destin commun fait allusion aux divers éléments qui vont dans une même direction, suivant un même mouvement. Que tu le veuilles ou non, ton cerveau regroupera ces éléments comme étant un seul et même objet. En pratique, il s’agit des listes, galeries d’images…

En tant que webdesign, tu dois aussi faire en sorte de faciliter l’expérience des utilisateurs. Les animations sur ces groupes d’éléments devront par exemple être uniformes (déroulement du menu, transition, hover…).

Gestalt sur Webflow
Photo by Mike Kenneally on Unsplash

Avantages d’appliquer la théorie de Gestalt sur Webflow

Je ne vais pas tourner autour du pot. Je suis sûr qu’en respectant cette théorie à la lettre, tu atteindras facilement ton objectif de création de sites (avoir plusieurs abonnés, transformer ces abonnés en clients, plus de ventes…). Comment est-ce possible ?

Comme je l’ai dit au début de cet article, la théorie de Gestalt peut être définie comme la théorie des formes. Les 6 lois que je viens de t’expliquer le prouvent aussi. Il faut donc se concentrer sur les formes, notamment leur emplacement.

Ainsi, tu dois placer chaque élément de manière ordonnée. Le but étant d’attirer le regard des internautes sur des espaces stratégiques, et ainsi, équilibrer l’espace positif et l’espace négatif. Cela garanti une interface utilisateur :

  • simple
  • facile à utiliser
  • efficace
  • attrayante

Conclusion

La création d’un site web design sur Webflow doit être dictée par la célèbre théorie de Gestalt (aussi connue sous le nom de psychologie des formes). Tous les webdesigners qui l’ont respecté connaissent actuellement la réussite. C’est à ton tour maintenant !

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk

Pause cafe

des articles que tu pourrais aimer...

10 jours d'accès Gratuit

Enregistre-toi ici pour accéder à la
la Formation Webflow Expert

Commence par l'accès gratuit à Webflow Expert, tu y découvriras les bases de Webflow, des Astuces Design et Business.

Accède maintenant à Webflow Expert