charte graphique site web cover

Quiconque a déjà dû développer un projet sait ce qu’est une charte graphique. Que ce soit une société, une association ou une une campagne présidentielle, tous ont besoin d’une identité visuelle. Pour résumer, c’est un ensemble de règles graphiques (visuels, couleurs, typographies) qui vont permettre d’identifier un projet sur différents supports. Avec le logo comme élément de base, la charte graphique va permettre de véhiculer l’identité visuelle du projet.
C’est ainsi que la carte de visite, le papier à lettre ou le catalogue d’une marque semblent bien faire partie d’un même univers, se rapporter à la même entreprise.Un site Web a lui aussi une charte graphique. Elle va permettre de rendre l’ensemble de ses pages cohérent. Et lorsqu’il s’agit de la charte graphique d’un site Web, il convient de faire particulièrement attention à quelques points particuliers.

La typographie, pierre angulaire de l’image de votre site

Un site web, c’est 95% de texte

On a tendance à l’oublier, mais l’essentiel du contenu d’un site web est constitué de texte. Bien sûr, il est agrémenté de quelques images, parfois de vidéos, mais l’essentiel de l’information est lue. Une règle a suivre pour le référencement est d’ailleurs d’écrire des articles au minimum de 300 mots, sans quoi Google ne considère pas le contenu comme amenant une véritable information à l’utilisateur. En outre, si le texte ne pèse pas lourd en terme de chargement, les images et les vidéos sont elles bien plus problématiques. Il faut s’assurer qu’elle pourront s’afficher sur tout type de machines (mobile ou fixe), qu’elles ne feront pas attendre trop longtemps avant de s’afficher… Pour pallier à ces éventuels problèmes, on attribue aux contenus image des descriptions alternatives. Comme ça, si l’image ne s’affiche pas, on affiche…du texte. Il convient donc de soigner particulièrement la typographie.

Le choix de la typographie, un choix pas anodin

Comme le montre cet article paru récemment sur Medium (en anglais), la typographie choisie pour votre site renverra une image différente en fonction de l’objectif de votre site. En résumé, il compare 4 polices classiques et relève le ressenti des utilisateurs quand ils les voient sur 4 sites différents. Un site bancaire, de news, d’application de fitness et une boutique en ligne. On apprend que Baskerville a l’air digne de confiance sur le site de news mais plus du tout sur celui de l’application de fitness. De même, Helvetica est ressentie comme facile à utiliser pour la boutique alors qu’on lui préfère Fira pour l’application de fitness. Moralité: il n’y a pas une police à utiliser pour votre site. Il y en a plusieurs qui peuvent fonctionner, et d’autres qu’il faut éviter. Et ce choix ne dépend pas de l’esthétique, mais des objectifs de votre site

charte graphique site web influence policeL’article de Medium montre à quel point le choix d’une police peut changer pas mal de chose…

Le choix d’une police n’a rien à voir avec l’esthétique (ou presque)

Comme le point précédent l’introduit, ce n’est pas l’esthétique d’une police qui décidera — ou pas — de son utilisation. En réalité, il existe plusieurs grandes familles de polices d’écriture qui correspondent à de grandes périodes historiques. Chacune de ses familles a ses propres particularités, correspondant à des contraintes techniques par exemple, et qui vont inconsciemment transmettre certaines valeurs au lecteur. Aussi, le choix d’une police d’écriture doit se faire en conscience. Il est indispensable d’observer les habitudes de votre marché (vos concurrents, vos fournisseurs…) pour déceler les points communs et d’éventuelles règles. Il est fort à parier qu’ils ne sont pas le fait du hasard. L’Histoire d’une typo, par exemple, lui donne souvent un sens. Si le sujet vous intéresse, je vous invite à regarder les courts épisodes de Safari Typo. Vous comprendrez mieux comment l’Histoire peut influencer des polices et le ressenti qu’elles provoquent…

charte graphique site web safari typoLe premier épisode de Safari Typo nous emmène (re)découvrir Paris avec un guide de choix, Jean-François Porchez

L’utilisation des couleurs: attention danger

Le Web a ses codes couleurs

Deuxième volet de la charte graphique d’un site Web (et non des moindres), les couleurs. La vigilance est de mise car le Web impose certaines règles intrinsèques. Par exemple, le vert a une fonction de validation quand le rouge évoque l’erreur. Si vous remplissez un formulaire et cliquez sur “Envoyer”, de quelle couleur imaginez-vous le message indiquant que le message est bien envoyé ? Vert, n’est-ce pas ? Et le champ que vous avez oublié de remplir, en quelle couleur apparaît-il ?
Vous allez être amené à choisir ce qu’on appelle une couleur de contraste (au minimum). Cette seconde couleur permettra par exemple d’illustrer les interactions. Le menu est en bleu, mais quand on passe la souris sur une rubrique ? Pour indiquer à l’utilisateur qu’il se passe quelque chose, il va falloir faire changer ce titre de rubrique de couleur. Ou au moins différencier le menu actif des inactifs…

design site web illu 3 charte graphique site web couleurL’une de ces deux options vous semble plus pertinente, j’imagine ?

Le contraste et les écrans

En terme d’écran, comme en beaucoup de choses, nous ne sommes pas tous égaux. Pour l’anecdote, je travaille actuellement à la réalisation d’un site Web de formation qui sera principalement utilisé sur le continent africain. Autant vous dire que les palettes que j’utilise au quotidien tienne compte d’une palette de couleur différente de celle qu’un écran retina peut afficher
Sans aller jusqu’à changer de continent, j’ai travaillé il y a peu de temps avec une brillante startup lyonnaise (coucou Ma Petite Etagere !). La couleur favorite de la créatrice de l’univers couleur est un orange assez pastel, que j’ai donc utilisé pour certains titres. Bien que je trouvais le contraste léger, je pensais que, comme disent les jeunes, “ça passait”. Pourtant, arrivée en phase de développement, la maquette n’a pas passé le test de l’écran non retina… Les titres étaient tout simplement invisibles. Même pas ILlisibles, mais bien INvisibles.

