Utilisation de la façon dont les humains traitent les informations visuelles dans la conception Web

La conception de sites Web et d'interfaces utilisateur est devenue beaucoup plus facile ces dernières années. Il y a tellement d'outils que vous pouvez utiliser qui rend inutile de recommencer à zéro lors du développement d'interfaces utilisateur (consultez notre nouvelle compilation d'interface utilisateur). Mais je ne suis pas ici pour discuter de la mort du web design.

Au lieu de cela, je vais essayer d'expliquer les concepts de base, fondés sur la psychologie, à l'origine de la pléthore d'outils de conception visuelle (des kits CSS les plus fondamentaux aux thèmes premium les plus avancés).. Vous ne les utiliserez pas seulement, mais vous les comprendrez également. Je suis convaincu que cela facilitera également la modification réussie des systèmes existants..

Voyons comment fonctionne le corps et l'esprit humain lorsqu'il s'agit de traiter des informations visuelles et comment ces connaissances sont interprétées dans la conception pour le Web..

Les principes d'organisation perceptuelle

Selon la psychologie de la Gestalt, le tout est différent de la somme de ses parties. Les adeptes de cette école de pensée affirment qu'il existe quelques principes sur la manière dont l'esprit groupe les objets. Ce ne sont pas simplement des théories, mais des faits concrets sur l'organisation de groupes visuels..

Vous trouverez ci-dessous certaines des lois et les utilisations les plus populaires et les plus connues de ces principes. Vous pourrez peut-être même trouver de nouvelles idées pour votre prochain design.

Loi de similarité

Le premier principe stipule que les petits objets similaires sont perçus comme un groupe, plutôt que plusieurs instances de ce même petit objet. La similarité peut être basée sur la forme, la couleur, l'ombrage ou une autre qualité. Ce principe est la base de conception des motifs ainsi que de nombreuses conceptions de logo géométriques et minimalistes.

Par exemple, cette image apparaît sous forme de logo circulaire au lieu de triangles séparés. La forme triangulaire au bas de l'aigle laisse penser que la forme fait également partie de l'image..

Vous avez probablement aussi utilisé cette loi sans le savoir pour créer quelques, contenu de même taille pour votre site web. Si vous souhaitez montrer que certains éléments de contenu ont la même importance ou partager des informations similaires, créer une forme spécifique dans ce but. De cette façon, votre utilisateur associera immédiatement cette forme particulière à une zone d’information particulière..

Loi de proximité

Selon cette loi objets plus proches les uns aux autres sont considéré comme appartenant au même groupe. Les mêmes carrés, lorsqu'ils sont rapprochés les uns des autres de manière rapprochée et régulière, créent un sentiment de regroupement..

Ce principe a été largement utilisé sur le Web récemment, en particulier lorsque vous travaillez avec boucles de contenu, par exemple. sur les blogs et les boutiques en ligne.

Vous pouvez immédiatement regrouper le titre, l'image sélectionnée, les métadonnées et l'extrait, même sans bordure ni arrière-plan. Vous pourrez peut-être éliminer les lignes et les couleurs inutiles de votre dessin pour le rendre plus minimaliste, tout en restant parfaitement compréhensible..

Pour votre commodité, je citerai également Wikipedia qui dit:

Loi de bonne forme

Également connue sous le nom de loi de Pragnanz ou de bonne gestion, cette loi stipule que nous avons tendance à regrouper des objets s'ils former un motif simple, régulier et ordonné. Notre esprit essaie de séparer des formes complexes et difficiles à percevoir en plusieurs groupes de formes simplement compréhensibles. cela a conduit à la importance de la concision.

C’est aussi l’une des raisons possibles du succès de conception basée sur la grille et cela fait des structures web si populaires basées sur des tables et des cadres (heureusement les choses des âges sombres de la conception).

Si vous gardez ce principe à l'esprit, vous ne finirez probablement pas par créer un site Web rempli de blocs de contenu complexes, qui seraient reliés entre eux par le biais des autres lois ci-dessus. Pourtant, vous pouvez regrouper vos objets de manière intéressante, par exemple. en forme de diamant ou de cerf-volant, car celles-ci sont toujours perçues comme des formes ordonnées et concises.

Théorie des couleurs, perception et utilisation

La vision des couleurs et la perception de la couleur est largement subjectif basé sur comment réagit le cerveau des spectateurs aux ondes lumineuses réfléchies par des objets ou des formes colorés. La règle est que différentes personnes, même sans déficience visuelle, voient le même objet dans une couleur différente (vous vous souviendrez peut-être de la robe)..

