Psychologie du design : Façonner votre image en ligne

Nous avons couvert en détail l'importance de la couleur dans les deux précédents épisodes de notre série sur la psychologie du design. Le choix des couleurs, cependant, n'est qu'une partie de la lutte contre la mauvaise conception.

Que vous créiez un motif d'arrière-plan pour une nouvelle conception Web ou que vous réfléchissiez à l'emballage d'un nouveau produit, vous devrez éventuellement mettre un crayon sur du papier et commencer à dessiner. Peu importe la forme que vous commencez à former, cela aura un effet puissant sur vos téléspectateurs.

Lisez la suite pour en savoir plus sur les associations courantes que vos clients feront entre les formes que vous choisissez et ce qu'elles disent de votre marque globale. De plus, découvrez des exemples concrets de la façon dont ces formes ont été utilisées dans des conceptions de toutes sortes !

• Lignes
• Cercles et ovales
• Triangles
• Quadrilatères
• Polygones
• Formes abstraites

Lignes droites et courbes

En ce qui concerne le travail en ligne, vous allez vraiment devoir tracer la ligne entre angulaire et tout en courbes. Les lignes peuvent être la forme de base qui engendre toutes les illustrations, mais les logos et les conceptions Web qui reposent fortement sur le dessin au trait sont tout sauf simples.

En règle générale, les humains ont une préférence pour les lignes courbes par rapport aux lignes droites. Cela peut être attribué à la neurophysiologie du système visuel. Même les nourrissons dont les yeux ne sont pas complètement formés concentreront leur attention plus longtemps sur les formes courbes que sur les lignes nettes et anguleuses.

Cependant, les courbes n'augmenteront pas nécessairement le temps pendant lequel un utilisateur concentrera son attention sur votre conception. En fait, les angles vifs sont plus susceptibles d'attirer rapidement l'attention de vos utilisateurs. Là où les courbes évoquent la douceur et la complexité, les lignes nettes et les angles évoquent le sérieux et la simplicité.

Des études ont montré que les objets anguleux peuvent déclencher un sentiment de menace. Il a été démontré que la netteté des formes augmente l'activité de l'amygdale, qui est la zone du cerveau qui traite la peur. Pour cette raison, les angles vifs exigent souvent l'attention de votre public et attirent l'œil plus rapidement que leurs homologues incurvés.

Vous pouvez utiliser ces modèles de réponse humaine naturelle pour créer des designs qui font ressentir quelque chose à votre public. Pour les marques amusantes et légères, les lignes courbes peuvent vous aider à briser les blocs de texte sur les sites et à créer un sentiment de fantaisie. Pour les personnalités de marque plus sérieuses, cependant, des angles vifs et des lignes droites aideront à donner un sens à la gravité.

Le studio de création The Inlay utilise des lignes droites et un design minimaliste pour attirer votre attention lorsque vous faites défiler les pages, mais évite de trop utiliser les angles vifs qui peuvent déclencher des réponses négatives.

Cependant, la société de conseil en technologie Affinity utilise beaucoup de langage axé sur les relations sur son site Web. Leur logo en forme de flèche arrondie et leurs formes incurvées tout au long de la conception sont beaucoup plus accessibles que les images traditionnelles et plus rigides utilisées dans l'espace technologique.

Cercles et ovales

Si vous traitez quelqu'un de carré, vous insinuez probablement qu'il est ennuyeux. Le contraire signifierait alors que les cercles évoquent le plaisir, la jeunesse et une mentalité insouciante. Il est logique que, comme il a été démontré que l'attention des bébés retient plus longtemps les lignes courbes, ils ont également tendance à préférer les jouets circulaires.

L'ouverture et l'unité viennent à l'esprit lorsque vos téléspectateurs regardent un cercle. Les formes rondes peuvent également évoquer des sentiments de communauté ou de protection, comme être en sécurité dans sa propre bulle ou même un bon câlin. D'autres caractéristiques des cercles peuvent inclure l'amitié, la chaleur, la féminité et la renaissance (pensez : le cercle de la vie).

Du point de vue de la dénomination, la sonnette Ring a puisé dans les sens de leurs utilisateurs. Auditivement, vous pouvez imaginer la « sonnerie » de la sonnette tandis que visuellement, la « sonnerie » imaginée est liée à la fois à leur logo et à la façon dont le matériel physique est conçu.

The Circle, une émission de télé-réalité Netflix, est un autre endroit où la marque circulaire a le plus de sens. La prémisse est qu'un groupe de personnes qui peuvent ou non dire la vérité sur leur identité essaient de gagner en popularité parmi leurs pairs uniquement via une plate-forme de médias sociaux appelée The Circle. L'objectif? Restez au sein de la communauté, restez dans le Cercle.

Triangles

