Conception de site : préparez votre charte graphique

La conception de son site Internet passe par la préparation de son design. C’est l’étape 2 après la définition de son objectif et de sa cible. Pas de site Internet sans logo. Et plus globalement on s’appuie sur la charte graphique pour construire l’univers visuel du site.

C’est donc l’occasion de faire un point sur la charte graphique : qu’est-ce que c’est ? Que faut-il prévoir ? Pourquoi c’est utile ?

Laurence Fajner, facilitatrice en communication, nous apporte conseils et lumières pour préparer au mieux ces éléments graphiques.

La charte graphique ou le brand book, c’est quoi exactement ?

L.F. : La charte graphique regroupe plusieurs éléments tels que :

• Le logo
• La police
• La baseline ou le slogan
• Le nuancier
• Les photographies
• Les illustrations et les iconographies

On peut même parfois y trouver les valeurs et la mission de l’entreprise.

Il s’agit d’un document de travail qui contient l’ensemble des règles fondamentales d’utilisation des signes graphiques qui constituent l’identité graphique d’une entreprise, d’un projet, d’une organisation.

Mettre en place une charte graphique dès le démarrage de l’entreprise, c’est donner une cohérence visuelle à l’ensemble de ces supports et actions de communication.

L’astuce de 2CA Web
Utiliser une cohérence graphique sur tous ses supports permet d’être reconnu d’un coup d’œil. Et c’est comme la pub à la télé : la répétition ancre la marque dans la mémoire du prospect.

Ça veut dire quoi tous ses supports ? Son site, sur ses visuels d’articles, sur ses réseaux sociaux, sur ses documents clients comme les devis, factures, rapports, supports de formation…

Le bonus, c’est qu’on y gagne un temps fou. Pas de grande réflexion pour préparer un nouveau visuel : on a déjà les codes couleurs, la typo, le style d’image… On peut se concentrer sur le contenu !

Le logo et ses déclinaisons

L.F. : Le logo est un graphisme qui représente une marque ou une société, il est un symbole. Le logo est aussi un moyen d’identification et de communication indispensable à toute entreprise. C’est enfin un élément de la communication visuelle moderne très important qui permet de se démarquer de la concurrence.

Dans la charte, on trouvera le logo et toutes les règles qui le concerne :

• ses versions (couleurs -utilisation primaire et secondaire- noir et blanc)
• sa position dans la page sur tous les supports (papier à en-tête, documents officiels, plaquettes, dossier et chemises, camion, etc.)
• la zone d’exclusion (espace protégé minimum autour du logo)
• ses déclinaisons sur des fonds blancs et de couleurs
• les interdits (par exemple, l’interdiction d’apposer le logo sur un fond noir, de redimensionner le logo sans garder un rapport d’homothétie…)

C’est d’ailleurs ce même logo qui permettra de concevoir le favicon lors de la création du site web. Le favicon vient se placer devant les adresses des sites enregistrés en favoris dans la fenêtre favoris des navigateurs. 

L’astuce de 2CA Web
Bien penser à avoir une version du logo pour les fonds colorés ou sombres. C’est le cas bien souvent du pied de page des sites. Le logo doit alors être en format .png avec un fond transparent.

Le favicon est une déclinaison du logo en version simplifiée : il faut qu’il soit lisible pour un format minuscule.

Les polices de caractères

L.F. : On trouve les polices de caractères et leurs différentes fontes utilisées dans les documents afin de permettre de créer différents niveaux de textes et d’apporter un bon confort de lecture.
La typographie est l’une des composantes essentielles de l’univers graphique d’une entreprise pour sa reconnaissance.

Quelques conseils

• Certains caractères amènent un côté masculin, sérieux ou démontrent le prestige ou le modernisme.
• D’autres proposent un style plus artistique, technologique ou fantaisiste.
• Un caractère gras rend l’idée de force, de solidité.
• Des lettres italiques suggèrent le dynamisme, le mouvement.
• Un caractère maigre apporte une touche féminine et est recommandé pour exprimer la distinction et la délicatesse.

Pensez qu’une police qui nous plait n’est peut-être pas forcément adaptée à notre image, notre cible, notre message.

L’astuce de 2CA Web
Les polices personnalisées ont l’avantage de donner une vraie identité à la marque. En revanche, on ne pourra pas l’utiliser sur tous les logiciels comme Canva (qui permet de créer des visuels rapidement) par exemple. Et il faudra intégrer cette police sur son site : prévoir le temps ou le budget.

