Qu’est-ce qu’un guide de style Web?
Un guide de style est un document qui montre tous les éléments d’interface composant un site ou une application Web. Un guide de style Web devrait informer sur :
1. La typographie
C’est-à-dire tout ce qui concerne :
- les polices;
- la taille des caractères;
- l’interlignage;
- les polices alternatives pour les navigateurs plus anciens.
2. Les couleurs
Ou plus précisément la palette de couleurs à utiliser pour le corps du texte, les liens, les titres, les boutons, les boîtes et le fond d’écran.
3. La grille
L’esthétisme de la grille dans laquelle sont positionnés les contenus provient entre autres de l’espacement vertical et horizontal entre les blocs et des artéfacts utilisés comme séparateur.
4. Iconographie
Les icônes (ou leur absence) constituent un élément très important du langage visuel d’un site et en particulier celui d’une application. C’est pourquoi toutes les icônes devraient être choisies ou créées d’avance.
5. Interactions
C’est-à-dire toutes les variations graphiques qui se manifestent lors de l’interaction, comme l’apparence des boutons en fonction de leurs états ou les animations, par exemple lors de l’ajout à un panier d’achat.
6. Photos, illustrations et logo
En d’autres mots, le style du traitement photo, les marges autour des images, et les règles de rognage.
Partant des besoins du site déterminés par l’ergonome, un tel guide de style devient la référence pour construire toutes les pages du site.
Le passage du flambeau entre l’ergonomie et le design graphique
L’approche courante
Traditionnellement, l’ergonome web produit des maquettes en fil de fer (wireframes) qui sont ensuite réinterprétées par un designer graphique Web. Souvent, le designer va jusqu’à produire sa propre version de chacune des maquettes ergonomiques.
Je ne pense pas que cette approche soit une bonne utilisation du talent des designers, car il s’agit d’un surplus de travail qui n’a pas nécessairement raison d’être.
L’approche alternative : créer un guide de style Web en une seule page
Puisant l’inspiration dans son moodboard, et en fonction des besoins visibles dans les maquettes ergonomiques, le designer crée le langage visuel du site.
Ce guide de style peut prendre la forme d’une maquette qui montre tous les éléments disposés sur une seul page. Cette approche a été décrite il y a quelques mois par Paul Robert Lloyd.
Avantages de la création d’un guide de style au lieu des maquettes graphiques
L’adoption de cette approche pourrait amener les avantages suivants :
1. Moins de maquettes = plus de création
En évitant au designer du travail répétitif, celui-ci aurait plus de temps pour effectuer un travail de création plus poussé.
2. Plus complet
Un guide de style devrait être complet, c’est-à-dire, couvrir toutes les possibilités de façon exhaustive, ce qui n’est pas généralement pas le cas des maquettes graphiques. Lors de l’intégration, tout imprévu sera souvent improvisé ce qui, au bout du compte, affecte négativement la qualité de la réalisation.
3. Réduire la résistance aux changements en cours de projet
Lorsqu’un élément est répété plusieurs fois dans un document, on a moins tendance à vouloir changer son apparence. Or, contrairement aux maquettes graphiques, le guide de style ne se répète pas. Il est donc vraisemblable que l’utilisation d’un guide de style pourrait réduire la résistance aux changements, qui peut être l’un des pires ennemis à la réussite d’un projet.
4. S’assurer que les informations présentes sur les maquettes ergonomiques sont utilisées par les intégrateurs
Les maquettes ergonomiques contiennent de nombreuses informations cruciales, par exemple les éléments cliquables. Par expérience, je constate que ces informations ne se rendent pas toujours jusqu’aux intégrateurs.
Dans l’approche proposée, l’absence de maquettes graphiques pourrait faire en sorte que les maquettes ergonomiques restent la référence technique pour les intégrateurs, qui n’auraient dans ce cas pas le choix de s’y référer. Le travail de l’ergonome peut alors rester la référence tout au long de la production du site.
5. Faciliter le travail des intégrateurs
Un guide de style rassemble tous les éléments d’interface du site, incluant les spécifications techniques, ce qui facilite la vie aux intégrateurs. Un intégrateur peut alors créer une page HTML/CSS avec tous les éléments directement et ensuite comparer cette page à l’originale.
En résumé
La production d’un guide de style permettrait d’éviter le chevauchement entre le travail de l’ergonome et celui du designer graphique. En augmentant la productivité de ces deux ressources clés, il est vraisemblable qu’on puisse produire de meilleurs sites et applications, à moindre coût.
Qu’en pensez-vous?
Designers, ergonomes, intégrateurs, artisans du Web, qu’en pensez-vous? Avez-vous déjà réalisé un projet avec cette approche? Si oui, est-ce que l’expérience a été un succès?
Références
La BBC a développé un guide de style, qui prend la forme d’un site.