Accélération, mouvement et équilibre, les triangles illustrent facilement l'activité. Ce sont des formes énergiques et puissantes qui peuvent évoquer un éventail d'émotions allant de l'excitation à la prudence.

Les triangles ont un impact, et la façon dont ils sont dirigés est cruciale, car la direction changera leur sens dans l'esprit de votre consommateur. Par exemple, un triangle pointant vers le haut peut montrer de la force, mais lorsqu'il est tourné même légèrement de travers, il peut montrer de l'instabilité. Mais plusieurs triangles dans toutes les directions différentes peuvent démontrer de l'amusement ou de l'excitation, comme des confettis !

Le bouton de lecture de votre service de streaming vidéo ou musical préféré est plus que probablement un triangle pointant vers la droite. Il ressemble à une flèche qui indique un mouvement vers l'avant, par opposition aux deux lignes droites qui indiqueraient une pause (une « rupture » littérale entre deux lignes droites).

HGTV utilise également la conception triangulaire de manière intelligente. Le triangle isocèle se trouve en haut de leur mot-symbole, une manière claire mais simple d'illustrer le toit d'une maison. Le « V » à l'autre extrémité du logo fait un excellent contrepoids lorsqu'il pointe vers le bas.

Quadrilatères

Les quadrilatères incluent toute forme à quatre côtés. Les carrés et les rectangles sont les exemples les plus courants, mais les trapèzes, les losanges et quelques autres sont également inclus ici. Les carrés et les rectangles sont souvent des symboles de stabilité et de constance, de conformité ou de droiture. Leurs angles droits suggèrent visuellement la rationalité, l'ordre et la structure.

Les carrés et les rectangles sont souvent utilisés par les marques qui veulent se montrer terre-à-terre ou pragmatiques. De National Geographic à LinkedIn en passant par Dominos, les carrés et les rectangles sont courants, en particulier pour les logos, dans un large éventail d'industries.

D'autres types de quadrilatères transmettront également ces sentiments de régularité, mais avec une touche visuelle plus avant-gardiste et contemporaine. Les diamants peuvent être utilisés pour véhiculer des produits de luxe ou haut de gamme en raison de notre association inconsciente entre la forme et la pierre précieuse. Les quadrilatères comme les cerfs-volants et les losanges sont parfaits pour suggérer un niveau de stabilité sans recourir à des motifs surutilisés.

Le concepteur Web australien Mokthar Saghafi utilise une forme de parallélogramme pour le motif géométrique de son site Web. Les figures à quatre côtés sont soigneusement empilées, faisant allusion à la stabilité généralement connotée avec des formes à quatre côtés. Cependant, les définir légèrement décalés comme un losange au lieu d'un vrai rectangle ajoute une autre couche d'intérêt visuel.

Bien que les Lego puissent ne pas sembler terre-à-terre ou conformes, ils sont certainement stables - comment feriez-vous autrement pour construire avec eux ? Leur logo carré est également un rappel visuel de leur produit. Il ressemble très remarquablement à une brique Lego carrée avec quatre goujons.

Pentagones, hexagones et octogones

En mathématiques et en design, ce collectif de formes est connu sous le nom de « polygones ». Polygone est un terme générique utilisé pour décrire toute forme géométrique 2D, mais il est généralement réservé à ceux qui ont 5 côtés ou plus.

Dans la nature, ces formes se retrouvent partout, des nids d'abeilles aux motifs de coquillages en passant par les cristaux et les formations rocheuses. Dans la conception Web, cependant, ils sont utilisés moins fréquemment. Cela peut être une bonne chose pour vos clients, car cela vous aidera à vous démarquer des tendances de conception les plus courantes !

Complexes et futuristes, les polygones sont souvent utilisés pour créer une aura moderne et contemporaine tout en restant bien structurée. Cependant, certains polygones sont couramment utilisés dans les industries de niche. Par exemple, les entreprises de fabrication et de réparation d'automobiles et de machines utilisent souvent des hexagones et des octogones dans leur conception car ils ressemblent à la tête d'un boulon.

La disposition hexagonale utilisée par l'agence de conception Web britannique Built By Buffalo est un excellent moyen de montrer de nombreux exemples de leur travail à l'avance sans surcharger leur page d'accueil. Il est ensuite utilisé sur tout le site Web pour présenter des photos d'équipe, montrer des photos de bureau amusantes et appeler des informations importantes.

Le Pentagone est l'un des bâtiments les plus reconnaissables au monde, et il porte bien son nom pour sa structure à cinq côtés. Un excellent exemple d'utilisation de polygones pour la conception architecturale, le bâtiment lui-même transmet le stoïcisme et la stabilité

Formes abstraites

Il existe quelques autres formes géométriques et abstraites couramment utilisées dans les conceptions Web et de produits, les promotions et les efforts de marque. Prenons un aperçu rapide de certaines de ces formes populaires et de leurs significations.

Blobs

Les blobs sont souvent des formes caractérisées comme amusantes ou idiotes. Le fameux « effet bouba/kiki » a prouvé que les individus de toutes les cultures et de tous les systèmes d'écriture attribuent le mot absurde « bouba » à des formes de gouttes, tandis que « kiki » est associé à des formes abstraites pointues.  

Lorsque vous choisissez d'utiliser des formes abstraites nettes avec des bords pointus, vous attirerez rapidement l'attention de votre spectateur. Avec des formes plus rondes, cependant, vous les rendrez plus confortables et ludiques.

Le studio de conception WordPress personnalisé basé à Brooklyn, Buzzworthy, utilise de nombreuses formes de gouttes et des animations de transition bulbeuses pour mettre en valeur leur style amusant et funky.

Des croix

Souvent utilisées pour mettre en valeur la spiritualité et la guérison, la connexion ou l'équilibre, les croix apparaissent tout le temps dans la conception de sites Web. C'est la façon la plus courante de connoter visuellement une rencontre ou une connexion entre deux choses. Une autre utilisation courante d'une croix dans la conception est le signe "plus", indiquant que vous pouvez ajouter quelque chose à un panier ou développer pour plus d'informations.

Dans les logos, les croix sont généralement réservées aux organisations religieuses en raison de leurs liens religieux forts, mais d'autres utilisations plus agnostiques de la forme ont également réussi.

La Croix-Rouge américaine est l'une des organisations les plus remarquables à utiliser l'imagerie croisée. Leur travail se situe à l'intersection des personnes qui ont besoin d'aide et des personnes qui peuvent aider pendant ou après une catastrophe. Le logo de la Croix-Rouge les place à l'intersection de ces deux éléments, tout en faisant visuellement allusion à la guérison et à la santé.

Spirales

Les spirales évoquent le mouvement et la progression. Les spirales et les boucles arrondies illustrent souvent la perfection, la beauté et l'évolution. Si votre spirale est plus pointue, comme un mouvement en zigzag, elle est plus susceptible de transmettre un pivot, un changement ou une nouvelle direction prise par un produit, une entreprise ou un service.

La direction de votre spirale aura également beaucoup à voir avec la façon dont elle est perçue, surtout si vous prévoyez de l'animer. La dernière chose que vous voulez est d'essayer de transmettre le développement, la croissance ou la créativité et de finir par envoyer vos utilisateurs dans une spirale descendante littérale. Comme pour la plupart des choses, exprimez un mouvement positif en faisant bouger vos spirales vers le haut et vers la droite lorsque cela est possible.

Rally, un studio de produits numériques basé à Salt Lake City, UT, utilise une simple spirale sur fond blanc pour l'intégralité de son site. Les couleurs changeantes et le mouvement dynamique de la spirale maintiennent l'intérêt visuel des téléspectateurs et créent une expérience utilisateur cohérente.

Formes organiques

Les formes organiques comprennent les feuilles, les branches, les racines, les vagues, les étoiles, les nuages, etc. Là où les formes géométriques peuvent être utilisées ensemble pour créer des images (exemple : un carré avec un triangle sur le dessus devient une simple maison), les formes organiques sont généralement autonomes comme une image en soi.

Ces formes seront généralement irrégulières ou asymétriques (mais pas toujours) et elles auront une association avec le monde naturel d'une manière ou d'une autre. L'idée du « nuage » est une utilisation parfaite de l'imagerie organique.

L'idée du stockage "cloud" lie quelque chose de très capiteux et technique - un "emplacement" intangible qui contient des informations - et le relie au monde naturel, le rendant plus accessible aux novices en technologie. SoundCloud, par exemple, est un site de partage de musique sur lequel les utilisateurs peuvent télécharger des fichiers audio et les partager avec une communauté croissante d'amateurs de musique à travers le monde.

L'esprit derrière le design

Comme toujours, ce ne sont pas des règles strictes et rapides. Utilisez plusieurs formes, épaisseurs de ligne et alignements dans votre conception pour créer un intérêt visuel. L'utilisation de plusieurs éléments ensemble vous permettra de raconter une histoire que vos lecteurs pourront voir avec leurs yeux et ressentir dans leurs tripes.

Le centre de ressources WP Engine est votre source d'informations sur tout ce qui concerne le design, et notre série Psychologie du design consiste à utiliser les éléments fondamentaux du design pour attirer les clients avec une image de marque bien planifiée.

Lisez les parties un et deux pour une plongée profonde dans les significations de la couleur et comment les utiliser dans votre narration visuelle. Ensuite, soyez à l'affût de la quatrième partie qui examinera l'importance de votre police de caractères, du placement du contenu et du choix des mots.