Les polices de caractères de Google sont plus communes, c’est vrai. Mais elles ont l’avantage d’être facile à utiliser dans les sites Web et se chargent rapidement : un bon point pour un site éco-responsable.

Quelques sites ressources :
https://fonts.google.com/ pour voir toutes les polices de caractère de Google
https://fontpair.co/ pour trouver des paires assorties

Le nuancier

L.F. : On y trouvera les jeux de couleurs déclinables sur les différents supports de communication avec les valeurs Pantone, CMJN (CMYK en anglais), RVB (RGB en anglais) et hexadécimale de chaque couleur.

Le spectre colorimétrique CMJN (cyan, magenta, jaune, noir) est un procédé d’imprimerie. Il est utilisé pour les logos, cartes de visite, articles de papeterie, illustrations, en packaging ainsi que tout autre design imprimable.

Les spectres RVB (rouge, vert, bleu), ou RGB en anglais, et HEX sont quant à eux utilisés pour tous les designs digitaux, y compris pour les sites internet, applications mobile, les bannières publicitaires et tout autre design destiné à un environnement digital.

Prenons le temps de bien choisir ces couleur car chacune a une signification cachée et exerce ses influences à un niveau inconscient.

Couleurs et significations

• Jaune : gaieté, créativité, optimisme
• Orange : l’énergie, l’action, dynamisme
• Rouge : amour, sensualité, passion
• Violet : délicatesse, imaginaire, spiritualité, prospérité, solitude
• Vert : calme, détente, croissance, nature, chance, espérance
• Bleu : confiance, fraîcheur, fidélité

Pour vous aider dans votre réflexion, cliquez sur ce lien pour créer votre nuancier : https://colorate.azurewebsites.net

L’astuce de 2CA Web
Pour un site éco-responsable, prévoir un design qui restera actuel le plus longtemps possible pour ne pas refaire le design du site trop souvent. Peut-être un style intemporel et épuré. Ce sera aussi plus rapide à mettre en place !

Autre écueil à éviter : la couleur du texte doit être suffisamment contrasté par rapport au fond. C’est indispensable pour l’accessibilité et aussi pour le confort de lecture de vos visiteurs.

Et pensez bien à noter vos couleurs en hexadécimal : c’est le format des couleurs dans le Web. Pour les convertir, passez par ce site : https://www.colorhexa.com

Les illustrations et iconographies

L.F. : L’utilisation d’éléments graphiques tels que filigranes, courbes, pictogrammes, iconographie et traits spécifiques à l’entreprise pourra être également formalisée.

Pour les iconographies, je vous conseille un super site. Seul bémol, il vous faudra renseigner les mots clés de recherche en anglais : https://thenounproject.com/

Les photographies

L.F. : Inclure une sélection de photographies représentatives de votre marque.
L’objectif est de définir les critères d’une photographie qui communique efficacement l’image de marque de votre entreprise ou de votre organisation : le style de compositions, les palettes de couleur présentes, les spécifications techniques des images…

Je vous encourage à aller faire un tour sur ce lien qui regroupe plus d’une cinquantaine de site de photos gratuites et libres de droit : https://www.shopify.fr/blog/47729285-les-22-meilleures-banques-d-images-gratuites-et-libres-de-droits

D’ailleurs, j’en profite pour vous rappeler l’importance de toutes les photos utilisées et conseille fortement de passer par un professionnel en ce qui concerne vos photos personnelles. En tant que dirigeant, vous devez vous « marketer ». De nombreux photographes proposent des formules avec des tarifs différenciés. Beaucoup de professionnels ont des comptes Instagram. Mon coup de cœur 2020, celui de Daniela : http://www.instagram.com/daniela.thurissey.photography

L’astuce de 2CA Web
Trouvez le photographe avec lequel vous vous sentirez bien ! Chacun a sa pâte, sa spécificité. Observez leurs photos, en particulier celles qui mettent en scène des entrepreneurs, des équipes, ou des entreprises de votre secteur. Quelle atmosphère s’en dégage ? Sentez-vous une synergie avec le photographe ?

Quand j’ai vu les photos de Stéphanie Bobault de Bulles de Joie Photographie, j’ai su que j’avais trouvé la photographe que je cherchais. Et elle a eu l’art de me mettre à l’aise ! Ces photos ont eu naturellement de l’impact par leur authenticité.

Quelques astuces pour s’y retrouver

