Webmaster freelance » Charte graphique de site web » Comment réaliser une charte graphique web ?

Comment réaliser une charte graphique web ?

    maintenance site web

    La conception graphique d’un site web est essentielle pour délivrer un message clair. Au moment de la conception de votre site internet, le webmaster doit tout faire pour satisfaire l’image de marque de votre entreprise.  La charte graphique de votre site internet, c’est l’ensemble des symboles et des règles qui balise l’aspect visuel de votre site internet. Voici quelques pistes de réflexion sur le web design à travers un exemple de charte graphique de site web idéale .

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

     

    Sur quoi se base une charte graphique de site internet ?

    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.

    Les déclinaisons de votre charte graphique peut être présent sur différents supports : 

    • Cartes de visite
    • Papier à en-tête
    • Documents bureautique.
    • Affiches 
    • Flyers
    • Dossiers et communiqués de presse.
    • Vêtements : tee-shirts, casquettes
    • Accessoires : stylos, mugs, clés USB, cadeaux d’entreprises

    D’après wikipedia, l’identité visuelle  est “l’ ensemble des éléments visuels cohérents qui permettent d’identifier une même entité au travers des différents médias de communication qu’elle émet”

    Adoptez un webdesign cohérent entre  vos différents supports mais aussi entre les différentes pages de votre site web.

    L’expérience utilisateur

    Lors de la création des sites internet, il est important de savoir conjuguer graphisme et simplicité d’utilisation. 

    Le web design doit renforcer le confort de l’expérience utilisateur. L’UX s’appuie aussi bien sur l’ergonomie d’une interface que sur l’impact émotionnel ressenti. 

    L’expérience utilisateur profite aussi à votre référencement car Google a mis à jour son algorithme sur l’UX le 28 mai 2020. A voir…donc. L UX Design est donc un élément à intégrer à votre stratégie marketing en fonction de votre ou vos cibles.

    L’ ergonomie rend plus facile la compréhension et incite à l’action en permettant à l’internaute de visiter d’autres pages de votre site internet. 

    La notion d’ergonomie  est centrale pour améliorer l’expérience utilisateur. 

    L’ergonomie doit facilité l’interaction entre l’internaute et l’interface du site web. Le webdesign proposera une information visible et lisible, où l’utilisateur trouvera le contenu adéquat pour donner satisfaction à l’utilisateur.

     

    exemple charte graphique site webcharte graphique 

     

    Les différents éléments d’une charte graphique web

    Faites  un tour d’horizon sur Google pour connaître les codes de votre secteur d’activité. Souvent un code couleur se dégage, se n’est souvent pas l’effet du hasard.

    La charte graphique doit refléter 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 !

    Le 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 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
    La conception graphique d’un site web commence par un logo 

    Il existe des plateforme de création automatique de logos comme :

    Mais je vous recommande de faire appel à un graphiste free-lance sur Behance.

    Les couleurs 

    Les couleurs utilisées 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.

    exemple de cahier de charge d un site webExemple de variation du code couleur sur un logo

    La police d’écriture

    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.

    Il existe plusieurs plateformes de téléchargement de police d’écriture  :

    Les titres 

    Les titres et les sous-titres vont vous permettre de structurer votre contenu.

    Votre contenu doit être lisible dès le premier coup d’oeil. Préférez, pour les titres Hn, une police assez grosse et lisible et n’oubliez pas d’ajouter des marges importantes à vos titre dans votre feuille de style.

    Les textes

    Préférez des textes courts pour votre page d’accueil et des paragraphes pas trop long pour les autres pages.

    Les éléments iconographiques

    Il existe de multiples façons d’habiller un site. Cela permet de prolonger le temps de visite de l’internaute puisqu’il s’y sent bien.

    Utilisez le HTML :

    Illustrez vos propos avec des éléments HTML : des ombres portées, des puces, des traits de séparation, des couleurs de fonds…

    Utilisez de belles photos :

    Quelle place souhaitez-vous donner à vos photos parmi vos pages? Les illustrations délivrent aussi des messages. Elles doivent instaurer un langage de proximité par rapport à votre cible. Cele permet de renforcer votre image de marque. 

    N’hésitez pas à privilégier les photographies si votre site est de type commercial, cela met en confiance. 

    N’hésitez pas à acheter sur les banques d’images (Pixabay, Pixels, Adobe stock) de belles photos pour votre site internet. Pour créer de superbes illustrations à partir d’une banque d’image variée et qualitative, je vous recommande CANVA 

    Utilisez les infographies :

    Pour apparaître comme un expert de votre secteur d’activité dans votre domaine, apportez de la plus value à vos infographies en fourbissant des informations pertinentes. 

    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, cela renforce le plaisir de l’internaute. N’oubliez pas qu’ une illustration peut servir à communiquer un message ou une idée abstraite plus rapidement qu’un long texte.

    Utilisez des icônes:

    Vous connaissez les icônes des réseaux sociaux. C’est désormais incontournable. Mais il y a aussi l’icône du panier, l’icône rechercher, les liens, les smartphones, les questions pour la FAQ, l’icône de validation, l’icônes des réglages, etc…

     

    exemples d'icône de charte graphique

     

    Si vous souhaitez en savoir plus, n’hésitez pas à consulter nos articles connexes sur les contenus iconographiques.

     

    Des exemples de charte graphique web : 

    Les templates graphiques de 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, voici quelques plateformes de vente en ligne de thème wordpress. 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.

    • ThemeForest
    • Elegant Themes
    • WooThemes

    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. Cette solution « low-cost », n’évite pas le travail du webmaster pour remplir et ajuster votre contenu.

     

    exemples de chartes graphiques créées avec Ocean WP

    Exemples de chartes graphiques créées avec Ocean WP – site vitrine

     

    Différents thèmes graphiques pour tout type de site :

    Les thèmes wordpress constituent de bons exemple de chartes graphiques : simple à personnaliser, les zombi,aisons de blocs et l’ordre des section sont paramétrables par le webmaster et il peut aussi ajouter un constructeur de mise en page de type Elementor ou autre.

    Pour les site vitrine, on donnera comme exemple de charte graphique le thème Hestia, même s’il existe de nombreux thèmes wordpress.

    thème wordpress Hestia thème hestia les différentes chartes graphiques
    Exemple de charte graphique construite avec le thème wordpress Hestia et Elementor

     

    Les exemples de charte graphique diffèrent en fonction des différents types de site :

    • magazine/portail
    • blog
    • portfolio
    • site e-commerce

    exemple de charte graphique wordpress
    Exemples de chartes graphiques pour un portail

    exemple de charte graphique magazine
    Exemples de chartes graphiques pour un magazine

    charte graphique wordpress pour e-commerce
    Exemples de chartes graphiques wordpress pour un site e-commerce

     

    Un constructeur de pages pour une charte graphique unique

    Les constructeurs de pages permettent de varier à l’infini vos chartes graphiques. Ils permettent de personnaliser vos thèmes wordpress en composant à l’envie l’ordre et la disposition de vos modules au moins pour votre page d’accueil, pour vos pages stratégiques.

    Parmi ces constructeurs de thème WordPress, on peut citer:

    • Elementor près de 230 modèles dont une quarantaine gratuits.
    • Visual Composer
    • Gutenberg
    • Divi de Elegant Themes avec plus de 800 mises en page de sites Web prédéfinie.

    Les blocs des constructeurs de pages

    Un éditeur basé sur des blocs facilite la construction de vos pages WordPress

    Les différents blocs de Visual Composer pour construire vos pages web

    Charte graphique grâce à Visual composer

    Blocs Visual composer

     

    Les blocs d’Elementor Pro

    Blocs Elementor Pro

    Blocs Elementor Pro

     

    Les blocs des constructeurs de pages constituent la solution idéale pour réaliser une charte graphique rapidement sous WordPress

    Les modules

    En plus des blocs, les constructeurs de charte graphiques WordPress disposent de modules tout fait pour accélérer votre mise en page.

    Un exemple de bibliothèque de modèles prêt à l’emploi pour votre charte graphique WordPress :

    templates elementorExemple de template Elementor

     

    Une charte graphique web sur mesure

    Faire appel à un Web Designer

    Une identité bien conçue vous apportera une bonne valeur marchande et la confiance de vos clients et prospects. N’oubliez pas qu’un simple coup d’œil peut transformer un visiteur en client potentiel. 

    Choisissez de préférence un Web Designer créatif et novateur. Il faut compter entre 100€ sur 5 euros.com et 4 000€ selon les freelances et votre objectif. Pour trouver un designer et voir ses réalisations 

    Un brief et la fourniture d’un logo est un préalable indispensable.

    Exemple de charte graphique pour un site vitrine :

     

    exemple de charte graphique de site internetExemple de charte graphique de site vitrine réalisé par un webdesigner

     

    Exemple de charte graphique pour un site e-commerce :

     

    exemple de charte graphique e-commerce

    Exemple de charte graphique pour un site e-commerce réalisée par un webdesigner

    Les coûts sont plus importants mais peuvent être maîtrisés si votre priorité est de refléter les valeurs de votre marque.

    Pour le brief destiné au webdesigner :

    Il est préférable de préparer votre rendez-vous avec le webdesigner. 

    Dressez une liste de 4 ou 5 de vos concurrents pour permettre au graphiste d’identifier les caractéristiques de votre secteur d’activité. Dressez une liste de site internet que vous aimez.

    • Ce genre de design général me plairait bien mais avec cette partie en moins
    • j’aime le menu de ce site
    • je veux un footer comme ce site

    Essayez de décrire avec des qualificatifs la teneur de votre projet web: jeune, dynamique, punchy, fun ou bien sobre, épuré, simpliste, peu coloré, etc…

    Même si vous disposez d’un logo, il est est primordial de faire un brainstorming afin de synthétiser quels sont les besoins de votre marque en terme d’image.

    Le brief pour le graphiste devra décrier quelles sensations vous souhaitez provoquer lorsque vos clients arrivent sur votre site ?

    Après avoir défini votre cible, vous pouvez imaginer quelles sont les valeurs qui correspondent aux mieux aux attentes de vos clients.

    Par exemple, on trouve souvent comme valeur les concepts suivants :

    • Innovation
    • Expertise
    • Savoir faire
    • Performance
    • Luxe

    Après ce brief, le graphiste est capable de voir les contours de votre identité visuelle et d’imaginer une image de marque qui doit pouvoir offrir un caractère unique.

     

    Une maquette graphique pour votre projet web :

    Il peut être intéressant de réaliser  une maquette de votre charte graphique web si vous avez une idée précise de ce que vous voulez.

    Vous pouvez faire un tour d’horizon des sites internet des concurrents pour connaître les blocs indispensables à votre futur charte graphique.

    Faites un zoning pour fixer les choses. 

    Le zoning consiste à représenter sur une maquette les différents blocs de votre page web.

    Cela permet de positionner le logo, le menu, les textes, le moteur de recherche, le fil d’Ariane, la side bar et le pied de page,…

    Au besoin faites un wireframing de votre site internet.

    Le wireframing permet de définir la hiérarchie de l’information de votre page web en expliquant le type de contenu qui compose chaque grande zone : emplacement des boutons, titre principal, titres secondaires, textes, images, liens vers les réseaux sociaux,  call to action,  pictogrammes.

    Par exemple, dans votre wireframe vous pouvez fixer les dimensions de vos photos et précisez où elles se positionnent: avant ou après vos textes ou sur le côté afin e déterminer quelle place donner à vos encarts visuels dans vos pages web.

    Pour savoir comment réaliser une maquette de charte graphique, il est préférable de consulter mon article sur le zoning, le wire framing et le mock-up

    La durée de vie des chartes graphiques

    Changez votre charte graphique web

    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. 

    Changez votre charte graphique web tous les 4 ou 5 ans. Pas trop souvent, il en va de votre image de marque. 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. 

    Modernité

    L’obsolescence est aussi visible sur Internet. Vous pouvez modifier votre webdesign tous les deux ans. 

    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.

    Alors, prêt pour élaborer une charte graphique?

    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 ces exemples de chartes graphiques de site web, vous comprenez le vocabulaire essentiel afin d’élaborer une charte 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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *