Découvrez nos offres pour faire du digital le levier de votre croissance !
Téléchargez le Guide Ultime de gestion de projet digitale pour vous aider à piloter vos transformations et faire les bons choix !
Vous gérez plusieurs interfaces digitales pour votre entreprise ? Vous souhaitez les retravailler, les harmoniser ? Et passer le moins de temps possible à gérer les évolutions ... ? La méthode du Design System est la solution pour répondre à vos besoins.
La digitalisation des entreprises bouscule les méthodes de conception, l'organisation des équipes et la cadence de production. Les plateformes digitales et leurs fonctionnalités sont mises en ligne rapidement pour répondre aux exigences d'utilisateurs finaux toujours plus exigeants.
Plusieurs équipes (développeurs web, UX designers...) interviennent sur les projets web et souvent à des moments différents. Incohérences, écarts de design, doublons ... plus les intervenants sont nombreux, plus il est complexe de centraliser les informations et d'uniformiser les usages.
Le Design System répond à une logique d'industrialisation du design. Ce référentiel UX et UI sert de base à la création des dispositifs digitaux. Comment ? Focus sur le Design Sytem ...
Le Design System (ou système de conception) peut être assimilé à une bibliothèque de composants dans laquelle se servir lors de la conception du développement d'un projet web. Il englobe des "bibliothèques" (libraries) et des "guides de style" (styleguides). Le Design System regroupe ce que l'on appelle la charte ergonomique et la charte graphique.
Le Design System traduit l'identité de marque de l'entreprise. On y trouve des éléments graphiques, la typographie, des visuels, le branding ...
Qu’il s’agisse d’une application métier ou encore d’un site e-commerce, le Design System peut être utilisé en tant que bibliothèque de référence et de guide. D'ailleurs, dans un précédent article, nous avons vu comment utiliser l'UX pour rendre un site e-commerce plus performant.
Grâce au Design System, les équipes techniques et design peuvent piocher des composants prêts à être utilisés et écrits dans un langage commun. Dès que l'équipe et l'entreprise se développent, le Design System doit être pris en compte, développé et appliqué de manière cohérente. Il aide une équipe à être plus productive et à atteindre un niveau plus élevé de cohérence sur le produit.
Plusieurs Design Systems ont déjà vu le jour. Par exemple, Mozilla Firefox a déjà pensé son propre Design System, le Photon Design System :
Construire un Design System demande du temps, de la rigueur et surtout une bonne méthodologie. C’est là qu’entre en jeu l’Atomic Design.
L’Atomic Design est une façon de concevoir un dispositif en le décomposant jusqu’à son plus petit composant. On parle alors de "conception modulaire" .
Les atomes/composants (boutons, palette de couleurs ...) assemblés forment des molécules ou modules (bandeaux, formulaire...). L'association de ces molécules permet de constituer des organismes (ensembles de blocs), qui une fois liés forment des templates ou gabarits. Ces templates permettent enfin de concevoir les pages du site web !
Voici un exemple précis pour illustrer le concept d'Atomic Design :
Source : fabernovel.com
Il ne s'agit plus seulement de construire des pages mais de concevoir des systèmes de composants pour s'adapter aux changements rapides.
L'Atomic Design est aussi une excellente méthode pour fédérer le travail d'équipe. L'équipe partage un langage commun et une documentation unique, qui sont le fondement d'un travail collaboratif de qualité.
Le concept de Design System est encore assez méconnu aujourd’hui et il n’existe pas vraiment de guide expliquant les différentes étapes à suivre.
Une chose est sûre, il faut bien réfléchir avant de se lancer. Même si l’un des objectifs du Design System est de gagner du temps, sa mise en place est assez longue.
La première chose à faire est d’organiser une réunion entre les UX/UI designers et les développeurs web afin de réfléchir ensemble aux solutions pour mettre en place la bonne méthodologie et utiliser les bons outils.
Différents éléments et outils entrent en jeu :
Tout projet doit avoir un guide de style. Le guide de style se rapproche fortement de la charte graphique d'une entreprise. Il recense tous les éléments utiles concernant le webdesign d'un site. Par exemple, il permet de savoir quelle couleur et typographie utiliser, ou encore quelle apparence doivent avoir les boutons.
Un guide de style efficace doit être suffisamment détaillé afin que chaque élément de votre Design System soit décrit et documenté.
Voici un exemple de guide de style :
Cet exemple nous ait offert par Mateusz Dembel, disponible sur medium.muz.li
Lorsque l'on doit commencer la construction d'un Design System, il faut s'assurer qu'il puisse potentiellement être mis à l'échelle sur plusieurs projets. En effet, il doit donc être accessible par différentes équipes de l'entreprise.
Pour créer un guide de style, il est possible d'utiliser l'outil de maquettage en ligne InVision. Pour mener à bien ce projet, il faut penser à ajouter une page de titre, sur laquelle nous listons tous les types des atomes, molécules et organismes de l'Atomic Design. Chaque type d'élément doit avoir une page distincte.
Si vous souhaitez voir ce que peut donner donner un Design System à l'aide d'InVision, voici quelques images des travaux de Damian Watracz :
Toutefois, concevoir des design web et mobiles n'est pas donné à tout le monde. Si vous manquez d'inspiration, nous vous invitons à lire notre article sur les tendances UI / UX.
La convention de dénomination est également à prendre en compte lors de la conception d'un Design System. Pour une meilleure communication au sein des équipes de conception et de développement, la convention de dénomination doit être cohérente et claire.
Source : medium.muz.li
La convention de dénomination est écrite en minuscules et séparée par des tirets. Elle en devient facile à utiliser pour le concepteur et le développeur, car elle est visible dans un code source et est utile pour la dénomination des fichiers. Une telle dénomination permet également de repérer rapidement une couche ou un groupe documenté dans une maquette.
La première lettre représente une catégorie d'élément : atome, molécule, organisme. Le deuxième mot est un type d'élément. Le reste est utilisé pour décrire les variations d'un élément. Chaque groupe d'atomes, de molécules et d'organismes dans les maquettes graphiques doit être nommé en conséquence.
La convention de dénomination peut jouer un rôle important dans le succès d'un Design System. Prenons l'exemple d'un développeur qui examine une maquette. Celui-ci voit un organisme appelé " o-popup-alert-exit ". Il peut examiner un dossier de code source, trouver facilement un fichier nommé " o-popup-alert-exit.html ", et l'ajouter rapidement à un endroit nécessaire dans un projet. Cela permet de gagner un temps considérable lors de la conception du Design System.
Voici d'autres conseils à prendre en compte :
Les bibliothèques représentent une grande partie de la fonctionnalité Sketch. Sketch App est un logiciel qui permet de concevoir des interfaces de sites web ou encore des applications mobiles. Grâce à des plugins, les fonctionnalités Sketch peuvent être étendues. Aucune inquiétude : Sketch est simple d'utilisation et rapide à installer !
La fonctionnalité Sketch permet de connecter un fichier .sketch habituel dans les préférences du logiciel et d'utiliser les symboles de ce fichier dans toutes les maquettes. Il est possible d'en savoir plus sur l'utilisation des bibliothèques dans la documentation Sketch.
Source : medium.muzz.li
Une fois le guide de style créé, il est temps de commencer à réaliser des pages en 4 étapes :
Sur InVision, le code du développeur ressemble à la structure de la couche :
Source : medium.muzz.li
Le Design System a beaucoup d’avantages notables :
La mise en place d'un Design System peut être long, mais pratique. Au-delà du travail conséquent qu'il apporte, le Design System est l'un des meilleurs moyens pour standardiser son travail et s'assurer d'une bonne compréhension et cohésion de la part de l'équipe UX et de développement. En lien avec l'Atomic Design, le Design System permet d'organiser sa conception et de répondre à des problématiques UX. Si vous souhaitez en apprendre plus sur les méthodes de conception en UX, nous vous invitons à visionner notre webinar.