Guide du débutant au design visuel

couverture livre étapes création site web

Vous est-il déjà arrivé de tomber sur le template du site web de vos rêves ?

Mais qu'après de longues heures de personnalisation vous vous retrouvez avec quelque chose de moche ?

Tôt ou tard, cela finit par créer de la frustration. Ce livre est fait pour que la frustration disparaisse.

Le design visuel consiste à utiliser l’image, la couleur, les formes, la typographie et les formulaires pour améliorer l’utilisabilité et améliorer l’expérience utilisateur. Le design visuel en tant que champ a grandi à la fois à partir du design de l’interface utilisateur et du design graphique.

Designer visuel, designer graphique, quelles différences ?

Vous n’avez aucune honte à ressentir quand parfois vous vous sentez confus au sujet de toute la terminologie et les titres de postes autour du monde du design. Quelle est la différence entre le design graphique et le design visuel ? Les deux rôles fournissent-ils un service différent ? Pour les designers visuels et graphiques, la différence peut résider principalement dans le titre du poste et les attentes salariales. Nous verrons dans la suite de cet article ce que fait chacun de ces designers.

Designers graphiques (graphistes)

En design graphique, quelque chose — que ce soit une marque, une information ou une publicité — est communiquée aux utilisateurs à travers le texte et les images. La façon dont ces deux éléments, textes et images, sont placés sur la page web ou sur la page imprimée fait également partie des activités d’un graphiste, ainsi que les choix de police, de la couleur et d’autres éléments visuels.

Grâce à leur métier, les graphistes inspirent des émotions et des réponses. Un designer graphique saura que les utilisateurs répondront très différemment aux textes écrits dans la police Comic Sans tant décriée par opposition à la police Courier New à l’ancienne. De même, la réponse à une campagne contre la pauvreté sera différente si elle est illustrée par l’image d’un bébé en insuffisance pondérale ou d’une photo d’un aliment. À son meilleur niveau, le graphisme est emblématique et reconnaissable, comme la police Coca-Cola ou le logo I heart NY.

Compétences : De nos jours, la plupart des graphistes doivent avoir des compétences qui vont au-delà d’un carnet de croquis et d’un crayon ; La maîtrise d’Adobe Photoshop, d’Illustrator et d’InDesign est essentielle pour travailler dans le graphisme en ligne et hors ligne. Les graphistes peuvent travailler sur la création de documents imprimés (emballages, brochures, magazines, etc.) ou le design de pages web et d’applications. Besoin d’en savoir plus sur ces programmes ? Jetez un œil à notre formation sur le design graphique.

Designers visuels

Les designs visuel et graphique sont étroitement liés et les deux termes sont souvent utilisés de manière interchangeable. Vous pouvez rencontrer des offres d’emploi et des programmes d’études décrits comme design visuel / graphique.

Parfois, le design visuel est appelée communication visuelle, et cette terminologie peut vous aider à différencier les deux rôles — un graphiste utilise des polices de caractères, la hiérarchie, la couleur, les images et le placement pour créer un produit parfait. Une entreprise recrutant un designer visuel peut être intéressée par un candidat ayant la capacité de proposer une esthétique holistique qui traverse toutes les plateformes. Considérez les designers graphiques comme des transmetteurs d’informations, et les designers visuels comme étant centrés sur l’aspect et le ressenti du produit et de la marque, et impliqués dans la conversation sur ce que le site ou le produit fournit, et les objectifs du projet.

Compétences : Bien que le niveau de formation d’un designer visuel soit semblable à celui d’un graphiste, la rémunération est plus élevée. La forte association entre le titre du designer visuel et le design en ligne peut expliquer l’écart salarial ; généralement, le travail de design en ligne paie à un taux plus élevé que le design d’impression. Un designer visuel sert de point médian entre les capacités de design pur d’un designer graphique, et les intérêts plus axés sur l’utilisateur d’un designer d’expérience utilisateur. Ce qui nous amène au troisième type de designer… Le designer d’expérience utilisateur !

Concrètement, c’est quoi le design visuel ?

