Conception d’une charte graphique

Conception d'une charte graphique

Définir une charte graphique est essentiel dans l’élaboration d’un site Internet. La charte graphique construit l’ambiance du site, lui donne de la cohérence, de la crédibilité. Elle donne à l’utilisateur des repères au sein du site et facilite ainsi sa visite.

Le travail préparatoire

Les bonnes questions

Il est important d’adopter une bonne démarche initiale en posant les bonnes questions. Avant le début du développement du site web, il y a toute une phase de préparation, de la définition du besoin au choix de la solution technique qui est capitale.
Durant cette phase de préparation, les questions sont nombreuses, et elles dépassent souvent le cadre du site web. Sans une démarche de travail efficace, la préparation de la création du site internet peut durer trop longtemps ou négliger certaines facettes du projet.

La préparation d’un projet de création de site web prend des formes différentes selon le contexte de chaque entreprise :

• Type de site envisagé,
• Compétences internes,
• Ressources budgétaires,
• Etc.

Il faut définir précisément le besoin pour être en mesure de faire les meilleurs choix pour la création du site.

Le cahier des charges ou brief

Vous devez demander au client de vous fournir un cahier des charges ou brief. Ce document explique l’activité de l’entreprise, les objectifs du site web et l’identité que le client souhaite pour son site.
À partir de ce brief vous concevrez une identité graphique dont les différents éléments seront déclinés au sein des maquettes de pages.
C’est souvent en raison d’un cahier des charges pas clair, voire inexistant, que des entreprises se retrouvent déçues de l’identité graphique proposée.
Rédiger un brief clair et complet n’est pas une perte de temps. Si le prestataire n’a pas compris l’esprit que le client souhaite donner à son site web, les premières propositions ne seront pas adaptées, et les deux parties perdent du temps.

La charte graphique

Voici les éléments de la charte graphique qu’il peut être utile de pouvoir modifier :

Références RVB / Hexadécimal des différentes couleurs utilisés. Généralement, il est conseillé de ne pas dépasser deux couleurs principales.

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.

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.

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 icônes.

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-toaction de la page d’accueil.

Les dimensions des pages et le zoning des différents contenus.

La description des différentes zones pour chaque type de page, ainsi que la disposition des différents éléments. La prise en compte de la règle des 3 clics, la présence d’un plan de site, des mentions légales.

Les types d’images, formats, dimensions, les types de vidéos, audio, etc.

Choisir un thème pour WordPress

Quand vous utilisez wordpress, tout l’enjeu est de personnaliser le thème que vous avez choisi pour refléter l’identité du client. Wordpress est articulièrement souple et permet de pouvoir modifier de nombreux d’éléments graphiques du thème initial grâce aux nombreuses extensions et aux nombreux widgets. Quelques conseils pour ce travail : Prenez le temps de définir clairement les éléments clés de l’identité visuelle avant de choisir un thème, cela vous aidera à choisir un thème proche de ce dont vous avez besoin. Testez toutes les possibilités de personnalisation de chaque thème avant de choisir.

Les éléments à prendre en compte pour choisir un thème

Pour choisir un thème, faîte une recherche sur le web pour voir si il est beaucoup utilisé et si il est mis à jour régulièrement.
Voici une liste des éléments à prendre en compte :
• le thème de base est personnalisable,
• le nombre de colonnes correspond à votre besoin,
• le thème est « responsive » : il s’adapte à la taille de l’écran utilisé (smartphone, tablette, PC),
• la bannière est personnalisable,
• le pied de page est personnalisable,
• les couleurs peuvent être changées,
• le thème est-il sur le modèle « page unique » – infinite scrolling ou pas,
• le feuille de style CSS est personnalisable.

Les éléments à prendre en compte pour choisir des extensions

Vous aurez besoin de différents éléments pour gérer les éléments du site. Ils sont disponibles sous la forme de plugins.
Pour choisir une extension, faîte une recherche sur le web pour voir si elle est beaucoup utilisée et si elle est mise à jour régulièrement. Certaines sont payantes.

Voici mon choix d'extensions gratuites :

• diaporamas : Meta Slider
• galeries d’images : NextGEN Gallery
• référencement naturel : All in One SEO Pack
• spams : Akismet
• galeries d’images, carrousel d’images, publication et partage sur les réseaux sociaux, visibilité des widgets, articles similaires, pages et articles phares, widgets supplémentaires, statistiques, référencement naturel, menus, formulaire de contact : Jetpack par WordPress.com

• éditeur interne : TinyMCE Advanced
• images : Advanced Image Styles
• newsletter : MailPoet Newsletters
• plan de site : WP Sitemap Page
• gestion de la base de données : WPOptimize
• icône de site : intégrer à wordpress
• vidéos : intégrer à wordpress
• sons : intégrer à wordpress

1 thought on “Conception d’une charte graphique”

Laisser un commentaire