Comment créer une charte graphique pro pour un site web, en 10 points

Avoir quelques connaissances en matière de charge graphique est un point essentiel si on ne veut pas toujours dépendre de prestataires. Lorsque l’on veut créer son site internet soi-même, on peut utiliser des logiciels ‘no-code’ (des CRMs) comme Wix, WordPress, Joomla… Dans ce cas, pas besoin de connaître HTML et CSS. Néanmoins, le danger réside souvent dans :

• Un mauvais référencement naturel (SEO) : car on ne remplit pas les critères fondamentaux tels que rapidité ou balises obligatoires.
• Un site pas suffisamment « responsive design » (qui ne s’adapte pas correctement aux différents supports : tablette, smartphone, PC) : cela dépend de l’outil de création de site web. Quand on n’est pas expert, Il vaut mieux se fier au logiciel (CRM). WordPress est en général plutôt bon sur ce point.
• Une charte graphique bâclée, vieillotte, illisible …. Un aspect visuel très « amateur » : et cela, on peut le rectifier assez facilement. Même une refonte d’un site web existant est facile et permet d’améliorer votre image, votre identité.

Même sans se transformer en graphiste ou web designer, on peut suivre quelques conseils pour créer une charte sobre, mais efficace. Ce ne sera pas le site le plus original, mais cela donnera un aspect professionnel, sérieux.

Vous pouvez aussi nous contacter pour toute réalisation de site web vitrine, et voir nos autres articles sur le sujet de la création de site internet. En particulier : comment mener à bien son projet de site web.

Quels sont les éléments qui constituent une charte graphique ?

La charte graphique d’une entreprise est en général un document complet présentant de nombreux aspects et leur justification. Il y a un aspect « story-telling ». On doit être capable de dire pourquoi on a choisi telles couleurs ou tel logo. Quelles sont les valeurs derrières, ce que cela inspire, etc.

Les éléments sont :

• Logo : le fichier fourni en vectoriel, et ensuite décliné en différents formats, y compris par exemple en noir et blanc (niveaux de gris). Le prestataire qui créé le site web aura besoin de ce logo dans un fichier de bonne qualité, et sur fond transparent.
• Palette de couleur : essentielle pour la création du site web.
• Typographie (fontes). Attention, les fontes utilisées en print ne seront pas forcément judicieuses en web. Cela peut être illisible.
• Visuels de l’entreprise.

Cela peut aller plus loin en étant décliné par support (print, web, …). Pour un site web, la charte graphique peut aussi définir des couleurs par thèmes, par produits, etc.

Par exemple, le logo d’ATela Conseil est un bateau. C’est pour évoquer le fait que l’entrepreneuriat est un voyage… pas toujours facile (changement de cap, de vent, météo, matériel, se perdre, naviguer…). De nombreuses métaphores marines sont appropriées. Cela évoque aussi le capitaine, la boussole, la carte, le guide. Les couleurs sont un bleu sombre (indigo) et un jaune doré, avec un ajout de turquoise. Ce sont des couleurs qui évoquent le sérieux, la technique, mais aussi l’humain et l’écoute.

1: Quand on n’est pas webmaster : une charte graphique simple et sobre

Pour tout projet web, avant de commencer à développer les pages, on devrait toujours définir une charte graphique. Au minimum : couleurs et comment les utiliser, police de caractères. Si on n’est pas à l’aise avec cela, un premier conseil essentiel : faire simple !

Moins on est compétent dans le domaine, plus il faut épurer. Sobre peut être un choix, même lorsque c’est une nécessité !

• 2 couleurs principales, plus le blanc.
• Ou même, une seule couleur principale et un joli gris teinté (on peinture, on appelle cela déssaturé : ajouter du gris dans la couleur).
• Choisir une fonte classique, lisible, tant pis pour l’originalité.

Les 10 conseils que nous donnons ici permettent à chacun d’assurer une charte graphique convenable, propre, indépendante des goûts de chacun.

2: Choisir l’ambiance, le ton de la charte graphique

Le design et la charte d’un site web doivent refléter l’identité graphique de l’entreprise (ou du projet, de l’association…). En théorie, ce positionnement graphique a été défini en amont. Si ce n’est pas le cas, voici une petite méthode :

1. Choisir un mot qui va fixer l’ambiance, le ton, l’image que l’on souhaite donner. Le plus simple est de trouver un verbe ou un adjectif. Dans un premier temps, on peut en choisir 10, puis 5, puis n’en garder qu’un.
   • Dynamisme, confiance, sécurité, bienveillance, sérieux, …
   • Il sera important de conserver ce mot en tête pour toute la conception du site web…