Propriétés de couleur

Pourtant, il y a trois propriétés objectives de la couleur; teinte, valeur et intensité.

Teinte est le nom de la couleur indiquée sur une roue chromatique ou dans un arc-en-ciel. Il y a six (ou douze, selon votre interlocuteur): les teintes de base: rouge, orange, jaune, vert, bleu et violet..

Jaune, bleu et rouge sont primaire, orange, vert et violet sont secondaire les teintes; de plus il y a tertiaire teintes qui sont les mélanges directs de deux teintes primaires et secondaires (par exemple, jaune vert ou violet rouge).

Valeur est la luminosité ou l'obscurité de la couleur, appelée haute valeur pour les couleurs claires ou faible valeur pour les couleurs sombres.

Intensité se réfère à la luminosité ou obscurité d'une couleur; cela signifie qu'une couleur ayant la même teinte et la même valeur peut toujours être atténuée ou éclaircie en modifiant l'intensité et en créant des sorties de couleur différentes.

L'intensité la plus élevée de chaque couleur est la teinte affichée sur la roue chromatique (voir ci-dessous), tandis que la plus basse est la couleur gris.

Contrastes de couleurs

En se référant aux lois de similitude susmentionnées, les esprits des percepteurs créent des groupes de petits objets qu’ils voient en fonction de propriétés similaires et différentes, souvent des couleurs..

Lorsque vous choisissez votre palette de couleurs pour votre site Web, en particulier si vous optez pour une approche minimaliste ou si vous concevez une zone de contenu contenant beaucoup de texte, par exemple. blogs ou annonces, vous devriez être conscient des différents contrastes de couleurs cela pourrait vous aider à trouver les bonnes valeurs de couleur pour le meilleur résultat.

Il y a 7 contrastes de couleurs selon Johannes Itten, bien que je n'en mentionne que 3.

1. Contraste de teinte

Jaune, rouge et bleu à pleine intensité sont des contrastes directs et vifs. Les teintes secondaires permettent une distinction moins nette, mais fonctionnent tout de même, tout comme les teintes tertiaires, bien que ni Des résultats impressionnants.

2. Contraste complémentaire

Deux couleurs sont en contraste complémentaire si, lorsqu'elles sont mélangées, elles créent un gris neutre. On les appelle aussi paires étranges. S'ils sont adjacents, ils renforcent la vivacité et l'intensité, tandis que mélangés, ils s'annulent. Chaque couleur a un et un seul complémentaire; sur la roue des couleurs, les paires sont diagonalement opposées.

3. Contraste clair-foncé

Si vous souhaitez expérimenter avec un site Web monochrome, en utilisant différentes valeurs de la même teinte pourrait produire des résultats impressionnants. Souvent utilisé dans la conception Web minimaliste, vous pouvez également obtenir d'excellents résultats basés sur un contraste clair / foncé si vous souhaitez fournir des options de couleur de thème à votre utilisateur. Ce contraste est également utilisé pour la conception en niveaux de gris.

Si vous voulez poursuivre les 4 contrastes de couleurs restants, vous pouvez les trouver ici.

Créer des palettes et vérifier les contrastes

Sachant que la théorie est bonne, interpréter vos idées est une autre chose. Ne vous inquiétez pas, le Web vous apporte une aide précieuse pour vos besoins en matière de couleurs. Il existe une pléthore d’outils qui vous aident à créer des motifs de couleur personnalisés basés sur des règles de contraste de couleur, par exemple. Paletton ou Adobe Kuler.

Pour des raisons Web, vous pouvez vérifier les contrastes que vous avez choisis d'utiliser sur webAIM, sur le site de Jonathan Snook ou télécharger une instance de l'analyseur de contraste des couleurs de The Paciello Group ici.

Conclusion

Lorsque vous commencez à travailler avec un nouveau thème ou à modifier des thèmes existants, essayez de réfléchir aux principes de perception pour organiser votre contenu et n'oubliez pas de prendre en compte les règles de couleur lorsque vous donnez à votre conception sa forme et sa teinte définitives..

Note de l'éditeur: Cet article d'invité est écrit pour Hongkiat.com par Marton Fekete. Marton est un développeur de site hongrois récemment accroché à WordPress. Il est un passionné de la refonte et un auteur de contenu indépendant qui aime jouer aux jeux de rôle pendant son temps libre..