Le design visuel vise à façonner et à améliorer l’expérience de l’utilisateur en considérant les effets des illustrations, de la photographie, de la typographie, de l’espace, de la disposition et de la couleur sur l’utilisabilité des produits et leur attrait esthétique. Pour aider les designers à atteindre cet objectif, le design visuel considère une variété de principes, y compris l’unité, les propriétés Gestalt, l’espace, la hiérarchie, l’équilibre, le contraste, l’échelle, la dominance et la similarité.

La design visuel en tant que champ (on le rappelle une fois de plus) a grandi à la fois à partir du design de l’interface utilisateur (UI) et du design graphique. En tant que tel, il se concentre sur l’esthétique d’un produit et de ses matériaux connexes en mettant en œuvre de façon stratégique des images, des couleurs, des polices et d’autres éléments.

Un design visuel réussi assure que le contenu reste central à la page ou à la fonction, et l’améliore en engageant les utilisateurs et en contribuant à renforcer leur confiance et leur intérêt pour le produit (et, par conséquent, la marque). Le domaine du design visuel regorge d’une foule de questions à prendre en compte, allant des différences d’interprétation culturelle de la couleur rouge à l’utilisation correcte des espaces, aux tabous universels tels que la mise en place d’éléments rouges sur fond bleu. Il s’appuie sur une histoire riche et longue de la production d’un travail esthétique et réussi.

En considérant comment ils peuvent former ou organiser des éléments visuels pour répondre aux principes du bon design visuel, les designers peuvent façonner l’expérience de l’utilisateur afin de susciter des réponses et des comportements des utilisateurs qui conviennent à l’utilisation et au but du produit. Les petits détails discrets de l’esthétique d’un produit peuvent ainsi jouer un rôle important dans le design de l’expérience utilisateur.

Le design visuel et l’UX

Dans le livre de Don Norman, Emotional Design: Why we Love (or Hate) Everyday Things, Norman décrit une étude dans laquelle il découvre que «… le degré d’esthétique d’un système affectait les perceptions post-utilisation de l’esthétique et de l’utilisabilité. En d’autres termes, le design visuel a autant d’effet sur l’expérience globale que l’utilisabilité réelle.

Cela semble ne pas être correct, l’idée que le design visuel pourrait être aussi important ou plus important que l’utilisabilité. Mais cela ne devrait pas nous surprendre. Les humains sont attirés par les choses et les personnes qu’ils trouvent esthétiques, au point que des études ont montré que les adultes et les enfants sont plus susceptibles de faire confiance à quelqu’un qu’ils trouvent attirant. La même théorie semble être vraie pour les applications et les sites : les gens sont plus susceptibles de donner à une application attrayante le bénéfice du doute.

Dans cette partie, nous verrons pourquoi les gens préfèrent des interfaces attrayantes, ce qu’il en est de nous en tant qu’êtres humains et comment nous, en tant que praticiens UX, pouvons utiliser ces connaissances pour créer de meilleures expériences utilisateur.

Qu’est-ce que l’attraction ?

Avant de discuter de l’esthétique dans l’UX, il y a une question à laquelle nous devons répondre. Qu’est-ce que cela signifie qu’une chose soit objectivement attractive ? C’est, littéralement, une question de tous les âges. Les philosophes aussi loin que Pythagore, ont demandé ce qu’est la beauté, les adeptes de Pythagore estiment que la beauté est « une manifestation de relations mathématiques harmonieuses comme la section d’or ». Depuis, de nombreux philosophes mathématiciens tentent de quantifier la beauté.

Voltaire, d’autre part, a soutenu que la beauté est impossible à définir, donnant peut-être lieu à l’affirmation « la beauté est dans l’œil du spectateur ». Les empiristes suivent cette croyance, voyant la beauté comme le plaisir, et comme reflétant la personne qui voit la beauté comme la chose qui est belle.

La beauté est dans l’œil du spectateur

Il y a des scientifiques qui croient que les choses que nous trouvons esthétiques sont celles qui sont les plus saines pour nous. Ainsi, la maladie rend les gens « inesthétiques », et les choses comme les baies, qui sont bonnes pour nous, sont aussi des choses que nous trouvons agréables visuellement. Il y a des trous significatifs dans cette théorie (pensez à de belles grenouilles venimeuses), mais il peut y avoir du mérite.

