Charte graphique Web ou Design System ?
CHARTE GRAPHIQUE WEB OU DESIGN SYSTEM ?
Il arrive dans certains cas qu’une entreprise décide de scinder sa charte graphique en deux, l’une destinée à une utilisation pour l’impression (print) et une autre pour le Web.
Si une marque est présente sur internet et possède un site, il sera important de compléter la charte graphique principale ou de créer une charte Web.
Cette dernière est une déclinaison de la charte graphique principale, et sera adaptée aux besoins et règles du Web. Il est judicieux de l’établir avant le développement du site afin de guider les développeurs. Si ce n’est pas le cas, il sera toujours possible d’en créer une plus tard, si le site est amené à changer.
On définit entre autres dans cette charte le positionnement des éléments, l’utilisation de grilles, les marges et tailles d’éléments, les boutons, l’utilisation d’icônes et de couleurs en fonction du contenu…
Le Design System
Avec le développement du numérique sont apparus de nouveaux usages, outils et supports. Il est alors devenu utile dans certains cas de créer un Design System.
Définition
Le Design System est l’assemblage de tous les éléments (physiques et conceptuels) en un référentiel, ayant pour but d’être utilisé et d’évoluer.
Un Design System est lié à une entreprise. Par conséquent, il évolue constamment.
Ce qu’on y trouve
– Les valeurs d’entreprise
– Les méthodologies de travail
– Le lien entre les designers et les développeurs
– Les outils (pour les designers et les développeurs)
– Les guidelines
– Les composants UI et patterns
– Des modèles graphiques
– Les principes visuels autour de la typographie
– Les palettes des couleurs et règles associées
– L’iconographie et l’imagerie
– Les grilles pour structurer les éléments, espaces, etc. (Grid layout)
– Les principes de communication de la marque (langage, ton…)
– Les éléments réutilisables de l’interface utilisateur (UI)
– Une pattern Library ou “blocs templates”
En résumé, un Design System est composé de guidelines Design, de bibliothèques et d’outils et ressources. On y regroupe des outils pour les designers et pour les développeurs, des patterns, des composants, des guidelines ; mais également des éléments beaucoup plus abstraits comme des valeurs de marque, des façons communes de travailler, un état d’esprit, des croyances partagées, des principes d’expérience.
Pour qui ?
Un Design system doit être utilisable par toutes les personnes d’une entreprise devant appliquer la charte graphique ou bien des guidelines. Il est donc important lors de sa conception de réflechir à tous les profils ayant l’utilité du Design system, leur profil technique, les bons process à mettre en place.
Des exemples de Design System
Un super outil pour réaliser sa charte graphique web ou son Design System
Il existe des outils en ligne fonctionnant comme des guides de style qui fournissent toutes les instructions pour l’utilisation de votre identité. Ce type d’outil est accessible via le Web. Ces plateformes possèdent également des librairies permettant de télécharger tous les assets et visuels de la charte graphique. Des collections en ligne rassemblent des images, des vidéos et toutes les composantes – icônes, logos, documents, textes, modèles – d’un système de design.
Bien organisés, les contenus sont faciles à retrouver.
De ce fait, il est possible pour n’importe qui d’accéder non seulement à toutes les règles d’utilisation des composants de la charte (couleurs, typographies, éléments graphique), mais également de les télécharger directement dans n’importe quel format (jpg, png, pdf, vectoriel, etc).
Les avantages des outils comme Frontify
— Centralise toutes les ressources de l’identité de la ville et permet à tous d’accéder aux dernières versions, à tout moment et simplement. De cette façon, vous pilotez plus facilement l’utilisation des éléments, ainsi que la cohérence de la communication.
— Permet de créer un guide graphique en ligne qui permettra à vos équipes d’accéder instantanément à des directives toujours actualisées pour concevoir des expériences plus puissantes en lien avec la ville.
— Simplifie la création et la réutilisation des éléments graphiques au sein d’un espace de travail commun à toute “l’entreprise”.
— Vous permet de créer des bibliothèques des éléments graphiques digitaux facilement consultables par tous.
— Vous pourrez partager les directives en ligne de votre identité visuelle avec des équipes et des agences externes pour les aider à mieux appréhender l’image de votre entreprise et pour développer l’efficacité globale des opérations
En conclusion
Avoir un document qui rassemble toutes les guide-ânes d’une marque ou d’une entreprise est primordial. Accessible et adapté à tous, ce document permettra une cohérence non seulement visuelle mais aussi dans la manière de communiquer et de travailler de l’entreprise. Ce dernier guidera les équipes mais aussi les prestataires et partenaires dans toute démarche de création de contenu digital.
Liens utiles
Marion Peraldi
Directrice artistique Print & Ux/Ui Designeuse
