Le guide de style d’interface, la charte graphique web ou la charte ergonomique sont des livrables clés d’un projet de design interactif. Contrairement à une idée répandue, la charte graphique n’est pas à proprement parler « le design d’une interface » mais le document de synthèse et de référence qui décrit l’ensemble des principes et règles à observer pour créer ou décliner les gabarits et les écrans d’une interface. Ces principes ne concernent pas seulement le système d’identité visuelle de l’entreprise (le logo, les expressions de la marque) ou l’identité graphique de l’interface (couleurs, typographie, grammaire de formes, etc.) mais aussi la façon dont le dialogue avec le système est formalisé. Alors qu’un document de charte graphique pour l’imprimé s’attache essentiellement à décrire les règles liées à l’identité de marque, comme le logo, la signature, les couleurs, les principes de mise en page et leurs applications directes sur la papeterie et les supports courants, un guide de style d’interface documente les aspects liés à l’organisation formelle du support (grille, architecture de l’information, hiérarchie visuelle…) et au dialogue avec le système (fonctions, interaction, navigation, ergonomie).

Les finalités du guide de style d’interface sont multiples

• Maintenir une cohérence d’ensemble dans l’identité graphique, la structure des écrans, les modalités du dialogue avec l’utilisateur
• Documenter et spécifier les « modèles d’écran » ou de pages (gabarits) de l’interface
• Disposer d’une vision synthétique et globale des principes
• Rationnaliser les évolutions / modifications du projet (maintenance), mais aussi industrialiser la production des écrans / pages de l’interface
• Communiquer aisément ces principes aux membres de l’équipe, internes ou externes, designers ou non designers

Le plan type d’un guide de style d’interface

• L’identité visuelle dans l’interface (format, position, zone de réserve, etc.)
• La typologie des écrans / pages
• La résolution utile de l’interface
• La structure des écrans / pages (éléments du zoning, grilles, côtes, hiérarchie, position des éléments)
• La typographie (titraille, niveaux de lecture)
• Les couleurs (palettes, usages, sans oublier l’accessibilité)
• La navigation (fil d’Ariane, navigation globale, navigation locale)
• Les interactions (comportement de l’interface, liens, survols, etc.)
• Les éléments d’interface (pictogrammes, boutons, schémas de conception, etc.)
• Les éléments graphiques (filets, puces, formes, etc.)
• L’iconographie (style, cadrage, traitement)
• Les déclinaisons (mobile, newsletters, widgets, etc.)

Articles

Neville, Kat, « Designing Style Guidelines For Brands And Websites », Smashing Magazine, 2010

Web Style Guide

Bolton, Jina, « Writing an Interface Style Guide », in A List Apart, 208

Exemples de guides de style

Systèmes opératifs

Mobile

Autres terminaux

Microsoft Surface User Experience Guidelines

Sites web & applications

Bibliographie

Barr, Chris, The Yahoo! Style Guide: the Ultimate Sourcebook for Writing, Editing, and Creating Content for the Digital World, St. Martin’s Griffin, 2010, consultable aussi sur le web : styleguide.yahoo.com

Lynch, Patrick J., Horton, Sarah, Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University Press, 2009

Phillips, Peter L., Creating the Perfect Design Brief: How to Manage Design for Strategic Advantage, Allworth Press, 2004

Wheeler, Alina, Designing Brand Identity: An Essential Guide for the Whole Branding Team, John Wiley & Sons Ltd, 3e édition, 2009