Alternativement, certains soutiennent que la beauté vient des attitudes sociétales et culturelles. Considérez le fait qu’aux États-Unis, la plupart des enfants regardent des films Disney à un jeune âge, renforçant l’idée que les sorcières et les malfaiteurs sont laids, et que les héros et les héroïnes sont beaux, mais cela va plus loin. Beaucoup d’articles de mode, les tendances de pilosité du visage, même des formes de corps sont jugées attrayantes maintenant, influencées fortement par les médias qui nous entourent tous les jours ; dans dix ans, ces mêmes tendances sembleront embarrassantes ou tristes. À mesure que les attitudes culturelles changent, la façon dont cette culture définit la beauté change également.

Traduisons cela en design UX. Il peut y avoir certaines interactions ou éléments de sites qui nous semblent attrayants parce que nous les associons à l’utilisabilité. En même temps, il y a des tendances web et des atouts visuels qui peuvent sembler attrayants maintenant, mais qui ne retiendront pas le même attrait dans quelques mois ou quelques années. Par exemple, il fut un temps où Comics Sans était la police de choix, et les start pages flash étaient le symbole d’un site bien conçu.

L’implication pour l’UX

Avec la compréhension qu’il n’y a pas une esthétique « parfaitement belle », nous pouvons maintenant nous plonger dans le rôle du design visuel dans l’UX. Après tout, c’est beaucoup plus que de simplement rendre les choses belles.

Utilisability.gov définit le design visuel comme « l’implémentation stratégique d’images, de couleurs, de polices et d’autres éléments », afin d’améliorer une création ou une interaction, et engager les utilisateurs. Le design visuel diffère du design d’interaction. Le design d’interaction se concentre sur la fonctionnalité nécessaire pour accomplir une tâche. Le design visuel engage les utilisateurs en attirant l’attention sur la fonctionnalité idoine, en hiérarchisant les tâches sur une page par la taille, la couleur et l’utilisation des espaces, et même en augmentant la confiance de la marque grâce à l’utilisation de repères visuels.

À certains égards, le design visuel peut être considéré comme un mélange entre le design graphique et le design de l’expérience utilisateur (nous l’avons déjà dit, je sais). Avec la mise en garde que ces domaines sont en constante évolution, il est juste de dire que le design graphique est généralement le design d’images ou de visuels statiques. Le design de l’expérience utilisateur intègre le design de l’interaction et le design de l’interface utilisateur, mettant ainsi l’accent sur la communication. Le design visuel se trouve juste au milieu, incorporant des images et visuels statiques dans le but d’améliorer la communication et l’utilisabilité.

https://www.youtube.com/watch?v=JtgBWImgTUM

Le design visuel peut réellement faire une énorme différence dans la façon dont les utilisateurs voient un écran (jeu de mots). Il est même possible que les utilisateurs s’attendent à plus d’écrans visuellement attrayants : une meilleure fonctionnalité, plus utilisable, et plus humaine.

La corrélation

Luke Wroblewski, Directeur des produits chez Google, a passé des années à explorer les corrélations entre le design visuel et les actions des utilisateurs. Dans sa présentation de 2008, « Communicating with Visual Hierarchy », il explique le rôle du design visuel dans l’UX. Il affirme que la hiérarchie visuelle, ou l’endroit où nous plaçons les éléments sur un écran et comment nous attirons l’attention sur eux, nous aide à :

  • communiquer des messages,
  • rendre claire les actions, et
  • organiser l’information.

Il continue à partager de nombreux conseils et recommandations, tous conçus pour encourager les designers à considérer où et comment ils affichent l’information. Une hiérarchie visuelle attrayante est également utilisable.

Don’t Make Me Think A Common Sense Approach to Web Usability

Pourtant, 7 ans plus tard, on parle encore peu de l’importance du design visuel dans le travail de l’expérience utilisateur !

