Interface d’administration visuelle simple, intuitive et Made in France

Comment créer la charte graphique de votre site internet ?

Blog | PostMeta Web 02/04/2022

Une charte graphique prévoit un ensemble de règles qui permet d’harmoniser toutes les communications de l’entreprise. Il est essentiel que votre charte graphique soit adaptée à votre positionnement marketing afin de répondre au mieux aux attentes de vos clients et prospects. Lorsqu’elle est spécialisée pour le web, elle définit les éléments graphiques qui seront utilisés sur un site internet ainsi que sur les réseaux sociaux. On y trouve : 

les essentiels de la charte graphique

-      Le logo

-      La typographie (= la police d’écriture)

-      Les couleurs

les éléments que l’on peut ajouter dans la charte graphique

-      Les images, les icônes et les photos

-      Les Call To Action (principalement les boutons de votre site)

-      La mise en page

 

 

Choisir le logo d’un site web

Le logo est un élément primordial dans votre choix de charte. Il doit permettre à vos clients et prospects de comprendre vos valeurs d’entreprise ainsi que votre univers. Il peut avoir un rapport direct avec votre secteur d’activité ou alors faire passer un message grâce à un visuel. Votre logo doit se décliner en plusieurs teintes afin d’être utilisable sur tout support (couleur claire sur fond foncé, couleur foncée sur fond clair, fond de couleur…)

Plusieurs solutions s’offrent à vous si vous cherchez à créer votre logo. Il existe des générateurs de logo sur internet qui peuvent vous proposer des visuels en fonction de votre secteur d’activité et d’adjectifs vous définissant (calme, énergique, moderne, naturel …). Vous pouvez également acheter (généralement entre 10€ et 30€) une illustration sur une banque d’image et rajouter votre nom de marque avec une typographie choisie. La dernière solution est de faire appel à un graphiste afin de créer votre logo. Cette solution est la plus coûteuse mais aussi la plus professionnelle.

Besoin d’un graphiste ? Contactez-nous !

Nous aborderons ici deux types de logos qui sont particulièrement adaptés à une création par des débutants.

 

Le logo monogramme

Un monogramme est un logo uniquement constitué de lettres imbriquées les unes dans les autres. Louis Vuitton et Yves Saint Laurent ont par exemple des monogrammes en logo.

 

Logo de Yves Saint Laurent

 

 

Le logo typographique

Ce type de logo est simple :  il est constitué du nom de votre marque écrit en toutes lettres. Et c’est tout.

Decathlon utilise un logo typographique.

Si vous faites ce choix, alors sachez que le succès de votre logo repose sur le choix de votre typographie.

 

Choisir les typographies de votre site web

Votre typographie web doit représenter vos valeurs et votre univers. Vous devrez choisir plusieurs typographies pour votre site. Une pour vos titres principaux (les H1), une autre pour vos sous-titres (H2, H3, H4…) et enfin une dernière pour vos paragraphes. Elles ne sont pas obligatoirement différentes les unes des autres, mais il est vrai que si l’ensemble de votre site est en Times New Roman, il risque d’être lassant à lire.

Il est recommandé d’utiliser sur votre site web des Google fonts (environ 1000 polices libres de droits commerciaux) qui s’affichent sur la grande majorité des navigateurs. Si votre typographie est spécifique et non google fonts, elle risque de ne pas s’afficher pour vos visiteurs.

https://fonts.google.com/

Lorsque vous choisissez une typographie pour votre communication print (tous vos documents imprimés, cartes de visites, flyers…), il est important de choisir des webfonts, comme les Google Fonts. Si vous souhaitez utiliser d’autres typographies qui ne sont pas des webfonts, alors vos visiteurs devront charger vos typographies en arrivant sur votre site et cela ralentira la vitesse de chargement des pages, ou pire encore, le navigateur choisira une police de remplacement qui pourra anéantir vos efforts graphiques !

Chez Wekiu, on pense à vous ! Voici quelques éléments pour faire le tri des Google Fonts :

Serif

Les polices avec serif ont des empattements. Mais si, vous savez, ces petits traits sur les extrémités des lettres !

Sans serif

Vous l’aurez deviné, ces polices n’ont pas d’empattements. Elles sont également plus faciles à lire que les polices avec serif, plus fluides et surtout plus modernes

 

Display

Les polices display sont prévues pour être énormes. Elles sont quasi exclusivement utilisées pour des titres car l’épaisseur des lettres ne permet pas de les utiliser pour des paragraphes.

Handwriting

Pour les allergiques à l’anglais, handwriting veut dire « écriture à la main ». On y trouvera toutes les typographies permettant de simuler une écriture manuelle.

Monospace

Les typographies de type monospace ont une spécificité : toutes les lettres occupent la même largeur.

Bien choisir la typographie de votre logo est doublement important car vous pourrez envisager d’utiliser la même police pour les H1 de votre site, les titres les plus importants. Cela permet de garder une cohérence visuelle et de créer un univers graphique.

Choisir les couleurs pour un site internet

Chaque couleur a un sens, et le choix de votre palette ne doit pas être laissé au hasard ! Généralement, on conseille 3 couleurs pour votre site internet. Une principale qui représente votre entreprise, une couleur secondaire qui permet de créer des contrastes et une troisième qui intervient de manière plus occasionnelle. Afin de vous aider dans le choix de vos couleurs, il existe certains outils intéressants !

 

-      Des générateurs de palette de couleur

 https://www.palettedecouleur.net/ vous permet de filtrer selon le type de couleur que vous souhaitez

 

o      https://coolors.co/ fonctionne de manière similaire à palettedecouleur.net mais avec d’autres propositions

 

 https://mycolor.space/ vous permet de sélectionner une couleur et propose des palettes à partir de votre choix

-      Pantone élit la « couleur de l’année » à partir de prévisions de tendance. Cette couleur est souvent reprise dans de nombreuses chartes graphiques. https://www.pantone.com/eu/fr/color-of-the-year-2022

Créer sa charte, c’est donc avoir réfléchi sur l’identité de votre marque et la façon dont vous souhaitez vous présenter à votre public. Vous créerez ainsi votre identité visuelle, en combinant plusieurs éléments : 

  • vos goûts, car il est important d’être à l’aise avec une charte que vous allez assumer pendant un petit bout de temps, 
  • des normes graphiques et colorimétriques, attendues par votre audience, souvent de manière inconsciente, qui illustrent vos valeurs. Un logo de marque de jouets sera rarement rouge vif/noir, avec une typographie dure et des motifs acérés. On verra plus volontiers, des couleurs pastelles, une police arrondie avec des éléments graphiques doux !
  • des visuels suffisamment impactants pour être retenus au fil du temps par votre public.

A-t-on besoin de vous dire quelles sont les marques derrière ces logos ?

Sans forcément devenir aussi hégémonique que ces trois grandes entreprises, votre logo est une marque de fabrique qui aidera vos clients à vous repérer rapidement.

Bien utiliser votre logo sur internet

Pour savoir comment jeter les bases de votre charte graphique, commencez par aller voir les orientations des marques similaires à la vôtre. Décrivez le logo (rond, rectangulaire, avec illustration, couleurs…). Repérez les couleurs de la charte, les types de polices, la mise en page.

Passez à votre propre création et n’hésitez pas à demander l’avis de votre entourage. Un peu de recul est toujours un bon point en matière de créativité !