- Ausha
- Deezer
- Spotify
- Youtube
- l'application Podcast Addict
et plein d'autres plateformes !
-
Bonjour à toutes et à tous ! Bienvenue dans ce nouvel épisode de Culture Design !
Dans l'épisode du jour, je vais vous présenter, je vais vous présenter quelques principes de design visuel. Je ne me prétends pas UI designer mais je trouve cela intéressant de vous partager les bases. Pour connaître la différence, je vous renvoie vers le podcast numéro 9.
Don Norman, dans son ouvrage Design émotionnel, Pourquoi aimons-nous ou détestons-nous les objects qui nous entourent ?, explique très bien notre relation aux objets mais surtout, leur aspect visuel. C'est notre cerveau, la partie la plus ancienne, qui est appelée reptilienne qui est en cause ! Je vous en ai déjà parlé dans l'épisode 23 sur le Cercle d'Or. C'est le cerveau reptilien, basé sur les informations sensorielles, qui permet de faire des jugements rapides sur ce qui est bon ou dangereux et d'envoyer ainsi les signaux appropriés.
C'est pourquoi le commun des mortels aura des difficultés à expliquer pourquoi une disposition est visuellement attrayante. Des réalisations graphiques réussies stimulent l'engagement et accroîssent la convivialité en tirant parti des principes d'une bonne conception visuelle.Â
Les principes de conception visuelle nous informent sur la manière dont les éléments de conception tels que la ligne, la forme, la couleur, la grille ou l'espace s'associent pour créer des visuels équilibrés et réfléchis.
De ce fait, nous allons nous baser sur la relation visuelle entre votre conception et votre cerveau reptilien à travers 5 principes, que j'ai repris de l'article de NN Group intitulé « 5 principles of Visual Design in UX ».
Le premier principe, concerne l'échelle. Il fait référence à l'utilisation de la taille dont la relation avec le reste des éléments permet de signaler l'importance et le rang dans une composition. Une règle générale consiste à inclure des composants petits, moyens et grands dans la conception. En d'autres termes, lorsque ce principe est utilisé correctement, les éléments les plus importants d'une conception sont plus grands que ceux qui le sont moins. La raison derrière ce principe est simple: quand quelque chose est gros, il est plus probable qu'il soit remarqué. Par exemple, dans une publication comme une journal, le titre sera écrit plus gros et en gras afin de le détacher du corps du texte informatif. Cette hiérarchie visuelle permet d'établir ainsi des niveaux d'importance.
Le deuxième principe concerne la hiérarchie visuelle. Elle fait référence au guidage de l'œil sur la page afin qu'elle s'occupe des différents éléments de conception dans l'ordre de leur importance. La hiérarchie visuelle s'exprime par des variations d'échelle, de valeurs, de couleurs, d'espacement, de placement notamment. Lorsque le principe de l'échelle est utilisé correctement, l'expérience sera positive : les bons éléments sont mis en évidence, les utilisateurs analysent facilement le visuel et savent comment l'utiliser.
Le troisième principe concerne la notion de balance. Il est important d'équilibrer les éléments de conception, c'est-à -dire un arrangement ou une proportion satisfaisante d'éléments. L'équilibre se produit quand il y a une quantité également répartie d'éléments des deux côtés d'un axe imaginaire, ce qui n'implique pas nécessairement une notion de symétrique. Cet axe peut être vertical comme horizontal ! Cet axe sera le point de référence pour vous aider à organiser la mise en page afin que le rendu final apparaisse équilibré.
Le quatrième principe concerne le contraste, c'est ce qui fait ressortir visuellement certaines parties de votre conception. Le principe de contraste s'exprime par la juxtaposition d'éléments visuellement différents afin de transmettre le fait que ces éléments sont différents et de bien souligner leur différence
Et enfin, le dernier principe concerne la théorie de la Gestalt. Le terme « Gestalt » en allemand signifie « forme » et de ce fait, indique le tout – c'est-à -dire l'ensemble – est différent des parties. C'est le psychologie autrichien Christian Von Ehrenfels qui est à l'origine de cette psychologie de la forme et qui l'écrit en 1890 dans son article «über Gestaltqualitäten ». La théorie de la Gestalt faisait opposition au behaviorisme, qui concerne la psychologie du comportement. La théorie de la Gestalt se caractérise par 5 lois :
La loi de la bonne forme : c'est le précepte principe dont les 4 découlent : un ensemble de parties informe, comme un groupement aléatoire d'éléments, qui tend à être perçu automatiquement, au premier regard, comme une forme. De plus, cette forme sera vue comme simple, symétrique et stable.
La loi de continuité : des éléments rapprochés tendent à représenter des formes lorsqu'ils sont perçus dans une continuité, comme des prolongements les uns par rapport aux autres.
La loi de la proximité : les éléments sont regroupés d'abord les plus proches les uns des autres.
La loi de similitude : si la distance ne permet pas de regrouper les éléments, notre cerveau nous fera repérer les plus similaires entre eux pour percevoir une forme.
La loi de destin commun : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme
La loi de familiarité : on perçoit les formes les plus familières les plus significatives.
Voilà pour cette introduction à l'interface utilisateur ! Comme vous l'avez entendu, il est important de ranger visuellement selon des principes scientifiques pour que votre conception soit agréablement utilisée.
Sources
Bibliographie :
Jesse. J. Garrett – The elements of user experience
Don Norman – Design émotionnel, Pourquoi aimons-nous ou détestons-nous les objects qui nous entourent ?
Sitographie :