Concevoir la charte graphique de son site web

Concevoir la charte graphique de son site web

Concevoir la charte graphique de son site web

La charte graphique d’un site web, c’est l’ensemble des symboles et des règles qui définissent l’identité graphique d’un site web. Par extension, on utilise souvent l’expression de charte graphique pour parler de l’ensemble de l’identité visuelle d’un site web. L’objectif d’une charte graphique est double. Il s’agit d’une part d’avoir une cohérence graphique quelle que soit la page du site web, et quel que soit le support de communication utilisé, pour renforcer l’image de marque et d’autre part de faciliter la navigation et la lecture grâce à l’utilisation de repères visuels constants.
Pour un site web, la charte graphique joue un rôle déterminant dans la première impression et la crédibilité de votre site. Il faut y consacrer du temps et des ressources.

Les éléments de la charte graphique d’un site web

La charte graphique d’un site web doit être une déclinaison de la charte graphique générale de l’entreprise. Certains éléments, comme les bannières ou les boutons, sont spécifiques à la charte graphique du site web, mais la plupart des éléments sont propres à la charte graphique générale. Pour avoir une idée de la forme que peut prendre le document récapitulatif d’une charte graphique, vous pouvez télécharger la charte graphique de la Fondation Maison des Sciences de l’homme.

Voici la liste des principaux éléments de la charte graphique d’un site web.

  • Couleurs : Références RVB / Hexadécimal des différentes couleurs utilisés. On précise généralement les références CMJN / Pantone dans le cas d’une déclinaison papier. Généralement, il est conseillé de ne pas dépasser deux couleurs principales.
  • Typographie : Liste de toutes les polices utilisées, voire de la taille et des couleurs pour chaque niveau de titre. De la même manière que pour les couleurs, il est généralement conseillé de ne pas dépasser 2 polices, une pour le corps du texte et une autre pour les titres.
  • Logo : Toutes les variantes du logotype, sur fond blanc/noir, sur fond transparent, en noir et blanc, avec les références couleurs et différentes tailles.
  • Icônes : Il est généralement conseillé d’utiliser des icônes provenant d’un set complet afin d’avoir une cohérence graphique entre toutes les icones. Vous pouvez télécharger 74 sets d’icônes gratuitement à partir du site Dryicons.
  • Boutons : Deux ou trois déclinaisons du bouton sont généralement utiles : un bouton texte simple, un bouton texte + icône, voire un bouton spécifique pour le call-to-action de la page d’accueil.

Nous pourrions prolonger la liste très facilement. Beaucoup d’agences web incluent dans la conception de la charte graphique initiale des éléments comme le champ de texte, les cases à cocher, la liste déroulante, la fenêtre pop-up, le message d’erreur type, etc. L’idée est d’intégrer à la charte graphique tous les éléments communs à plusieurs pages, cela facile le travail ultérieur des infographistes et renforce l’identité visuelle du site web.

Comment construire sa charte graphique ?

Evidemment, tout dépend du contexte : budget disponible, travail existant, compétences internes, etc. Pour simplifier, nous pouvons distinguer deux cas, soit le site web est réalisé sur la base d’un template, ce qui se passe généralement quand on utilise un logiciel de création de site web, soit le site web, et a fortiori son design, sont réalisés sur mesure.

La charte graphique d’un site web avec template, l’art de l’adaptation

Quand vous utilisez un logiciel de création de site web, tout l’enjeu est de personnaliser le template que vous avez choisi pour refléter l’identité de votre marque. Quelques petits conseils pour ce travail :

  • Prenez le temps de définir clairement les éléments clés de votre identité visuelle actuelle avant de choisir un template, cela vous aidera à choisir un template adapté.
  • Choisissez un logiciel de création de site web particulièrement souple si vous souhaitez pouvoir modifier de nombreux d’éléments graphiques du template initial.
  • Testez toutes les possibilités de personnalisation de chaque template avant de choisir le template final, les templates ne disposent pas tous des mêmes possibilités de personnalisation.

La charte graphique d’un site web sur mesure, l’art du brief

Quand on choisit de confier la réalisation de la charte graphique d’un site web à une agence web ou un freelance spécialisé, vous devez fournir au prestataire un brief, un document qui explique l’activité de votre entreprise, les objectifs du site web et l’identité que vous souhaitez pour votre site. A partir de ce brief le prestataire concevra une identité graphique dont les différents éléments seront déclinés au sein des maquettes de pages produites par le prestataire.

C’est souvent en raison d’un brief pas clair, voire inexistant, que des entreprises se retrouvent déçues de l’identité graphique proposée par une agence. Rédiger un brief clair et complet n’est pas une perte de temps. Si le prestataire n’a pas compris l’esprit que vous souhaitez donner à votre site web, les premières propositions de l’agence ne seront pas adaptées, et les deux parties perdent du temps.

Le site Web privé

Le site Web privé

Un site Web peut être utilisé dans le but de représenter une personne ou un groupe de personnes (par ex : une famille). Sur ce genre de site, les intérêts et le parcours personnel sont généralement illustrés par des photos. Les thèmes tournent généralement autour des expériences personnelles du Webmaster. De même, on crée souvent un site Web privé pour les grands évènements (mariages, naissances, etc.). Pour certains, ce type de site est également utilisé comme journal public.
Nos Thèmes

Nos Thèmes

Nous vous proposons plusieurs thèmes pour votre activité

Site web pressing

Page Web pour Bar, Café ou autres activités

Page Web pour coach sportif, club de remise en forme, coach diététique

Page Web pour Web Designer

Page Web pour coach Yoga, club de Yoga….

12 + 4 =