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?

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.

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.

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.

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.

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…

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 :

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.