2. En pensant à ce mot, cet état d’esprit, choisir une couleur en accord. Quelle couleur vous inspire ce mot ? Vous pouvez aussi vous aider de la signification des couleurs. C’est culturel, mais cela peut aider. Ne cherchez pas encore la couleur précise. Pensez « bleu », « turquoise », « rouge »… Visualisez, mais n’utilisez pas encore d’outils. Sinon, vous risquez d’être influencé par l’outil et de perdre l’idée initiale de vue.
   • Canva propose de nombreux outils : signification des couleurs en français, non détaillé. Color meanings en anglais, plus précis.
3. Une fois cette couleur choisie, vous pourrez en déduire toutes les couleurs de votre charte comme indiqué ci-dessous. Pour l’instant, ne pensez pas en terme technique ou de lisibilité. Pensez vraiment à l’ambiance, aux émotions, et à ce que le site internet doit inspirer.
4. Demandez-vous aussi si vous voulez du rond, ou du carré. Du souple, ou du rigide. Cela vous permettra de choisir votre police de caractère et le style de vos encarts (contours arrondis ou carrés).

3: Choisir les couleurs de la charte en s’appuyant sur quelques outils gratuits

Une charte graphique, une identité graphique, sont pour beaucoup basées sur des couleurs ! A ce stade, il devient nécessaire d’utiliser des outils. Canva propose (en anglais) de nombreux outils pour créer ou choisir une palette. Attention cependant :

• Pour une charte graphique épurée et facile à mettre en place, ne choisissez pas une palette à 4 couleurs différentes, c’est plus difficile à utiliser correctement et vos pages webs risquent d’être un peu « fouillis ».
• Vous pouvez vous inspirer, regarder, mais à moins de bien savoir ce que vous faites, restez pour l’instant sur une couleur principale. Utilisez par exemple :
  • La roue des couleurs de canva
  • L’outil de W3Schools : n’est pas parfait pour sélectionner une première couleur. En revanche, est bien pour donner ensuite ses déclinaisons (plus sombre, plus clair, plus gris…).
  • Cet autre sélecteur de couleur.
    • Celui-ci a ma préférence : il vaut mieux choisir une couleur en se positionnant dans la couleur « pure » (c’est-à-dire ici dans l’angle supérieur droit). Une fois cette couleur choisie et le code noté, on pourra la décliner en plus sombre, plus gris, plus clair… pour le site web.
  • L’extension (plugin) pour chrome : eyedropper permet de récupérer une couleur depuis toute page web.

En choisissant initialement une couleur pure, on facilite toutes les étapes suivantes.

4: Identité graphique : choisir une couleur dominante et une couleur secondaire

Que l’on soit en train de designer un site web, de créer une charte graphique, ou de créer une harmonie des couleurs pour une aquarelle, il y a certaines règles.

• On choisit une couleur principale.
• Et une couleur secondaire. La couleur secondaire vient appuyer la première couleur. Il ne faut pas avoir autant d’éléments colorés avec la première, qu’avec la seconde.
• En peinture, on peut choisir ces couleurs par « une teinte globalement froide » (comme le bleu) ou « une teinte globalement chaude » (comme le orange). On peut conserver aussi cette idée sur un site web. Mais les teintes chaudes sont plus difficiles à utiliser : il est plus difficile de « réussir » un site globalement rouge… que globalement bleu.

Saturation, luminosité, teinte … quelques définitions des couleurs en numérique

On trouve de nombreuses définitions, en voici quelques-unes :

• Teinte / tint / hue : pour une même couleur, plus ou moins claire (avec plus ou moins de blanc).
• Ton / tone : plus ou moins de gris (donc plus ou moins pure). En peinture on dit qu’on dé-sature une couleur en lui ajoutant du gris.
• Nuance : pour une même couleur, plus ou moins sombre (avec plus ou moins de noir)
• Clarté /shate: plus ou moins d’ombre.
• Chroma, Saturation : couleur plus ou moins « pure » (pourcentage de la couleur elle-même ou de la couleur primaire).
• Intensité : peut faire référence à la luminosité ou la saturation.

En résumé, j’utilise ici le vocabulaire suivant : éclaircir ou assombrir une couleur. La couleur sans ajout de blanc ou de noire est « pure ». Elle est dé-saturée si on ajoute du gris. C’est un test que l’on peut faire facilement sur ce sélecteur de couleur.

5: Créer une harmonie des couleurs pour sa charte graphique

Il est important de créer une harmonie des couleurs pour créer un site web esthétique visuellement. Le terme « harmonie des couleurs » ne vient pas du design web… c’est un terme utilisé en peinture. c’est comme créer et tester sa « palette » avant de peindre. Cela évite d’avoir un résultat.. criard.

Il est aussi possible de vouloir créer un site web très dynamique, acidulé, très coloré. Mais c’est plus difficile si on n’a pas une bonne maîtrise de l’utilisation des couleurs.

Utiliser la roue des couleurs

On appelle roue des couleurs, les couleurs positionnées les unes à côté des autres comme sur l’arc-en-ciel. Techniquement, ce n’est pas toujours visualisé comme une roue. Cela permet de choisir LA couleur (son tube de peinture). Avant de la décliner.

Comment utiliser les couleurs complémentaires dans une charte graphique

Une fois que l’on a une couleur principale (pure), on choisit la couleur secondaire. Le plus classique est de choisir une couleur dite complémentaire. Il existe une raison technique… mais le plus simple est de se rappeler que les couleurs « opposées » sur la roue des couleurs, sont celles qui se mettent mutuellement le mieux en valeur. Sur le cercle des couleurs de canva, on peut facilement visualiser la couleur principale et sa complémentaire.

A moins de bien maîtriser, sur un site web, mieux vaut en rester à l’une des options suivantes :

• Une couleur dominante, et sa complémentaire en couleur secondaire.
• Une couleur dominante, et du gris (ou gris légèrement teinté de la même couleur), en couleur secondaire.

6: Choisir et utiliser le mode sombre et le monde clair

Ce n’est pas une question qu’on pose classiquement en matière de charte graphique. Pourtant, ça a une grande importance. La réponse ne doit pas être en fonction de ses propres gouts, mais des clients que l’on vise. Comme sur un smartphone, on doit d’abord faire un choix. Les pages webs seront-elles :

• Écritures noires sur fond très clair;
• Écritures blanches sur fond très sombre.

Tout autre choix nuit à la lisibilité et à l’accessibilité. De plus, un cerveau ou des yeux fatigués peuvent en avoir une mauvaise « première impression ». C’est inconscient, mais le risque de quitter immédiatement le site web, est plus grand.

Il faut faire attention à ne pas confondre design graphique « print » et « web-design ». Les contrastes de couleurs qui passent bien une fois imprimées, peuvent être très fatigants à l’écran. Un écran… ça brille. Il n’y a rien de plus confortable à lire que:

• Noir sur fond blanc: blanc pur, cassé, ivoire… on peut tenter un fond extrêmement pastel, mais il devra vraiment être très pastel, avec une couleur dé-saturée (contenant un peu de gris) pour ne pas trop « briller ». Si on choisit une écriture sombre mais pas noire, ça peut passer, mais il faut tester et rester prudent.
• Blanc sur fond très sombre (noir, bleu nuit, vert sapin très sombre…). On évite les fonds véritablement vert ou rouge. Ce sont deux couleurs compliquées pour beaucoup de gens ayant des yeux fatigués.

Distinguer les titres et mettre en avant des contenus : mode sombre et clair, ça fonctionne aussi

Sur une page web comme sur un flyer, le plus simple pour aisément distinguer les titres, c’est d’inverser par rapport au « mode » que l’on a choisi pour le texte. Si l’ambiance globale est « noir sur fond blanc », alors on peut structurer le texte avec des titres « blanc sur fond sombre ».

Si l’on veut mettre un contenu en avant, on peut aussi utiliser la même technique. Pour un encart, on peut se permettre d’avoir un fond pastel comme celui de l’exemple ci-dessous. Mais ce fond serait trop sombre s’il était utilisé partout… (à la place du fond blanc).

Ci-dessous, le titre ressort nettement sur fond rose sombre : il est blanc sur fond très sombre. Et d’une couleur complémentaire à l’ambiance générale du site.

Une charte graphique de site web inclut également de se mettre d’accord sur la manière de représenter les principaux éléments d’une page web.

7: Choisir une ou deux polices de caractères

À ce stade, on a nos couleurs. On va passer à l’étape suivante : les polices de caractères. Encore un efois, sur le web, il vaut mieux faire simple. Et surtout, il faut faire lisible.

On peut choisir une police pour le texte, et une pour les titres. Mais c’est mieux si elles sont relativement similaires.

2 polices, pas plus! Et penser à la lisibilité! Le design du site web ne doit pas en venir perturber la lecture.

Ne nombreuses polices sont jolies mais… pas lisibles. Faites le test. Lisez-vous bien si c’est écrit en petit ? Lisez-vous bien s’il y a eu de contrastes entre le fond et les écritures ? Ce n’est pas uniquement la forme des lettres qui compte. C’est aussi l’écartement entre les lettres.

