Avec l’effervescence des plateformes digitales, les créatifs ont pu découvrir un nouveau terrain de jeu pour mettre en avant leur savoir-faire : le web. Comme tout support, il possède ses tendances, ses codes mais aussi ses contraintes. En effet, nous n’appréhendons pas de la même manière un support print et un support digital. Mais alors quelles sont les spécificités de la création sur le web ?
Graphisme, que se cache-t-il derrière ce terme ?
Avant de débuter la création, il est nécessaire de passer par une phase stratégique. En effet, la création ne doit pas uniquement avoir pour vocation d’être « belle » mais doit répondre à des objectifs. Le design sera alors conçu en cohérence avec l’ambition de la marque et devra refléter son identité pour se démarquer de la concurrence.
Jason Tselentis cite Terry Lee Stone dans son ouvrage « Design graphique pour écrans » : « le design graphique possède un grand pouvoir pour captiver, persuader, motiver et émerveiller le gens ; mais il voit rarement le jour sans une planification rigoureuse, une organisation efficace et une gestion sans faille ». 1
Marine Darmochod, graphiste et webdesigner ajoute également que “toute création ne doit pas être pensée seulement selon sa sensibilité personnelle mais s’adapter au besoin du client et au secteur d’activité concerné, qui va influencer la manière de créer“.
Représentation de la place du client dans la création,image issue du site digital synopsis
Après cette phase d’analyse terminée, il est l’heure de s’intéresser au graphisme pur ! Mais que signifie ce terme utilisé très largement par les créatifs ?
En voici quelques définitions : « manière de représenter une idée, un concept, une marque » selon Marine Darmochod, ou encore « consiste à créer, choisir et utiliser des éléments graphiques, tels que les caractères typographiques, les dessins, les couleurs, les photos … » selon l’agence anthedesign. 2
Benjamin Ben Kemoun, directeur artistique chez Adesias en donne également sa propre définition et offre à ce terme une tout autre dimension. Selon lui, le graphisme réside dans le fait de : « savoir jouer avec les formes et les couleurs pour faire passer un message ». Le graphisme a alors pour « fonction d’émouvoir le spectateur dans l’intention de lui vendre quelque chose ». Nous traiterons cet aspect plus en détails lors d’un prochain article, sur la relation étroite qui lie le design et l’engagement de l’utilisateur.
Quant à Dorian Pons, également directeur artistique chez Adesias, il évoque plusieurs formes de graphisme : le graphisme artistique dont le seul objectif est de démontrer un talent, un savoir-faire et le graphisme commercial qui a pour but de vendre, et qui doit de fait être impactant et efficace.
La première étape pour convaincre l’utilisateur est alors de travailler l’apparence du site web. Si l’appréciation d’un visuel reste subjective, de nouveaux professionnels du web, les UI designers travaillant aux côtés des webdesigners ont pris le relais afin d’optimiser au maximum la rencontre entre l’internaute et l’interface.
L’UI design fait son entrée !
Mais que signifie cette abréviation ? User Interface (UI), en français Interface Utilisateur est une activité qui consiste à créer des interfaces agréables et esthétiques par le biais des éléments visuels : typographies, couleurs, boutons… 3 Il s’agit alors de trouver les bonnes associations et compositions afin de créer des sites web attrayants et optimisés.
On peut résumer l’UI design comme la partie visible de l’iceberg 4 , derrière laquelle se cache l’UX design, une forme de design complémentaire. Ce terme qui représente à lui seul, une multitude de règles et de codes, va s’intéresser à l’expérience utilisateur, que nous étudierons plus en profondeur dans un prochain article.
Création, quand les mathématiques s’en mêlent !
Quand on parle de création, on pense à l’imagination, à l’inventivité, à la subjectivité, à une certaine liberté, mais celle-ci repose très souvent sur des lois mathématiques et scientifiques. Comment pourraient exister les impressionnantes et célèbres Pyramides d’Égypte sans lois mathématiques ? Si leurs mystères nous échappent, revenons à des règles plus accessibles, à nous créatifs, pour concevoir des designs équilibrés. Une notion qui « reste fondamentale pour réussir une composition ». 5
Comme l’évoque Jason Tselentis dans « Design graphique pour écrans » et le confirme Benjamin Ben Kemoun, directeur artistique, les proportions mathématiques peuvent être très utiles lors de la conception graphique, notamment pour le choix des tailles de caractères.
L’auteur met alors en lumière la suite de Fibonacci qui « utilise une séquence composée uniquement de nombres entiers, où le nombre suivant est toujours la somme des deux précédents ». 6
Cette méthode permet alors de déterminer des tailles de typographies équilibrées, pour un grand titre, un sous-titre et pour le corps du texte.
illustration suite de Fibonacci, image issue du site investisseur en herbe.
Dans cette lignée, Benjamin Ben Kemoun utilise dans son activité de directeur artistique, un coefficient de 1,3 pour créer des mises en pages lisibles et structurées.
De nombreuses autres règles existent, telles que « le nombre d’or » évoqué par Jason Tselentis mais également par Aarron Walter dans son livre « design émotionnel ». J. Tselentis aborde la notion de façon très cartésienne de la manière suivante :
« méthode permettant de diviser l’espace et créer une harmonie entre différentes zones de composition ». 7
Quant à Aarron Walter, il évoque la capacité de notre cerveau à percevoir dans la proportion, une présence humaine qui nous pousse à la trouver belle. Le nombre d’or est alors « une division mathématique des proportions très répandue dans la nature, y compris dans la forme humaine. Nous utilisons ce concept depuis des milliers d’années pour créer des œuvres d’art, des bâtiments et des designs qui sont universellement perçus comme étant beaux ». 8 Il confirme son utilisation dans le domaine du webdesign en prenant pour exemple le design de l’interface web de Twitter, conçu selon la méthode du nombre d’or pour « le rendre beau à l’œil humain ».
Comme vous l’aurez compris, la création n’est pas toujours synonyme de hasard, où la seule donnée est l’œil du créatif, mais doit souvent faire appel à des règles pour être perçue de manière agréable par l’utilisateur.
Design web, tout n’est pas permis !
Si création rime avec liberté d’expression, les créatifs ne sont pas pour autant libres de faire tout ce qu’ils veulent. En effet, comme l’évoque très justement Jason Tselentis : « les gens sont habitués à naviguer sur le web d’une façon déterminée, en suivant des codes et des règles qui ont été développées au fil des ans ». 9
Nous connaissons tous les grands standards du web, qui nous permettent de nous repérer rapidement lors de nos navigations, tels que le logo en haut à gauche, l’icône du panier en haut à droite et la présence du menu entre ces deux éléments.
Comme nous avons pu l’évoquer dans un précédent article, l’utilisateur n’a pas de temps à consacrer à la recherche d’informations, il veut trouver ce qu’il cherche tout de suite. Ainsi, pour ne pas prendre de risques, 80% des sites web sont ainsi conçus selon les différents standards établis. 10
Si ces conventions n’interdisent pas pour autant aux webdesigners de sortir des codes et d’être plus inventifs, cela reste un risque, comme le cite J. Tselentis : « les interfaces qui n’utilisent pas ces conventions largement répandues tendent à rendre la navigation plus laborieuse. […] À de rares exceptions près, cela débouche presque systématiquement sur des résultats décevants. » 11
On peut en effet voir émerger des sites web aux structures plus originales avec des menus sous la forme de burgers en haut à droite et même à gauche, des menus présentés horizontalement sur le côté ou encore des pages d’accueil dépourvues de menu, qui finit tout de même par apparaître au moment du scroll 12, permettant de laisser toute la place à une illustration ou animation.
images issues du site Webdesign trends
Ainsi, s’il on souhaite s’éloigner des conventions, il est indispensable de connaître parfaitement la cible et d’être en accord avec l’image des marques pour ne pas dérouter l’internaute et obtenir le résultat contraire à celui espéré. Sortir des codes, reste néanmoins le meilleur moyen de se démarquer, il faut juste savoir doser et garder l’utilisateur en tête !
Avec le web, tout est plus simple ? Pas si sûr !
Si tout parait possible depuis le web, cette interface peut aussi devenir un véritable casse-tête pour les créatifs. Le web a en effet ses caractéristiques, ses limites et ses contraintes qui vont influencer notre manière de créer.
La première spécificité de la création sur le web est la multitude de supports possibles. Avec l’apparition des téléphones mobiles et des tablettes, les créatifs ont dû s’adapter à des formats différents. En effet, l’apparence d’un site web ne sera pas la même sur un ordinateur, sur une tablette et peut même varier en fonction des modèles de téléphones. Le travail du webdesigner a alors été démultiplié avec l’apparition du responsive design.
Comme nous avons pu l’étudier précédemment, la notion d’équilibre est primordiale et c’est pourquoi elle constitue à elle seule une véritable contrainte lors de la création sur le web. En effet, selon J. Tselentis : « même si le designer parvient à atteindre cet instant d’équilibre créatif, le simple changement de dimensions ou de proportions d’un écran à l’autre peut ruiner son travail ». 13
Il confirme également l’une des principales difficultés qui reste la capacité d’adaptation des sites web aux différents écrans mais aussi aux navigateurs et systèmes d’exploitation.
Comme l’affirme Benjamin Ben Kemoun : « Le web nous limite dans nos créations. Les contenus doivent être visibles par tous peu importe les plateformes utilisées, les navigateurs, les interfaces ». Il donne l’exemple de MailChimp, une plateforme spécialisée dans l’envoi de newsletters qui limite le choix des typographies dans le but de les rendre visibles par tous.
Une fois ces contraintes techniques mises de côté, le webdesigner est confronté à une donnée dont il n’est pas maître : le goût de l’utilisateur ! C’est en effet ce qu’affirme J. Tselentis : « bien entendu, rien de tout cela ne prend en compte les besoins et les goûts des usagers ». 14
Enfin si on peut citer une ultime contrainte du web, elle serait la suivante : « l’avantage et l’inconvénient du monde numérique, c’est qu’il est dynamique et transitoire. Les attentes des consommateurs vis-à-vis des marques suivent la même tendance. » 15 issue du livre « Design graphique pour écrans ».
En effet, si on ne peut pas prévoir avec exactitude les goûts des consommateurs, il faut être attentif et réactif pour évoluer avec eux. Benjamin Ben Kemoun, confirme cet aspect du web où tout évolue très rapidement, tant au niveau des plateformes, des tendances que des langages.
Maintenant que le design web n’a plus (ou presque) de secrets pour vous, comparons-le à un autre support qui résiste coûte que coûte au web : le print !
Création Web VS Print
Le terme de graphisme peut être évoqué pour de nombreux supports mais les méthodes de création varient d’un support à l’autre. Commençons tout d’abord par une grande différence : le mode colorimétrique. Pour un support destiné à l’impression, on utilisera le mode quadrichromique CMJN, un mélange de Cyan, Magenta, Jaune et Noir mais on pourra également utiliser le mode Pantone, un système de référence mondial répertoriant plus de 1000 couleurs.
Mais alors quelle est la différence entre le mode CMJN et le Pantone ? Comme l’explique le site Deligraph : « Contrairement à la quadrichromie, qui est un mélange optique de la couleur, le Pantone est un mélange physique de la couleur, c’est-à-dire que les encres sont mélangées par le pressier avant d’imprimer. Le système Pantone s’est donc appuyé non pas sur quatre mais sur quatorze couleurs primaires. » 16
Pour un affichage sur le web, on utilisera le mode RVB abréviation de Rouge, Vert et Bleu et contrairement à ce que l’on pourrait penser, le mode RVB est celui proposant le plus de possibilités de couleurs, comme l’affirme CEVAGRAPH imprimerie. 17
C’est alors un véritable défi pour les graphistes de trouver des équivalences pour obtenir les couleurs les plus fidèles possibles peu importe le support utilisé.
En effet, des couleurs selon le mode CMJN ou CMYK en anglais, apparaitront plus ternes et moins brillantes, ne pouvant pas bénéficier d’un éclairage comme sur un écran, utilisant le mode colorimétrique RVB ou RGB en anglais. 18
Cet aspect, fait alors l’objet de nombreux montages sur les réseaux sociaux pour montrer avec une touche d’humour la grande différence qui existe visuellement entre les différents modes. Une source de déception pour des graphistes qui passent parfois des heures à trouver LA couleur, pour au final obtenir une couleur fade à l’impression.
illustration humoristique des modes CMJN et RVB, image issue du site digital synopsis
Avant de mettre en place sa charte graphique et son identité, une marque devra alors être consciente de ces différences pour choisir des couleurs qui lui conviendront tant sur un support print que sur un support digital.
Parlons maintenant d’un élément complémentaire à la couleur et indispensable sur ces deux derniers supports : la typographie, qui connait aussi des variations. Ainsi comme l’évoque le livre « Design graphique pour écrans » : « il est important de se rappeler que, pour le Web, le corps moyen des polices est supérieur à celui utilisé pour les supports imprimés ». 19
Paradoxalement, Marine Darmochod ajoute que l’utilisation des grosses typographies, comme ça peut être le cas sur le print, n’est pas conseillée sur le web pour un confort de lecture. Il ne faudra pas non plus utiliser de visuels trop grands pour un souci d’optimisation et ainsi opter pour une résolution de 72 dpi contre 300 dpi sur le print. Les dpi qui correspondent à une unité de mesure, en français « points par pouce » soit le nombre de pixels par pouce. 20
Quand les grands esprits de rencontrent !
Le web et le print ont tout de même des similitudes, telles que l’obligation de travailler avec des tiers. Comme l’affirme Marine Darmochod, pour un support print il est « nécessaire de bien suivre la production pour ne pas avoir de mauvaises surprises une fois les supports reçus ». En tant que créatifs, il est souvent difficile de maitriser toute la chaine de la création à la production finale. J’ai moi-même pu déceler cette problématique lors d’un rendez-vous avec l’imprimerie Frazier. Un rendez-vous indispensable pour convenir de l’aspect final des créations, notamment au niveau des couleurs qui peuvent varier en fonction du papier utilisé.
Du côté du web, Benjamin Ben Kemoun affirme « l’obligation d’apprendre à travailler avec des développeurs qui ont un autre langage pour créer des choses cohérentes.» Ainsi, un bon créatif saura s’entourer des bons professionnels pour produire ensemble les meilleures compositions.
Web et Print, qui remportera la partie ?
Le web a pris une certaine avance sur le print, car comme le précise Dorian Pons, directeur artistique : « la notion d’interaction est rentrée en jeu, ce qui n’est pas le cas sur l’affiche ». Le livre « Design graphique pour écrans » évoque également cet aspect : « on trouve là une différence essentielle entre les médias en ligne et les médias imprimés traditionnels : la notion de participation ». 21
Cette notion a notamment fait son apparition avec le web 2.0, énoncé dans l’article précédent comme le début du « web social ». En permettant à ses internautes de participer et d’interagir avec l’interface, le support web a alors pris le pas sur le print, moins riche en échanges.
Le web a aussi d’autres avantages en comparaison au print, tels que la possibilité de faire et refaire à l’infini !
Comme l’affirme Jason Tselentis dans son analyse : « avec un site web, il ne semble jamais y avoir de fin car des modifications sont toujours réalisables après la mise en ligne » 22. Le print lui envie cet avantage, car personne n’est à l’abri d’une petite coquille oubliée !
Un avantage de taille qui peut tout de même se transformer en travail sans fin, pour des professionnels perfectionnistes et bouillonnant sans cesse de nouvelles idées !
Le print n’a pas dit son dernier mot !
Même si la tendance est aux médias et supports digitaux, le print possède une chose que le web n’a pas : la sensation de toucher, une tout autre forme de contact et d’expérience. On ne s’imagine alors pas le nombre de papiers possibles et de techniques pour imprimer nos contenus.
Katherine Beule, traffic manager chez Adesias m’a notamment fait part de son expérience dans le domaine de l’impression et du packaging. J’ai ainsi pu découvrir une multitude de types de papiers. On pourra alors choisir un papier à effet satiné, brillant, mat, cartonné, pailleté, à relief, gaufré, recyclé… On pourra également entendre parler de grammage, d’encapsulage, de pelliculage ou encore d’impression à la japonaise, une méthode consistant à imprimer au verso d’une page, un aplat de couleur afin de faire ressortir les couleurs au recto. Il existe bien entendu de nombreux autres savoir-faire pour obtenir des supports uniques qui n’ont rien à envier au web !
Qu’en est-il de notre mémorisation ?
Si chaque support a ses avantages, appréhende-t-on de la même manière un support print et un support web ? Notre concentration serait plus grande et la lecture plus agréable sur un support papier en comparaison avec un support web, où il est difficile d’avoir une vue d’ensemble en raison de la structure découpée des interfaces digitales.
Ainsi, lors de notre navigation sur le web, nous ne pouvons analyser qu’un écran à la fois, ce qui pourrait influencer notre expérience émotionnelle. 23
Selon Sandrine Préfaut dans son article « le papier n’a pas dit son dernier mot » publié dans Stratégies : « Le support papier stimule des zones liées à l’attention, à la rétention d’information mais aussi à la désirabilité. Le taux de mémorisation des consommateurs exposés à un message est de 39 % pour l’imprimé contre 11 % pour Internet. » 24
Sur le web, il serait alors plus compliqué pour l’utilisateur de retenir les informations affichées. Un challenge à relever pour les webdesigners pour engager émotionnellement les internautes et inscrire les marques et les contenus dans leur mémoire ! Miser sur l’expérience utilisateur est peut-être la clé !
Vous êtes maintenant un créatif averti ! Et si l’on se plaçait maintenant de l’autre côté de l’écran, en s’intéressant de plus près à l’utilisateur ?
Marie Jardin
Notes de bas de page
1 TSELENTIS, Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.51.
2 ANTHEDESIGN, qu’est-ce que le graphisme et d’où vient-il ? [En ligne] https://www.anthedesign.fr/communication-2/origine-graphisme-graphiste/ (consultée le 10 mars 2020)
3 IESA MULTIMEDIA, qu’est-ce que l’UI design ? [En ligne], https://www.iesamultimedia.fr/definition-ui-design (consultée le 10 mars 2020)
4 DIGISPEED, UI et UX design, [En ligne], https://digispeed.fr/sample-post-with-image-3/ (consultée le 10 mars 2020)
5 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.82.
6 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.78.
7 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.78.
8 AARRON Walter, Design émotionnel, Paris, 2012, Eyrolles, 109 pages, p.22.
9 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.86.
10 RESONANCE, les conventions du web, [En ligne], http://www.resonancecommunication.com/blog/les-conventions-web-comprendre-leur-utilite/ (consultée le 10 mars 2020)
11 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.34.
12 Scroll : déroulement, défilement d’une page. https://www.linternaute.fr/dictionnaire/fr/definition/scroll/
13 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.82.
14 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.15.
15 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.225.
16 DELIGRAPH, quadrichromie vs pantone, [En ligne], https://deligraph.com/imprimer-quadrichromie-vs-pantone/ (consultée le 10 mars 2020)
17 CEVAGRAPH, explication des couleurs [En ligne], https://www.cevagraf.coop/impression/explication-des-couleurs-rvb-cmjn-et-pantone/ (consultée le 10 mars 2020)
18 CEVAGRAPH, explication des couleurs [En ligne], https://www.cevagraf.coop/impression/explication-des-couleurs-rvb-cmjn-et-pantone/ (consultée le 10 mars 2020)
19 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.17.
20 SEBSAUVAGE, c’est quoi les dpi, [En ligne], https://sebsauvage.net/comprendre/dpi/index.html (consultée le 21 mars 2020)
21 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.30.
22 TSELENTIS Jason, Design graphique pour écrans, Paris, 2013, Dunod, 256 pages, p.13.
23 CMOSER, print ou web, le papier c’est mieux pour la mémoire [En ligne], http://www.cmoser-communication.fr/print-ou-web-le-papier-cest-mieux-pour-la-memoire/ (consultée le 10 mars 2020)
24 CMOSER, print ou web, le papier c’est mieux pour la mémoire [En ligne], http://www.cmoser-communication.fr/print-ou-web-le-papier-cest-mieux-pour-la-memoire/ (consultée le 10 mars 2020)