La base en webdesign
Histoire de goût pour certains, quête du perfectionnisme pour d'autres, le design ne laisse personne insensible tant nous y sommes confrontés quotidiennement. Mais quel est le secret pour faire des sites attirants?
Il est probable que les méthodes ou la documentation technique traitées dans cet article publié le 21 avril 2022 ne soient plus d'actualité.
Plus qu'une simple histoire de goût
En webdesign, nous avons tendance à penser que ce qui rend un site attirant est avant tout une sélection savante d'images et de couleurs qui sauront attirer l'oeil au premier regard. Ce n'est pas totalement faux, mais nous nous baserions alors uniquement sur le goût alors que le design est bien plus que ça. Que l'on aime ou que l'on déteste (et entre les deux, parfois on tergiverse), le design ne laisse personne insensible parce qu'il éveille en nous des émotions, et qui dit émotion dit psychologie. Autrement dit, le design n'est pas qu'une simple histoire de goût: il s'agit avant tout de psychologie visuelle.
Nous allons nous épargner un cours complet de psychologie en nous concentrant uniquement sur la théorie de la Gestalt, appelée également psychologie de la forme, qui a pris naissance il y a plus de 100 ans déjà et développée sur plusieurs décennies. Si nous devions la résumer, nous pourrions dire de cette théorie qu'elle tend à nous expliquer comment notre cerveau interprète ce que nous voyons quotidiennement, en s'appuyant sur des principes de base et lois que nous allons observer.
Une question de principes
Les principes régissent notre perception visuelle, c'est-à-dire la façon dont notre esprit assemble et interprète chacun des éléments visuels :
Emergence
Nous percevons d’abord la forme entière d’un objet avant de percevoir ses parties individuelles: le tout est différent de la somme des parties.
Réification
Nous pouvons percevoir des formes qui ne sont pas clairement définies, les vides étant comblés par notre imagination pour créer une forme.
Multistabilité
Nous percevons un tout ou un autre tout lorsqu'une interprétation de forme est ambigüe, mais jamais les deux en même temps.
Invariance
Nous percevons un objet de la même façon peu importe qu'il soit déformé, agrandi, mis en perspective ou d'un style différent.
Plus que des lois, une ligne de conduite
Les principes présentés plus haut viennent s'associer à des lois qui, prises individuellement ou de manière combinée, font de la théorie de la Gestalt une ligne directrice idéale pour la conception d'interface: comment regrouper des éléments liés, comment attirer l'attention ou encore donner la sensation d'un ensemble homogène et équilibré? Nous allons ici aborder quelques unes de ces lois et les associer à des exemples réels de webdesign pour comprendre leur importance mais aussi leur subtilité.
La loi de la bonne forme
Lorsqu'un objet comporte plusieurs formes ou plusieurs couleurs, notre cerveau peut les séparer ou les regrouper en fonction de la solution la plus simple.
La loi de proximité
Les objets proches les uns des autres forment distinctement un ensemble, même s’ils ne sont pas en contact direct, indépendamment du fait qu'ils peuvent avoir des caractéristiques différentes, comme la forme, la couleur ou la taille.
La loi de similarité
Les objets qui présentent des similitudes (forme, couleur, orientation, etc.) appartiennent spontanément au même groupe.
La loi de symétrie
Des éléments sont plus facilement perçus comme une forme globale si ils comportent un axe de symétrie, proportionnel ou pas.
La loi de continuité
Notre perception est capable de suivre une ligne au-delà de son point final afin d’éviter toute interruption en incitant le regard à suivre un chemin prédéfini.
La loi de clôture :
Des objets encapsulés dans des blocs nous permettent de différencier directement leur fonction propre et combler instinctivement certains vides.
La loi de destin commun
Un mouvement ou une orientation similaire entre des mêmes formes induit une connexion entre elles et sont automatiquement regroupées.
La théorie c'est bien, la pratique c'est mieux!
Dans un prochain article nous irons au delà de l'aspect scolaire des notions qui viennent d'être présentées en recréant un exemple concret (spoiler: ce blog) avec Tailwind CSS tout en s'exerçant à un exercice de style : le minimalisme.