Choisissez ensuite ce qui vous inspire, en restant dans l’ambiance (rond, carré, …). beaucoup de CRM permettent une utilisation des fonts de google. C’est donc un bon endroit pour choisir. Et si la question ne vous inspire pas… restez simple : Arial.

Restez ensuite très cohérent. On ne change pas la police du texte en plein texte. Et sauf exception bien maîtrisée, on ne change pas la taille non plus. On définit la taille des titres, sous-titres et texte. Et on ne fait pas d’exception.

8: Vérifier l’accessibilité de la charte graphique

Il est essentiel que l’accessibilité des pages webs soit bonne. Il y a quelques critères que google vérifie. Si vous avez une bonne note pour google, alors vous avez aussi une bonne facilité de lecture. Cette note entre dans les critères pour le référencement naturel. Une mauvaise note est un signe de mauvaise qualité, qui entraîne un mauvais référencement.

9: Concevoir une mise en page classique

A moins d’être webmaster expérimenté, mieux vaut suivre les modes. Les internautes sont habitués à trouver les éléments à certains emplacements, il faut s’y tenir. Cela garantit une charte graphique utilisable à défaut d’être particulièrement originale. les internautes fuient vite un site web qu’ils jugent illisible.

Entête

Contient systématiquement : logo (ou nom), menu (pas trop d’éléments : s’il y a trop, réfléchir à une autre structure, ou utiliser des sous-menus), une phrase « slogan » qui personnalise un peu le site.

Du côté du menu, il peut être bien de ne pas diviser par « ce que je fais » ou « ce que je vends » mais « à qui je le vends » (par exemple : particuliers, entreprises. Ou écoles, parents…. Ou administrations, associations…).

Le menu est classiquement toujours en haut de page. Le plus souvent à droite, le logo étant à gauche. Cette ergonomie n’est pas meilleure qu’une autre, mais comme c’est celle qui est communément adoptée, l’internaute se repère plus vite, et donc, a plus de chance de rester sur le site.

Titres, sous-titres

Il faut structurer les pages avec des titres et des sous-titres. Les titres doivent être visuellement très différenciés et sauter aux yeux. Les sous-titres sont moins visibles, mais facilitent la lecture.

Du côté du référencement naturel, cette structuration est très importante. Les moteurs de recherche comme Google accordent beaucoup d’importance à cette structure. C’est la lecture de ces titres qui va permettre de déduire le sujet principal et si tous les aspects sont traités.

Si le CRM que vous utilisez le permet, utilisez au maximum :

• H1 pour les titres de plus haut niveau (souvent, c’est le titre de la page)
• H2 pour les autres titres principaux.
• H3 pour les sous-titres.

C’est aussi cette structure qui va faciliter l’expérience utilisateur, et donc, l’encourager à rester sur le site. On cherche ainsi à limiter le taux de rebond.

Encarts « mis en avant »

On doit imaginer un style différent pour attirer l’œil sur certains éléments : promotions, « contactez-moi »… Sur une page en mode « noir sur fond blanc », l’encart « blanc sur fond très coloré », fonctionne bien.

Pied-de-page

Le pied de page peut être d’une couleur différente et rappeler l’entête. Il contient en général le copyright, et les mentions légales. Éventuellement, les liens sur les réseaux sociaux.

10 : Créer quelques styles cohérents et s’y tenir

Si on ne s’y connaît pas bien, mieux vaut ne pas faire original. On doit définir :

• Comment on va mettre en avant des mots dans les phrases : en général, en gras de la même couleur que le texte;
• Les liens : laisser par défaut, et attention à ce que les mots mis en avant ne soient pas confondus avec les liens.
• Les blocs « mis en avant » : on peut imaginer plusieurs styles si l’on veut mettre en avant des thématiques différentes. Le plus sûr est de ne pas créer plusieurs styles différents, mais d’utiliser plusieurs couleurs différentes (mais pas trop).

C’est cette cohérence qui va donner une identité visuelle au site web. Dans l’idéal, cette identité visuelle est reprise sur tous les supports de communication, au minimum digitale. Attention néanmoins aux codes couleurs : les couleurs vues à l’écran ne sont pas celles imprimées !

Vous voilà prêts à créer votre première charte graphique pour développer votre site web ! N’oubliez pas : restez simples ! Vous pouvez aussi nous contacter pour toute réalisation de site web vitrine, et voir nos autres articles sur le sujet de la création de site internet. En particulier : comment mener à bien son projet de site web. Agence située sur Orléans.