Le guide de style : les concepts design pour votre site Web

Tout site Web se doit d’avoir une présentation homogène, cohérente et facilement reconnaissable. Il n’est pas très difficile d’y parvenir, à partir du moment où une seule et unique personne travaille sur ce projet Web. En revanche, pour les projets de plus grande envergure, par exemple pour concevoir et entretenir le site Web d’une entreprise, de nombreux acteurs interviennent. Afin de contourner les problèmes et favoriser une approche cohérente de la part de chaque membre d’équipe, les guides de style constituent une solution simple. Mais que se cache concrètement derrière ce terme ? Et comment mettre en place un style guide rapidement et simplement?

Qu’est-ce qu’un style de guide ?

Un guide de style désigne en marketing digitalun document synthétique donnant les clés pour homogénéiser sa présence sur le Web. Cela concerne bien sûr les sites Internet mais aussi tous les comptes que vous pouvez avoir sur Internet, comme sur les réseaux sociaux ou les applications. Un style guide est donc au cœur de l’identité visuelle d’une entreprise. Il veille à ce que l’entreprise soit immédiatement reconnaissable également sur Internet. Le guide de style est donc utile pour présenter de manière régulière et logique l’entreprise sur ses différents canaux de communication (que ce soient les medias sociaux, e-mails, sites Web ou toute autre publication). Il procure des lignes directrices pour les collaborateurs d’une société, en ce qui concerne la charte graphique et les éléments rédactionnels, afin que les consommateurs (potentiels) puissent immédiatement identifier l’entreprise.

Ainsi, un style guide digital pour site Web englobe bien plus qu’un simple logo et plan d’organisation : il définit également la police de caractère à utiliser, les couleurs, l’emplacement des images ou encore la mise en place des différents contenus, et donne même des indications sur le style et ton des textes. Le guide se doit d’être respecté afin que les internautes ne s’aperçoivent pas que plusieurs collaborateurs ont travaillé sur une même partie de projet.

Pourquoi un guide de style est si important ?

Comment le site Web va-t-il pouvoir refléter au mieux l’entreprise, et comment peut-il être directement reconnaissable pour ses visiteurs ? Ce sont des questions qui viennent tôt ou tard à l’esprit des dirigeants d’une société. Le style guide vise donc à y répondre : il constitue en effet la base pour connaître les concepts de présentation du projet Web. C’est grâce à ce style guide qu’il va être possible de s’accorder au mieux à sa cible et de communiquer de manière harmonieuse. Dans l’idéal, un site Web est conçu de telle sorte qu’il permette à l’utilisateur d’identifier facilement la marque et qu’il donne envie d’être recommandé.

Un site Web uniforme permet de véhiculer une impression de sérieux et de professionnalisme. Les utilisateurs ou consommateurs doivent par ailleurs sentir que l’on s’adresse à eux ; ceci permettant de les retenir sur le site.

Développer votre style guide idéal

Pour développer un guide de style en bonne et due forme, il est tout d’abord indispensable de s’interroger sur la cible de son site Web. Exemple : un site de services bancaires ne se permettrait en aucun cas de tutoyer ses clients. Le « vous » se doit ainsi d’être la norme sur tout le site. Ce qui s’applique en effet lors de rencontres en face à face avec les clients vaut également pour les contenus des sites Web. Un portail adressé aux jeunes, pourra en revanche abandonner le « vous » trop formel qui pourrait rebuter la cible. En ne se sentant pas concernée, elle risque en effet de changer de site et d’aller cliquer chez les voisins. Si le tutoiement ou vouvoiement peut sembler évident pour votre secteur, clarifier ce point dans un guide de style permet tout de même d’éviter les impairs, et ce particulièrement si vous accueillez régulièrement de nouveaux collaborateurs. Les style guides peuvent faire figure de complément à leur formation.

Analyser le groupe cible et respecter la philosophie de l’entreprise

En établissant son guide de style, il est vital de définir la philosophie de l’entreprise en s’interrogeant sur ses valeurs. Afin d’y parvenir, quelques données sont intéressantes à relever et analyser : fourchette d’âges, sexe, niveau de formation, niveau de vie, intérêts de la cible etc. C’est seulement en connaissant votre cible que vous pourrez développer un contenu adapté. Le style guide va alors expliquer la philosophie de l’entreprise, clarifier ses objectifs et définir le wording : demandez-vous notamment quelle est la raison d’être de l’entreprise et quels sont les mots-clés les plus opportuns à utiliser sur le site pour véhiculer un idéal aux clients.

Définir le wording, les couleurs et le style d’écriture

L’identité de l’entreprise et les conclusions tirées sur la cible doivent être incorporées à votre guide de style. Pour permettre de reconnaître plus facilement une entreprise, les administrateurs Web choisissent souvent de récupérer les couleurs du logo. Mais la cible va également influencer le choix des couleurs : ainsi, les sites Web qui s’adressent à un public jeune vont utiliser souvent des codes couleurs plus voyants que sur les sites pour des personnes plus âgées qui pourront préférer des couleurs sobres et un site épuré. De plus, un style d’écriture quelque peu inhabituel peut éveiller la curiosité dans les secteurs artistiques, alors qu’un style plus classique aura davantage d’impact pour les secteurs souhaitant véhiculer une image de sérieux. Attention toutefois aux styles d’écriture trop originaux qui sont difficilement lisibles et qui donneront aux clients l’envie de quitter votre site.

Le guide de style va donc par la même occasion indiquer quels couleurs, mots-clés, icônes etc. ne doivent en aucun cas être utilisés. Certains mots à connotation négative peuvent favoriser des associations dont votre entreprise souhaiterait se passer. De même pour les couleurs et les graphiques : quelles sont les combinaisons de couleurs inopportunes ? Quels éléments visuels sont à éviter ?

