Accueil » Charte graphique de site web » La création d’une charte graphique web ?

La création d’une charte graphique web ?

responsive

La création d’une charte graphique web doit constituer un atout pour votre entreprise. Votre identité visuelle doit permettre de délivrer un message clair. Simple et ergonomique pour donner une impression de modernité, votre site internet doit également être intéractif afin d’enrichir l’expérience utilisateur. Il en va de votre image de marque au moment de la conception de votre site internet.  Voici quelques pistes de réflexion à travers un exemple de charte graphique de site web idéale pour que vous sachiez à quoi doit ressembler votre web design.

exemple de charte graphique site web
Exemple de charte graphique de site web épurée et moderne

Le webdesign web

Un logo = Un message

Tout d’abord, le webdesign correspond à votre identité visuelle. Le logo y occupe une place centrale. Il doit apparaître en tête de page et servira également à vous reconnaître. Comme il est unique, votre identité doit délivrer un message qui vous différencie. La typographie et les couleurs de votre site internet vont sans doute en découler. Le choix de la couleur de fond, claire ou foncée, doit refléter votre secteur d’activité et ne doit pas nuire à votre message. Le logo, la typo et les couleurs de fond doivent vous différencier de vos concurrents.

element graphique pour site web

Cohérence

La charte graphique de votre site internet est un élément important puisqu’il véhicule votre image de marque sur la toile. Elle se doit donc d’être cohérente avec vos autres supports de communication (logo, plaquette, catalogue, enseigne flyer…). Faites aussi un tour d’horizon sur Google pour connaître les codes de votre secteur d’activité.

Le choix des couleurs, de la police d’écriture

Les couleurs utilisées, la police de caractères sont des choix important qui permettront aux utilisateurs de vous identifier sur la toile.

2 couleurs dominantes sont conseillées en cohérence avec vos autres supports. Deux à cinq couleurs complémentaires. Le langage des couleurs permettra de faire passer une impression : élégance, dynamisme, sobriété, accroche visuelle. Ce sont ces couleurs qui vous différencieront de la concurrence.

2 polices aussi maximum une pour les titres, une pour les textes. Cela permet de dynamiser l’ensemble. La typographie peut induire sur la perception de la qualité de votre travail (cheap, milieu de gamme, luxe). Nous conseillons Roboto, Open Sans, Helvetica Neue, Proxima Nova, Avenir et Latto.

charte graphique site internet

Les titres et les textes

Ensuite, comment allez-vous découper l’information? Afin de réaliser un site web épuré, clair et qui va à l’essentiel, votre contenu doit être lisible dès le premier coup d’oeil. Les titres et les sous-titres vont vous permettre de structurer votre contenu en de courts paragraphes. Pour vos textes, préférez des textes cours pour votre page d’accueil mais pour les autres pages l’idéal est de fixer à 500px la colonne de texte comme sur Facebook, c’est ce qui a de plus facile à lire. Mais après?  Souhaitez-vous des traits de séparation? Des puces spécifiques? Il existe de multiples façons d’habiller un site. Illustrez vos propos avec des éléments HTML : des ombres portées, des puces, des traits de séparation, des couleurs de fonds… Si vous souhaitez en savoir plus, n’hésitez pas à consulter nos articles connexes sur les contenus iconographiques.

 

Comment faire une maquette pour votre site web ?

Le positionnement des éléments

Le zoning, le wireframing et le mockup sont indispensables à l’élaboration de votre charte. Ils permettent la conception d’un web design personnalisé qui fonctionne en respectant l’ergonomie et l’interactivité. Un croquis voire des croquis qui découpent l’interface en différentes zones lisibles sont des préalables nécessaires à une communication réussie pour le confort d’utilisation et une lecture des messages évidente et aisée. Le zoning indique l’emplacement des différents éléments tels que menu, logo, visuels, sidebar, footer dans un modèle de page type sous forme de schéma simple. A ce stade, on ne parle pas de textes, d’illustrations ou de couleurs.

charte graphique web zoning

La conception d’un webdesign ne commence pas par la création de calques sous photoshop, ou par l’écriture de code, sans savoir où positionner les différentes informations. L’ergonomie sera complète si l’organisation de votre site internet découpe l’information en la hiérarchisant du plus simple au plus complexe. Le wireframing permet de définir la hiérarchie de l’information dans  une mise en page simple selon le fil conducteur que vous désirez être suivi par un utilisateur. Il est destiné à améliorer l’expérience utilisateur en décrivant le fonctionnement de la page en expliquant le type de contenus qui composent chaque grande zone. Pour le mockup, certains scénarios seront alors élaborés pour convenir de “tunnels” qui permettent de convertir certains prospects en clients ou pour retenir l’internaute plus longtemps sur votre site web.

