Qu’est-ce qu’un Design System ?
Un design system est une bibliothèque et une référence (un genre de guide) accessible, réunissant dans un même système standardisé, tous les composants et éléments inhérents à la charte graphique et ergonomique d’un service ou d’un produit digital.
Il a pour objectif de rendre accessible tous les éléments existants, et d’apporter des lignes directrices et des règles de construction communes pour les éléments à venir. Les équipes de développement, ainsi que les équipes Design pourront donc piocher des composants prêts à être utilisés, mais aussi suivre des règles de constructions pour les nouveaux composants à réaliser. Cela permet donc en amont d’avoir un design parfaitement homogène au niveau de ses règles graphiques, ergonomiques, UX et de développement.
On retrouvera aussi bien des éléments visuels que des éléments explicatifs sur l’image de marque et sur l’UI Design (ligne directrice, style guide, langage visuel, etc..).
On y retrouve :
Un petit topo sur la marque, ses valeurs, ses services.Un petit topo sur la marque, ses valeurs, ses services.Les composants : Boutons, alertes, radios, checkbox, input, modale, tags, tooltips…Les templates de page : Header, footerLes règles de conception : Tout ce qui a été cité plus haut, en version desktop, tablette et mobile, of course.
Les avantages du Design System :
- Une collaboration simplifiée : le design system permet de gagner du temps sur la communication entre les membres de l’équipe. En utilisant un design system, les collaborateurs ont un point de contact dynamique qui s’ajuste en temps réel pour tous afin de travailler avec les mêmes éléments.
- Meilleure expérience utilisateur et de collaboration : l’expérience est meilleure, que ce soit pour les collaborateurs ou pour les utilisateurs du produit en question. Si la productivité augmente, les retours avec les utilisateurs seront plus rapides et l’optimisation de l’UX aussi.
- Des composants UI évolutifs, responsives et réutilisables :cela permet d’avoir une homogénéité dans le design d’interface et dans les différents éléments graphiques. Que ce soit pour l’interface mobile, tablette ou ordinateur, les collaborateurs ont des composants standardisés qui peuvent être réutilisés afin de gagner en productivité.
Cependant, ce processus implique donc de répertorier tous les composants existants et d’avoir une réflexion profonde sur l’identité de l’entreprise. Sa création peut s’avérer fastidieuse et assez coûteuse. Si elle est incontournable pour les entreprises qui souhaitent grossir, elle n’aura pas lieu d’être pour les petits projets. S’il y a 3 devs et 1 ou 2 designers, la création d’un design system peut même être contre-productive, et fera plutôt perdre du temps à la conception.
A quoi sert un Design System ?
L’ensemble des parties prenantes d’un projet peut ainsi travailler autour d’une base commune et mise à jour en temps réel. Elle lui sera principalement utile durant les phases de design (conception, maquettage, prototypage) et de production. L’objectif sera de mettre en place le plus d’éléments possibles qui seront susceptibles d’être réutilisés plusieurs fois.
C’est grâce à ces règles d’ergonomie, d’UX et d’UI, qu’un produit sera cohérent. Il évitera les écarts de style et les va et vient entre les équipes. De manière général il aura tendance à rendre la communication entre les équipes de dev et de design plus agréable et plus efficace.
Comment on crée un Design System :
La construction et la mise en place d’un Design System est un processus itératif , des modifications / corrections successives pourront être apporté au fur et à mesure. Il implique également de nombreuses personnes.
On définit les étapes clefs :
- Repérer la problématique ou les besoins : Pourquoi créer un design system, un design system va-t-il m’aider à être plus productif, qui va s’en servir , etc…?
- Enquêter : Mener des UI Audits, parler aux utilisateurs concernés pour bien comprendre leurs besoins, identifier ses objectifs, etc…
- Rechercher des solutions à partir du budget, des délais et des possibilités technologiques ( est-ce qu’on crée un site spécifique au DS, avec quel logiciel on le crée, où héberger les versionning, etc)
- Choisir une convention de nommage facile à retenir (par exemple, on appellera une maquette : nomDeprojet_version).
- Etablir des bonnes pratiques : On range ses calques, on nomme ses calques, et je n’insisterai jamais assez là-dessus, pour vous et surtout pour les autres. Si vous ne rangez pas vos affaires, vous passerez pour un professionnel souillon, non seulement cette image vous collera un bon moment, et aucun professionnel ne voudra travailler avec vous de nouveau.
Les principaux logiciels de conception de Design System :
Adobe Xd
Xd
Adobe XD est un outil de conception graphique disponible sous PC et macOs, il fait partie de la suite d’Adobe. Ce logiciel d’interface, web et mobile, peut s’apparenter à Photoshop, mais il est dédié à la création d’interface digitale. Il peut créer des bibliothèques qui seront accessible à tout moment, et permet de drag and drop facilement les composants dont vous aurez besoin.
Les principaux avantages d’Adobe XD (celui que je connais le mieux, même si Figma commence à me faire de l’œil pour être honnête) :
Prix :
Version gratuite : 7 jours.
Version payante : A partir de 11.99 € / mois.
Figma
Figma est une plateforme en ligne collaborative pour éditer des graphiques vectoriels et faire du prototypage. Il est accessible depuis tous les navigateurs. Il existe également une version desktop pour macOS et Windows, et une solution de visualisation des design (Figma Mirror) pour iOS et Android.
Prix :
Version gratuite : historique de travail limité à 30 jours.
Version payante : A partir de 12 $ / mois.
Sketch
Sketch est un logiciel qui permet de faire de la conception graphique, du design d’application et de site web ainsi que du maquettage interactif. Sketch est disponible via l’application native macOS et les projets sont consultables depuis un navigateur web
Prix :
Version gratuite : Une offre d’essai de 30 jours est disponible sans carte de crédit requise.
Version payante : A partir de 9 $ / mois. Pour des besoins plus spécifiques, Sketch propose également une offre sur-mesure accessible en contactant le service commercial.
Conclusion
Un design system réunira des composants réutilisables et une documentation complète d’utilisation, de règles et de bonnes pratiques de conception, afin de concevoir et développer des produits ou service digitaux de manières cohérentes.
Cette référence commune est un très bon moyen de résoudre les incompréhensions entre designers et développeurs dans les conceptions d’interfaces. Il permettra de maintenir et de faire évoluer rapidement un produit, et en définitive d’avoir une réelle cohérence autant en terme graphique en termes d’identité. Finalement, ça demande du temps, de l’argent aussi, mais le résultat sera toujours satisfaisant et efficace.
Exemple de Design System efficaces :
Material Design de Google
Evidement…
Le Design system a été présenté pour la première fois le 25 juin 2014 par Matias Durate, directeur de l’expérience utilisateur Android chez Google.
C’était d’abord un design destiné aux applications mobiles (mobile first). Il est ensuite devenu l’une des grandes tendances du design d’interface. Il se veut évolutif et intuitif.
Le site du design system a une navigation agréable, et toutes les informations que l’on attend d’avoir dans un Design System sont bien présentes. Le fil d’ariane est optimisé et permet de bien s’y retrouver. Un petit bijoux.
Spectrum de Adobe
Spectrum est le Design System d’Adobe. Il est également très complet, quoique j’avoue j’ai eu plus de mal à m’y retrouver au premier coup d’œil. Je crois que j’aurai préféré avoir tous les onglets d’ouverts. On appréciera tout de même la modale de recherche ! Cela dit, il est riche, et est très intéressant à lire.
Captain Contrat
J’ai particulièrement aimé le Design System de Captain Contrat d’un point de vue informatif en particulier. On sent que les moyens ne sont pas les mêmes que ceux de Google et d’Adobe, mais il contient une bonne hiérarchisation des élements et il est assez complet. Si l’interface a des fragilités (le « menu » en haut à droite, qui fait office de fil d’Ariane *hum hum…*), on s’y repère néanmoins assez facilement.
Et voilà, tu sais tout ! ( enfin presque )
Auteur
© 2021 LoBill - Laura Billiau. Tous droits réservés.