charte graphique site web constrasteDe gauche à droite, du moins lisible au plus lisible… Il se peut même que vous ne voyiez rien à gauche sur votre écran. Pourtant, c’est écrit en orange sur blanc (vérifiez sur votre smartphone !).

Le contraste et les utilisateurs

Et ce n’est pas le seul problème à prendre en compte. En terme d’accessibilité, le contraste a un grand impact. La population compte par exemple une proportion non négligeable de personnes souffrant de daltonisme. D’après Wikipédia, qui sait décidément beaucoup de choses, 8% des hommes et 0,45% des femmes sont touchés en France. Et ne pas en tenir compte au moment de mélanger certaines couleurs les empêcheront purement et simplement de profiter de votre contenu.
Premier cas: si les liens contenus sur votre page sont “visibles” grâce une différence de couleur, ces utilisateurs ne verront pas qu’ils peuvent suivre ces liens. Encore pire, certains sites conseillent d’interagir avec des éléments d’une certaine couleur. Si l’utilisateur ne voit pas cette couleur, il ne pourra pas profiter de l’expérience. Je vous conseille cet article d’alsacreations si vous souhaitez creuser le sujet.

L’imagerie de votre site, un point (qu’on) critique

Votre logo, la base de votre image

Je ne vais pas faire ici la démonstration de l’utilité, de l’impact ou l’absolue nécessité de soigner son logo. En revanche, n’hésitez pas à consulter l’ensemble des articles sur la création de logo, si d’aventure cela vous intéressait. En résumé, votre logo va vous aider à vous positionner dans votre marché, identifier votre marque et vous aider à transmettre certaines valeurs. Si votre logo n’est pas en accord avec votre marché et vos valeurs, la base de la charte graphique du site web part mal.
En outre, sur un site web, le logo est souvent affiché dans des tailles réduites. En effet, plus de la moitié des consultations de pages web ont lieu sur mobile.  Aussi, il est fréquent que les logos existent sous différentes versions.

charte graphique site web logo adaptableLe logo de la marque Identidée, que j’ai réalisé en 2015, a par exemple 3 variantes. En effet, le logo de base a trop de détails pour être lisible en favicon…

Les banques d’images ont la vie dure

Qu’est-ce qu’une banque d’image ? C’est un service qui permet “d’acheter” les droits d’utilisation de milliers de photos, d’illustrations… Et même désormais de vidéos à des sommes dérisoires. Sauf que ces sommes sont tellement faibles, que pour en (sur)vivre, ceux qui fournissent le contenu de ces banques doivent miser sur la quantité, quite à négliger la qualité. Résultat: les images sont standardisées, c’est le moins qu’on puisse dire. Aussi, utiliser ce genre d’image risque de nuire à la vôtre…
En outre, s’offrir les services d’un photographe ou d’un vidéaste, en plus de vous fournir un contenu original et sur-mesure, sera l’occasion de vous interroger sur votre image. Sur ce que vous voulez transmettre, sur ce que vous voulez mettre en scène… Les moindres détails seront l’occasion de vous poser une question sur votre société, votre marque, votre campagne politique…

charte graphique site web banques d'imagesJe vous conseille l’excellent Tumbr “Dans la vie libre de droits” qui met en avant certaines de leurs “anomalies” 

Le Web a ses symboles, son langage visuel

Dire que l’offre de contenu est pléthorique sur le Web serait enfoncer des portes tellement ouvertes qu’on sent le courant d’air jusqu’ici. Aussi, l’utilisateur est capable, en une fraction de secondes de se faire un avis sur la page qu’il vient d’ouvrir. Et de savoir s’il va rester sur ce site, ou pas. Il a une grille d’analyse. On y trouve par exemple les pop ups qui vont s’ouvrir, leur nombre, leur genre (suivez mon regard)… Il va également chercher à être rassuré, à retrouver ce qu’il a l’habitude de voir. Certains symboles, par exemple, sont à utiliser pour atteindre ce but. Le cadenas pour indiquer qu’une transaction est sécurisée, par exemple. Les boutons ont certaines formes, rarement des triangles…
Ces règles graphiques intrinsèques aident l’utilisateur à utiliser votre site web et à se sentir à l’aise et en confiance.

Pour conclure, la charte graphique d’un site web a donc besoin de respecter 3 règles essentielles. Une typographie soignée, un choix de couleurs réfléchi et une imagerie qui servent vraiment votre image. Sans cela, vous risquez de pénaliser le fond. La forme demande donc un peu de travail et de préparation.
Néanmoins, je reconnais qu’il n’est pas toujours évident d’imaginer ce que peuvent impliquer de mauvais choix. Ou pire, une absence de choix. Aussi, mon premier conseil serait d’éviter toute forme d’originalité extrême. Surtout si “l’originalité” est le seul argument en sa faveur… Mon second conseil tient du bon sens: demandez de l’aide. Freelance, agences, articles de blogs, le Web fourmille de ressources pour éviter des erreurs qui peuvent avoir de réelles conséquence sur votre image. Et bientôt sur votre chiffre d’affaire.

Si vous souhaitez aller plus loin, n’hésitez pas à consulter cet article qui développe les enjeux se cachant derrière le design d’un site web. Attention, ne vous attendez pas à trouver la recette d’un site web design, vous seriez déçu !