L.F. : Quel que soit le canal de communication sur lequel on travaille, veiller à toujours être en harmonie et lisible : ne pas utiliser trop de couleurs (2/3 max), trop de polices (2/3 max) et y aller avec parcimonie sur les gras, soulignés ou italiques.

Avec tous ces éléments vous êtes fin prêt à vous lancer dans la création de votre site mais n’hésitez pas à faire relire par plusieurs personnes votre contenu… Les fautes d’orthographe et les répétitions renvoient un signe de manque de professionnalisme.

Enfin, la durée de vie d’un logo ou d’une charte globale est entre 5 et 10 ans, et cela peut être bien plus court si on sélectionne des tendances graphiques à la mode.

Si vous identifiez un partenaire pour vous accompagner dans votre communication, pensez surtout moyen et long terme. Une action one shot vous permettra de vous démarquer mais ne perdurera pas dans le temps et une fois de plus, la communication est avant tout histoire de cohésion.

Quels conseils pour concevoir l’univers visuel de son site Internet ?

L.F. : L’essentiel est de bien définir vos objectifs au démarrage :

• De quoi ai-je besoin concrètement ?
• Quel budget je peux accorder à ce centre de coût ?
• Quels éléments sont essentiels ?
• Quels canaux utilisés ?
• Quel budget prioriser ?

Toujours garder en tête que votre univers visuel permettra de mieux vendre vos produits ou vos services.

Enfin, il est important de se sentir totalement à l’aise avec la personne qui s’occupera de votre communication et surtout qui saura vous la faire apprécier.

L’astuce de 2CA Web
Ce n’est pas toujours facile de préparer cette charte graphique au lancement de son activité. C’est difficile de se définir, de trouver sa spécificité, son positionnement, son ADN.

Il se peut aussi que votre activité évolue, une fois que vous aurez testé votre offre.

Vous aurez peut-être aussi besoin de temps pour comprendre là vous êtes à l’aise pour communiquer. Être à l’aise, c’est le B. A. BA pour être authentique et impactant.

Alors, pour votre logo, faites appel à un graphiste. C’est un investissement quasi obligatoire pour un résultat professionnel. Et si possible offrez-vous une prestation de conseil en communication pour avoir les bases de vos visuels : cela vous fera gagner du temps incroyable. Puis refaites un travail approfondi quand vous serez clairement positionné.

Qui est notre experte du jour ?

L.F. : Je suis Laurence Fajner et j’ai créé Ressourc’Up en 2019. Forte de mon expérience de près de 20 ans au sein de grandes entreprises, je rends accessible les prestations de communication tant d’un point de vue financier que stratégique.

J’ai volontairement orienté mon offre sur les professionnels de petite taille pour satisfaire 2 de mes péchés mignons : travailler en proximité et faire du sur-mesure.

Aujourd’hui, je travaille sur plusieurs secteurs d’activité et une typologie de clients large : des coachs (santé, orientation professionnelle/scolaire, entreprise), des commerçants, des start-up, des indépendants.

Rentrer dans l’univers de chacun de mes clients puis créer, imaginer et les accompagner généreusement est pour moi une source de satisfaction permanente.

Mes clients ont souvent l’idée du business, de sa technicité, de la démarche commerciale mais le pan communication est souvent à la traîne par manque de connaissance, de temps, d’appétence.

Pourtant, rappelons que 25% du temps du dirigeant sont généralement consacrés à la communication sous toutes ses formes. Alors autant communiquer sur de bonnes bases.

Pour contacter Laurence :

06 66 74 77 83 |Instagram

Conclusion

Merci Laurence pour tous ces précieux conseils !

Préparer en amont sa charte graphique

• fait gagner du temps
• augmente sa légitimité
• permet de concevoir son site Web avec un univers homogène
• augmente le pouvoir de sa visibilité

Bien préparer la conception de son site Internet c’est aussi structurer son site, réfléchir à ses fonctionnalités, prévoir ses contenus et ses besoins en visibilité et anticiper le degré d’autonomie souhaité.

Anticiper, c’est investir mieux ! Une bonne conception de site est la clé pour un site qui vous plaise, utile et qui dure. Pour gagner temps et efficacité, vous pouvez vous faire accompagner sur cette conception de votre site.

Pour continuer votre lecture :

• les 8 étapes pour concrétiser ses attentes
• Est-ce une bonne idée de faire soi-même son site Internet ?
• Quel est le type de professionnels qui créent des sites adapté à votre projet ?
• Le dossier complet sur la conception de site