Pour conclure : les lignes directrices de votre style guide doivent stipuler ce que vous souhaitez voir apparaître sur votre site mais aussi ce qui est à éviter.

Guide de style : ne pas lésiner sur les détails

Plus vous serez précis, moins vous devrez dépenser de temps et d’argent pour reprendre les parties non cohérentes du travail des uns et des autres. Le style guide ne doit donc pas hésiter à entrer dans les détails. Les couleurs doivent par exemple être renseignées avec leur pantone et peuvent être attribuées à des types d’éléments de contenus. L’emplacement des icônes, boutons, bannières ou logos sera généralement établi avec des indications sur les couleurs nécessaires. Enfin, nous vous conseillons d’ajouter de courts paragraphes expliquant l’impact recherché par l’utilisation de vos couleurs.

Par conséquent, un aperçu graphique est bien plus clair que toute explication textuelle. De cette représentation, il est possible notamment d’indiquer les largeurs de colonnes et la hauteur des lignes : le designer peut ainsi voir directement à quoi l’ensemble doit ressembler. Des indications sur la résolution et taille des images, illustrations et logos sont également les bienvenues.

De la même manière, le style d‘écriture prévu doit être explicité : où et comment doivent être utilisées les différentes polices de caractères propres à l’entreprise (si tant est qu’il y en ait plusieurs) ? Idéalement, le style guide comporte des exemples concrets pour leur utilisation : ces exemples montreront quelle est la police de caractère, la taille d’écriture et les couleurs pour les titres principaux, sous-titres, corps de texte. De même, on trouvera dans le guide des instructions pour les interlignes, les espaces entre les éléments de la page, les alinéas etc…

Exemples de style guide : comment ça marche ?

A quoi ressemble exactement un style guide ? Quelques exemples sont disponibles en ligne comme sur le Website Style Guide Resources ou plus précisément celui de Mozilla. Les guides de style de certaines entreprises sont en effet accessibles à tous et disponibles sous forme de site Web, ce qui est pratique pour naviguer entre les différentes instructions.

Le style guide du groupe Mozilla est particulièrement complet : il explicite notamment bien comment son logo doit apparaître et quelles sont ses utilisations possibles. On peut noter que l’ancien logo est également présenté, même s’il ne doit plus être utilisé : ceci permet d’aiguiser l’œil des collaborateurs et d’éviter des erreurs éventuelles. L’utilisation des couleurs pour le nom de marque « Mozilla » est en revanche plus flexible. Elle va en effet dépendre de votre fond de page. Les logos multicolores sont tout de même à éviter (comme les logos couleur arc-en-ciel).

Ainsi, on remarque dans les exemples qu’il n’est pas nécessaire d’avoir beaucoup de texte pour faire un bon guide de style. Pour la plupart des guides, une courte description et de bonnes illustrations sont suffisantes. Une structure logique est en revanche importante : avec Mozilla, le menu de navigation se situe sur la gauche.

Bien sûr, toutes les entreprises ne sont pas obligées de créer un site Web pour leur style guide. En général, un mode d’emploi bien structuré est mis en place, sous forme par exemple de document PDF. Il peut ainsi être communiqué à un nouveau collaborateur avant qu’il ne se mette au travail.

Le tableau ci-dessous synthétise les points les plus importants que doit éclaircir un bon guide de style :

Points importants du guide de style Questions centrales
Principes fondamentaux de conception Quelles sont les valeurs de l’entreprise ? Quels sont les objectifs du site Web ? Quels principes de conception permettent de mettre en valeur la philosophie de l’entreprise ?
Cible / Personas Quelle est la cible à atteindre sur le site ? Quelles sont ses caractéristiques ? Quelles sont ses préférences, souhaits, intérêts ?
Ton et wording Comment s’adresser aux clients/lecteurs/visiteurs ? Quels sont les mots qui accrochent ou qui sont tabous ? Quels sont ceux à utiliser ?
Logo et nom de marque À quoi ressemblent le logo et le nom de marque ? Quand, comment et où doivent-ils être préférablement utilisés ?
Structure de base du site Web Comment doit être construit le site Web ? Quelle est la taille des colonnes et des zones de textes ? Comment sont organisés les différents éléments de contenu ? Comment sont agencés les menus ?
Couleurs Quelles couleurs soulignent au mieux les intentions de votre site et correspondent à la cible ? A quels pantones couleurs correspondent-elles ?
Style d’écriture Quels styles d’écriture doivent être utilisés et pour quels éléments rédactionnels ? Quelle est la taille de la police et sa couleur ?
Icônes Quelles icônes utiliser ? Comment doivent-elles être agencées et que signifient-elles ?
Contenu Quel type de contenu doit comporter le site final ? Comment cela doit-être traduit graphiquement, textuellement ?

Suivi et mise à jour

Une fois le guide de style établi, il est nécessaire de s’appliquer à bien entretenir et mettre à jour son site Web. Ceci permet de garantir l’homogénéité de tous les canaux de communication sur le long terme. L’uniformité est essentielle pour le branding. Cela ne veut pas dire pour autant qu’il ne faut pas faire évoluer le style guide de l’entreprise. Au contraire, l’enjeu est davantage de vérifier qu’il est bien adapté au contexte : le design est-il toujours actuel, la police de caractère tendance, le logo doit-il être mis à jour ? L’exemple de Mozilla montre que le logo peut changer au fil du temps et même que cela peut être nécessaire. Les goûts de votre cible peuvent aussi évoluer. Il est donc primordial de faire évoluer son guide et donc naturellement son site Web au rythme de son public pour assurer une bonne présence Web.