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

Hello 👋

Je suis en mission pour ton Web Succès! Qui je suis?

Tu veux apprendre?

Un café? Mais oui, prends ton temps!

25/9/2020

Créer un site internet design : Le Guide

En tant que webdesigner, ton rôle est de t’assurer que l'expérience utilisateur est réussie ! Je t’ai donc préparé ce guide webdesign : 10 astuces pratiques

Ça m'intéresse
17/9/2020

Comment choisir la typographie d’un site ?

La typographie est une forme de graphisme à part entière, c'est pourquoi on doit accorder une importance particulière au choix de typographie.

Ça m'intéresse
11/9/2020

La théorie des couleurs en webdesign

La couleur en webdesign est très importante. Comment fais-tu pour choisir les palettes à utiliser (titres, boutons, etc.) ? Voici la théorie des couleurs.

Ça m'intéresse

Je veux...

Happy.business

Parce que toute histoire commence par une rencontre. Prenons contact, une vraie personne se cache derrière Happydesk et sera ravie d’écouter ce que vous avez à lui raconter !

Prendre un rendez-vous

Happy.webnews

Parce que nous mettons toutes nos connaissances du monde Digital à disposition de notre Communauté pour les accompagner dans leur quête du Web Succès.

Lire le blog

Happy.webevent

Parce que se sentir moins seul renforce notre essence de leader. Happydesk organise des Events entre Entrepreneurs plus que motivés à se dépasser et atteindre des objectifs jamais espérés.

Assister aux events

Tu veux favoriser ta réussite?

OUI, ça m'intéresse !