Partager

Retour

Charte graphique site web : conseils pour la créer

webdesign 2021|

Toute création de site web passe par une charte graphique cohérente et puissante. Elle s’intègre dans l’identité visuelle de votre entreprise, soit toute une série de règles qui régissent l’utilisation des couleurs, des logos, des polices, etc. Non seulement l’application de ces conventions doit être homogène sur votre site internet. Mais aussi à travers tous vos supports, physiques ou électroniques. Que définit la charte graphique d’un site web, comment en créer une, comment la choisir ? Welko, votre agence de communication à Angers, vous révèle tous ces secrets.

La charte graphique va au-delà du site web

Avant de parler lignes directrices et exemples, commençons par un point important. À savoir qu’une identité visuelle forte est le dénominateur commun des grands noms que nous connaissons. Des marques comme Apple, McDonald’s ou Starbucks axent leur marketing sur une charte graphique solide, et sur la cohérence de leur communication.

Bien entendu, ces géants disposent d’un important budget de marketing. Cependant, investir dans une charte graphique pour votre site web et votre communication en général est important à tout niveau. La création de logo est un premier pas, mais il faut aller plus loin.

Qu’est-ce qu’une charte graphique ? Définition

La charte graphique définit l’identité visuelle de votre marque en spécifiant les éléments graphiques qui la composent (logo, polices, couleurs, etc.). Elle est utilisée dans tous vos supports de communication, qu’ils soient papier (cartes de visite, affiches, etc.), physiques (vitrine, enseigne) ou électroniques (emails, site internet, réseaux sociaux).

charte graphique web angers

Comment créer une charte graphique pour un site web

La charte graphique est réalisée par un expert, le plus souvent un graphiste ou un web designer, sur les instructions ou non d’un directeur artistique qui traduira des concepts en éléments visuels. Le travail de création d’une charte graphique pour site web commence par des discussions orientées autour de l’identité de votre marque. Quelles sont les valeurs de votre entreprise ? Quelle est sa philosophie ? Quelle image voulez-vous projeter ? Quelle est votre cible ? En cas de charte graphique existante, le site web peut être construit sur base de celle-ci. Une refonte de la charte graphique est possible afin de la moderniser, ou des éléments spécifiques web (boutons, menus, etc.) peuvent être ajoutés. Pour réaliser une bonne charte graphique, il est important de saisir l’essence d’une entreprise. Outre un cahier des charges, vous pourrez fournir tous documents PDF utiles à cette fin (plaquettes, prospectus, etc.). Nous réalisons également la refonte de votre site internet en accord avec votre charte graphique.

Que définit la charte graphique d’un site web ? Les éléments importants

La charte inclut notamment les éléments suivants :

À partir de ce document, votre identité visuelle pourra être adaptée et utilisée sur vos supports de communication (site internet, publicités, catalogues, cartes de visite, etc.). Est-il possible de trouver une charte graphique pour site web gratuite ? Oui, mais elle ne sera pas dotée des éléments de personnalisation indispensables pour la rendre efficace.

Couleurs

Une charte graphique pour site web fournit la présentation des couleurs de la marque sous forme de palettes. Elles sont définies pour les tous supports, papier et web. Parfois, des palettes claire et sombre peuvent être créées. Voici la signification des couleurs les plus courantes.

Le bleu sera le plus souvent utilisé pour promouvoir :

Le bleu a le grand avantage d’inspirer confiance, c’est une couleur rassurante. Cela peut expliquer pourquoi Facebook, Twitter ou PayPal l’utilisent, par exemple. Ces sites utilisant des données personnelles, ils doivent inspirer confiance au grand public !

Le rouge est une couleur qui accroche le regard. En web design, c’est donc une couleur qui est utilisée pour les promotions ou les boutons d’appel à l’action (CTA). Pour les marques, elle est excellente pour attirer l’attention. C’est pourquoi, entre autres, nous l’avons choisie chez Welko !

Pour construire votre identité de marque, le jaune évoque la joie et les loisirs. Si vous travaillez dans le secteur de l’enfance, de l’éducation ou des loisirs, cette couleur sera parfaite ! Le jaune peut également être utilisé pour l’alimentaire.

Enfin, le vert est une option intéressante pour évoquer la stabilité ou la croissance d’une entreprise. Bien sûr, c’est aussi une couleur qui est associée à la protection de l’environnement, au bien-être, à l’écologie et à la relaxation. Le vert foncé, en revanche, est plutôt une couleur choisie dans le domaine financier.

À noter que la couleur n’est pas perçue de la même manière par tout le monde. Il ne s’agit donc que l’une des méthodes pour bâtir votre identité visuelle.

Polices

La typographie rassemble les polices de caractères qui seront utilisées de votre marque. Vous pouvez en avoir un ou plusieurs. Chaque police est présentée en style normal, italique, gras… La typographie a également un rôle important à jouer dans la construction de votre identité de marque ! Il est important d’utiliser une typographie qui reflète votre entreprise et le message que vous souhaitez faire passer à travers votre communication. Pour les professions libérales et la finance, on choisit des choses très sobres comme le Times New Roman, par exemple.