charte graphique pour site web

exemple de wireframing

Les pictos 

Un article agrémenté de visuels va plus loin qu’une longue page de texte car elle délivre aussi des messages. L’avantage des pictos est d’annoncer le contenu de votre texte tout en donnant une image positive. Ils agrémentent aussi la mise en page en donnant de la plus-value à vos annonces. Ils permettent aussi de gratifier l’internaute en cas de succès lors d’une interaction avec le site internet. Ils renforcent votre image positive

elements graphique site web

Votre potentiel de séduction

Le webdesign doit apporter une sensation de plaisir à l’internaute. Faites en sorte qu’on se souvienne de vous ! Donnez envie à vos clients ! Quelle place souhaitez-vous donner à vos photos parmi vos pages? N’hésitez pas à privilégier les photographies si votre site est de type commercial, cela met en confiance. 

Adoptez un webdesign cohérent entre vos différentes pages. Fixez les dimensions de vos photos et précisez où elles se positionnent: avant ou après vos textes ou sur le côté.

De plus, cela profite au classement dans les moteurs de recherche puisque votre webmaster va taguer les images pour optimiser vos pages avec des mots-clé mal orthographiés ou des combinaisons improbables et/ou non lisibles. Si vous pensez que le graphisme est le vecteur le plus important de votre image de marque lisez notre article sur le webdesign.

Hiérarchiser l’information

Une image peut servir à améliorer l’expérience utilisateur en simplifiant l’information.

Faites des accroches marketing en images avec un court texte de présentation qui renvoie vers vos produits, vos articles de blog, ou une page. Puis choisissez un intitulé de lien efficace pour inciter les internautes à le suivre et visiter une page qui développe ensuite tout ce que vous avez envie de dire dans un long paragraphe.

Utilisez les infographies pour apparaître comme un expert de votre secteur d’activité dans votre domaine. Une illustration peut servir à communiquer un message ou une idée abstraite.

Utilisez des vidéos pour personnaliser votre image de marque et instaurer une relation confiance.

Utilisez les sliders ou un diaporama pour laisser la part belle aux visuels si vous disposez de belles photos. N’hésitez pas à acheter sur les banques d’images (Pixabay, Pixels, Adobe stock) de belles photos pour votre site internet. Cela permet de prolonger le temps de visite de l’internaute puisqu’il s’y sent bien.

Et vos produits? Qu’aimeriez-vous mettre en avant? Savez-vous que le marketing peut vous aider à développer vos ventes en ajoutant par exemple un call to action à côté de vos produits pour en savoir plus, pour réserver ou bien acheter en un clic…

exemple de charte graphique de site internet

 

Les thèmes wordpress

Les thèmes wordpress offre de bons exemples de chartes graphiques de site web.  Pour vous donner une idée de ce qui se fait, les templates sont tous récents et suivent l’air du temps en faisant la part belle aux dernières innovations en matière de design.

Avec WordPress, il est assez facile de changer de template ou de thème graphique sans pour autant devoir toucher au contenu de votre site. Le webdesign est basé sur un template graphique ou thème qui est indépendante de la partie fonctionnelle du site et vous pouvez en changer sans affecter ni le contenu, ni le système de gestion. C’est une solution assez économique car il existe des milliers de thèmes pour les entreprises, les associations, les magazines, les portails web qui coûtent environ 50 € et qui vont vous permettre d’habiller votre contenu même s’il faudra la personnaliser avec l’aide d’un webmaster. 

 

charte graphique web
web desing féminin et lyrique 

Modernité de votre site internet

L’obsolescence est aussi visible sur Internet. Combien de fois ai-je fermé la page d’un site internet à cause d’un design daté? Ne laissez pas un prospect vous tourner le dos en laissant une mauvaise image de votre entreprise. La création de charte graphique de site internet ne doit pas être négligée pour des raisons obscures.

Durée de vie des chartes graphiques

Changez votre charte graphique web tous les 4 ou 5 ans. En revanche, pas trop souvent, il en va de votre image de marque. A la rigueur, vous pouvez modifier votre webdesign tous les deux ans. En effet, comme tout produit qui s’use, vous devez en changer au bout de quelques années car il faut vivre avec son temps et suivre les dernières tendances pour rester compétitif. 

Conclusion:

Le choix d’une charte graphique web est un moment important pour la notoriété et l’image de marque de votre société. A travers de ces exemples, vous comprenez le vocabulaire afin d’optimiser votre cahier des charges avant la création d’une maquette graphique.

 

BESOIN DE CONSEILS ?

Si vous voulez discuter de votre projet web, n’hésitez pas à en parler avec Webmaster freelance!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *