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 :
C’est-à-dire tout ce qui concerne :
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.
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.
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.
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.
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.
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.
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.
L’adoption de cette approche pourrait amener les avantages suivants :
En évitant au designer du travail répétitif, celui-ci aurait plus de temps pour effectuer un travail de création plus poussé.
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.
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.
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.
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.
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.
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?
La BBC a développé un guide de style, qui prend la forme d’un site.