Toute entreprise est convaincue aujourd’hui de l’intérêt de disposer d’une charte graphique. Le Groupe possédait sa charte. Avec plus d’une 100aine d’applications gravitant autour de notre SI, la charte graphique a ses limites. Nos UX UI Designers nous ont orientés vers le Design System. On vous explique plus précisément…
Pourquoi créer une charte graphique ?
Si toutefois, vous aviez besoin encore d’être convaincu sur l’intérêt d’une charte graphique, nous revenons sur les avantages de ce document de référence.
La charte graphique permet de (re)construire l’identité visuelle d’une société afin de clarifier, par le design, ce que représente une entreprise. Elle permet également d’avoir un unique document source de vérité lors de la phase de conception.
Que ce soit en termes de typographie, d’iconographie, de couleurs, de marges ou bien encore de bons usages des éléments, la charte graphique est utile à toute personnes intervenant dans la phase de conception (designers, développeurs, chefs de projet…).
Revenons à notre cas. Pour notre Groupe, il était nécessaire de mettre à jour sa charte graphique pour 2 raisons principales :
> Premièrement, nos clients ont de plus en plus de besoins directement sur le terrain. Ainsi, nous avons dû créer une charte responsive totalement adaptée aux smartphones d’aujourd’hui mais également adaptable à un format desktop ;
> En second, notre SI a plus de 20 ans ! nous avons, avec le temps développé un SI riche de plus de 100 applications et logiciels. Il était devenu essentiel d’unifier toutes ces applications en utilisant un design cohérent et adapté aux différents usages de nos applications web et mobiles.
Venons-en au cœur du sujet. Pour créer une charte graphique de cette envergure et pour avoir un meilleur contrôle sur la création et les modifications d’éléments lié à la charte, il était nécessaire de concevoir un Design System. Et nous avons opté sur la méthodologie d’Atomic Design.
Pourquoi utiliser un Design System ?
iMDEO a opté pour un référentiel plus complet et détaillé qui permet de concevoir et développer plus rapidement. Il s’agit du Design System.
Le Design System reprend les éléments de guidage de la charte graphique et propose également une bibliothèque d’éléments réutilisables par les designers et aux développeurs web. Ces éléments sont réunis dans un seul et même système standardisé. Au-delà de des principes décrits comme dans une charte graphique, le Design System offre des composants conçus de manière modulaire directement exploitables.
L’Atomic Design est une approche conçue par Brad Frost afin de définir un Design system à partir d’éléments simples. L’Atomic Design se décompose en 5 étapes :
> Atomes : ce sont les éléments de bases du design (ex. boutons, champs de saisie…)
> Molécules : ce sont des atomes liés entre eux, soit deux ou plusieurs éléments d’une interface utilisateur fonctionnant comme une seule unité (ex. : le champ de recherche et son bouton pour générer la recherche)
> Organismes : ce sont des composants complexes de l’UI composés d’atomes, de molécules et parfois d’autres organismes. Ils constituent l’ensemble des sections de l’interface, par (ex. le header constitué donc du logo, du menu, du champ de recherche…)
> Modèles : constitués également d’atomes, de molécules et d’organismes, ils précisent la structure du contenu (ex. longueur de texte, dimension des visuels…)
> Pages : étape concrète du design system, la page réunit toutes les étapes pour concevoir le résultat final.
Vous l’avez compris le Design system est le référentiel UX/UI et l’Atomic Design l’approche employée pour la création de ce Design System. Il nous fallait à présent choisir l’outil de conception. On vous éclaire sur notre choix.
Pourquoi avoir conçu notre Design system sur Figma ?
Nous avons donc choisi Figma. Il existe plusieurs outils pour la conception d’un Design System dont les 3 incontournables des UX Designers : Adobe XD, Sketch et Figma. Nos UX UI Designers vous partagent leurs avis et leurs choix.
Adobe XD est un outil très utile pour réaliser du fast design. Il est puissant pour animer des maquettes, réaliser des prototypes très réalistes. Il propose également la possibilité de réaliser de la 3D simple.
Cependant, de notre expérience, la création de Design Systèmes est parfois chaotique. Certains documents peuvent disparaitre lors d’une mauvaise manipulation. Et il est difficile de bien structurer les fichiers.
Sketch est quant à lui un logiciel parfait pour la conception de Design System. La création de symbole très intuitive permet une personnalisation efficace. Le système de “librairies” lié à l’Atomic Design est le plus puissant disponible sur le marché.
Mais, pour nous, le partage des maquettes est assez compliqué. Il est impossible de réaliser des interactions animées car le prototypage est très simpliste et sur des bibliothèques de symboles conséquentes, des lenteurs surviennent assez régulièrement.
A noter enfin que Sketch est uniquement disponible sur Mac.
iMDEO a donc fait le choix de s’orienter sur Figma pour 3 raisons principales :
> La fonctionnalité de collaboration permettant de pouvoir modifier des maquettes à plusieurs en temps réels ;
> Le fait d’avoir une unique source de vérité et de ne plus avoir à gérer un logiciel de création, un logiciel d’export et un endroit pour stocker les maquettes exportées ;
> Le concept de “librairies” qui est très intéressant.
Nos UX UI Designers utilisent déjà pour les prototypes de nos applications web et mobiles. Figma est un outil qui permet de partager et de diffuser un design system dans une équipe d’UI, UX et développeurs. Il offre par ailleurs des fonctionnalités de partage et de travail collaboratif en temps réel.
Conclusion
La charte graphique et ergonomique est un document de référence indispensable pour toutes entreprises afin d’harmoniser la communication et faciliter l’identification.
Un Design System peut être particulièrement utile si vous avez :
> Plusieurs équipes qui collaborent à la conception de de vos outils
> Une création permanente d’éléments déjà existants côté Design ou Développement
> Une expérience utilisateur qui perd en cohérence
Le Design System et l’Atomic Design sont un duo complémentaire qui assure le développement de composants interchangeables. Ces éléments sont utilisés par les intervenants du projet informatique pour concevoir et créer des interfaces fluides qui répondent aux objectifs de l’entreprise, à une modernisation des technologies et surtout aux besoins de l’utilisateur final.