Certaines marques embauchent des designers pour créer une police de caractères personnalisée unique. C’est un choix judicieux, car il rendra votre marque encore plus identifiable ! Néanmoins, il est certain que cela représente un budget important pour une PME. Dans ce cas, Google Font est une véritable mine d’or pour dénicher la perle rare ! De nouvelles polices sont ajoutées presque quotidiennement. Le choix est donc pléthorique.

Voici quelques exemples de polices intéressantes, selon le ton souhaité :

Pour un style féminin :

Pour quelque chose de masculin :

Une typographie enfantine :

Polices plus classiques :

Mise en page via la charte graphique site internet

Le code HTML, via le CSS, permet d’organiser le contenu en paragraphes, titres, listes… Pour tous ces éléments, il faut déterminer la largeur et la hauteur des marges, la distance des interlignes, la taille de la police de chaque élément. La charte graphique site web spécifie également d’autres éléments HTML tels que les boutons, les menus. Ils seront bien entendu élaborés sur base des palettes de couleurs et des polices codifiées par la charte.

panorama performance

Exemple de charte graphique site web

Comme nous l’avons vu, les chartes graphiques sont construites autour de quelques éléments clés. A travers notre exemple de charte graphique site web, nous en retiendrons 3 : le logo, les couleurs et la police.

La charte graphique Starbucks

Starbucks est une chaîne américaine qu’on ne présente plus. Son identité est forte, faisant de Starbucks une de ces marques qui… marquent les esprits. Notamment grâce à son vert inimitable et son logo emblématique intemporel. La marque a d’ailleurs créé un espace dédié de son site internet pour expliquer sa charte graphique. Il s’agit d’un excellent exemple des bonnes pratiques en la matière.

Sur ce site, on trouve :

La charte Starbucks est certainement un exemple fort : elle donne une idée claire de la communication de l’entreprise.

Historique des logos les plus récents de Starbucks

Par exemple, nous pouvons écrire un texte et voir à quoi il ressemble avec la typographie utilisée par Starbucks. La théorie est mise en pratique avec des exemples de publicités de la marque. La charte graphique elle-même porte l’identité graphique de la marque, à la fois fonctionnelle et expressive.

Bâtir une charte graphique à partir du logo

Le logo est en effet l’élément central de votre communication. C’est à partir de lui que l’on construit l’identité graphique. Votre logo doit refléter la personnalité de votre entreprise. Il a un rôle d’ambassadeur. Il représente la porte d’entrée d’un prospect ou d’un client. Le logo doit pouvoir être décliné sous des fonds de couleurs variées, sur des formats différents.

Ainsi, on retrouvera le logo sur une carte de visite, sur la plaquette, sur un site internet… Et sur tous les éléments de communication. Il doit donc être à la fois unique, simple et inoubliable ! La police et les couleurs du logo serviront à définir la typographie générale et l’ambiance chromatique de votre charte graphique.

PARTAGER

Nos clients parlent de nous

Piron Jean Pierre

30/03/2022  -  Google

Nous avons fait appel à Welko pour une campagne de voeux à l'occasion de la nouvelle année. Aucun regret et très satisfait de leur carte de voeux virtuelle. Doriane était très à l'écoute de notre besoin et à répondu parfaitement à notre demande. Pour d'autres besoins, nous reviendrons vers l'agence assurément. Nestenn Les Ponts de Cé.

Édouard Nobilet

30/11/2016  -  Google

Super acceuil on voit tout de suite le professionnalisme de cette équipe jeune et dynamique. Très à l'écoute, les propositions qu'ils m'ont faites était parfaitement en adéquation avec mes attentes. Je vous recommande vivement cette agence qui va à coup sûr vous satisfaire.

Antoine Blanchard

30/11/2020  -  Google

J'ai animé une formation chez Welko. J'y ai reçu un accueil très chaleureux. Les locaux sont très agréables, chaleureux, lumineux. Ce fut un plaisir que de partager ce moment avec une équipe volontaire, dynamique et avec un sourire perceptible même à travers les masques !

A2TC JYL

30/11/2016  -  Google

Très bonne agence de communication sachant répondre aux attentes du client. De très bonnes idées pour la création du graphisme. Grande réactivité sur diverses demandes (graphisme, développement de sites web). Equipe est très dynamique.

Quentin Avril

30/11/2017  -  Google

Équipe sympathique et dynamique, sérieuse. L' approche client est au cœur de leur préoccupation, pour que la solution soit optimum. Ne changez rien

Bertrand Decron

30/11/2021  -  Google

Très belle agence qui monte en puissance depuis des années. Avec une équipe réactive. Je recommande !

Martin G

30/11/2016  -  Google

Super agence de com sur Angers. Des collaborateurs qui ont plein de bonnes idées. Je recommande.

Charlene Coquereau

30/11/2016  -  Google

Agence réactive, créative, et qui a su répondre à nos attentes. Je recommande !