Sur StackExchange, la conversation continue. Où un utilisateur fait remarquer « Est-ce que l’on a [vraiment besoin] de la recherche pour souligner que l’aspect de l’interface va, bien sûr, affecter l’expérience ? En fin de compte, les humains jugent les livres par leur couverture. » Un autre encore nous rappelle : « Si le design visuel compte, alors comment expliquez-vous le succès incroyable des produits de merde de Microsoft ? J’utilise Outlook depuis presque 20 ans et il me semble que ce n’est jamais la même interface deux fois (non, je ne suis pas un idiot). Et pourtant, il a toujours une part de marché élevée ! »

Qu’est-ce que ça veut dire ? La beauté est-elle dans l’œil du spectateur, et certains utilisateurs trouvent-ils Microsoft beau ? Ou est-ce que le design visuel est juste un au cas où, et non quelque chose qui compte, comme l’a défini Luke Wroblewski ?

Un utilisateur de StackExchange semble atteindre l’équilibre : « … le design visuel affecte un ou plusieurs aspects de l’expérience utilisateur globale. Ce n’est peut-être pas la partie la plus importante dans le but d’aider l’utilisateur à atteindre ses objectifs, mais elle est inévitablement liée à la perception de l’utilisateur. » Bien sûr, ajoute-t-il. « Et je pense que vous serez d’accord que la réponse est OUI, mais de quelle manière ? C’est la question à 64 000 $. »

Il est logique de supposer qu’un site visuellement attrayant bénéficie du même avantage qu’une personne bien habillée lors d’un entretien : le bénéfice du doute. Lorsque les utilisateurs visitent un site peu attrayant, s’ils ont une bonne expérience, ils seront toujours heureux. Cependant, s’il y a un hic avec un site peu attrayant, les utilisateurs sont plus susceptibles d’abandonner rapidement. Lorsque le site est attractif (que ce soit de manière classique ou à la mode), les utilisateurs lui font davantage confiance et sont prêts à lui donner une seconde chance.

Qu’est-ce que cela signifie pour les designers UX

Pour les designers UX, il y a deux principaux points à retenir. Tout d’abord, ne comptez pas uniquement sur le design visuel pour sauvegarder une mauvaise expérience. Les visuels les plus attrayants ne corrigeront pas les fonctionnalités mal construites ou les fonctionnalités qui sont mauvaises pour l’utilisateur. Deuxièmement, n’ignorez pas le design visuel ! Nous avons tous de la concurrence, et le design visuel peut être le différenciateur stratégique qui encourage les utilisateurs à valoriser une application par rapport à une autre également utilisable.

Jerry Cao de UXPin a aidé avec des articles sur Creative Bloq et Fast Company, les deux offrant des listes de règles pour le design visuel. Voici un best of, pour les designers UX qui cherchent à démarrer :

  • Restez cohérent. L’incohérence va transformer même le plus beau design en un désordre laid. C’est un domaine où le sentiment conduit la vision ; Si un utilisateur est confus par le site, ce sentiment fera paraître un site laid à ses yeux.
  • Testez des concepts visuels ainsi que des prototypes de papier. Comme le dit Jerry sur Creative Bloq, « quand les gens sont en ligne, ils disent qu’ils « regardent » un site web, pas « interagissent » avec un site, même si cette dernière déclaration est plus précise. » Nous réagissons fortement aux visuels et un branding bien fait peut influencer à quel point nous faisons confiance et répondons aux interactions.
  • Ne soyez pas distraits par les tendances. Il y a une raison pour laquelle la petite robe noire est restée à la mode au cours des 100 dernières années. C’est simple. C’est propre. C’est classique. De même, un design visuel simple, propre et classique résiste au fil du temps, d’une manière que les tendances ne peuvent pas promettre. Même s’il est probable que certains aspects du flat design resteront (par exemple), dans l’ensemble, il est probable que beaucoup d’applications seront « [année en cours] » dans quelques années.

Pour terminer, je vous conseille ce très bon livre de Jason Tselentis, Design graphique pour écrans !

Sources

What is Visual Design? par Interaction Design Foundation

Ux, visual, or graphic: which type of design is right for you? par Madeleine Burry

How Visual Design Makes for Great UX par Marli Mesibov