La différence entre le Design System et l’Atomic Design
Le Design System est un référentiel UX/UI qui renferme des directives et des composants UI utilisés pour des fins de conception ou de développement. Cette banque de données est centralisée et partagée entre tous les membres de l’équipe chargée du développement d’un produit ou d’un service digital.
Quant à l’Atomic Design, c’est une approche employée pour la création d’un Design System. Il s’agit d’une conception modulaire qui consiste à décomposer l’objet en composants réutilisables, afin d’optimiser la création d’interfaces fonctionnelles et responsives.
Alors, comment peut-on définir l’Atomic Design et le Design System ? Quelle est la différence entre ces deux approches ?
Qu’est-ce l’Atomic Design ?
A l’ère du développement des dispositifs digitaux et des besoins des utilisateurs, le design des interfaces évolue constamment. Dans ce contexte, l’Atomic Design se présente comme une alternative pertinente pour créer des bibliothèques de composants qui facilitent la conception d’interfaces utilisateur.
L’Atomic Design (inspiré de la chimie) est une approche de conception inventée par le webdesigner américain Brad Frost en 2013. Il ne s’agit plus de concevoir des pages statiques, à l’image d’un livre, qui restent figées dans le temps. Mais plutôt, la tendance converge vers la création d’interfaces évolutives et innovantes. Il s’agit d’une démarche itérative et non linéaire qui est illustrée selon cette taxonomie :
- Les atomes : représentent les plus petits éléments UI basiques et indivisibles, comme : les boutons, les couleurs, les styles de typographie, etc.
- Une molécule : est un ensemble d’atomes, qui rassemble les composants UI dans une unité unique.
- Un organisme : est un groupe de molécules et/ou groupe d’atomes.
- Un template : est la structuration des groupes de molécules.
- La page : représente l’interface utilisateur finale. Avec l’Atomic Design, la création d’une page s’est modifiée. Le design ne se fait plus écran par écran, pour ensuite créer les éléments graphiques de l’interface ou GUI : Graphical User Interface.
Actuellement, on commence par la création des composants UI basiques, qui seront intégrés par la suite dans la page, selon les besoins de l’utilisateur final.
Le tableau périodique des éléments HTML de Josh Duck montre comment tous les sites Web, applications, intranets et autres sont composés des mêmes éléments HTML.
Comment créer un Atomic Design ?
La démarche de création d’un Atomic Design diffère d’une entreprise à une autre. Mais généralement, on peut admettre les étapes suivantes :
- Collecter les guidelines relatifs au branding de la marque.
- Créer plusieurs types de prototypes UI avec différents styles : de couleurs, de typographie, de texture, etc (tout en respectant le principe de responsivité).
- Valider ces prototypes UI avec l’utilisateur et définir ceux validés comme UI style guide.
- Utiliser ce UI style guide pour créer les wireframes de la librairie des patterns UI finale.
Les avantages de l’Atomic Design
L’Atomic Design offre des avantages considérables, comme :
- Une meilleure agilité entre les acteurs du projet. (Lire dans le même contexte l’article l’UX design et l’agilité).
- Des interfaces améliorées et responsives.
- Le temps dédié pour la conception et le développement de l’interface utilisateur sera réduit.
- La création de la charte graphique sera plus facile.
- Le développement d’un code plus épuré et plus lisible.
- La pérennité du projet sera garantie grâce à la réutilisation des composants.
- Intégration facile des composants dans des environnements multi-supports.
Qu’est-ce le Design System ?
Le Design System désigne une bibliothèque de guides et de références que les designers et les développeurs s’en servent pour développer un produit ou un service digital : un site web, une application mobile, un logiciel, etc. Cela englobe :
- Des ressource matérielles :
- Les lignes directrices ou guidelines : qui renseignent sur les bonnes pratiques à adopter pour réaliser une tâche donnée.
- Les éléments qui composent l’identité d’une entreprise. Cela renferme : les patterns et les composants UI, l’iconographie, la typographie, la charte graphique, les images, etc.
- Des ressources immatérielles :
- Le langage et le ton de la voix employé pour communiquer avec le public cible.
- Les principes directeurs, à savoir : les valeurs de la marque et les objectifs du produit.
Le Design System est un référentiel UX/UI qui offre aux designers et aux développeurs un langage commun pour favoriser le partage de l’information entre eux et optimiser leur collaboration sur le projet, d’une façon Agile.
Le contenu de cet écosystème numérique dépend étroitement de l’identité de l’entreprise en question. Ce contenu est partagé sur le Cloud et il est accessible par toute l’équipe (durant tout le cycle du développement du produit).
Comment constituer le contenu du Design System ?
Le point fort du Design System réside dans sa banque de données. De ce fait, la création de cette librairie paraît délicate, car elle impose que les données collectées soient exhaustives et que le projet du Design System à mettre en place, respecte toujours l’image de la marque.
Afin de faciliter le processus de création du Design System, il convient d’utiliser certains outils efficaces, comme Sketch et InVision.
- Sketch : est un logiciel de conception d’interface web et mobile, conçu pour Mac. Il permet la création de bibliothèque de composants afin d’accélérer et de faciliter le travail de l’équipe.
Ce logiciel performant offre à l’UX designer et l’UI designer une boîte à outils complète : des styles typographiques, des ressources numériques responsives et des palettes de couleurs, qui simplifient et optimise leur travail. Cet outil suit le processus « Design to code » afin de faciliter l’intégration de l’interface par le développeur web.
InVision : InVision est une plateforme de travail collaborative conçue par des designers pour créer des interfaces web interactives. Cette application est accessible via un navigateur web et elle est disponible en plusieurs versions, comme : InVision Studio et InVision DSM.
Les étapes de construction d’un Design System
Ces étapes constituent un processus évolutif qui se diffère d’une entreprise à une autre. Toutefois, les étapes suivantes sont communes :
- Identifier les objectifs de créer un Design System.
- Planifier des réunions avec les acteurs du projet afin de collecter le maximum de ressources numériques et d’informations concernant les objectifs métiers de l’entreprise.
- Préparer des wireframes et les valider régulièrement avec les utilisateurs cibles, au fur et à mesure de l’avancement dans le projet. Il est pertinent d’utiliser Figma pour démontrer plus concrètement le travail réalisé.
- Employer l’approche Atomic Design, afin de créer un Design System souple et adapté à tous les supports.
Les avantages du Design System
Les avantages apportés par le Design System sont nombreux. Notamment, il permet de :
- Faciliter la conception d’une interface, pour la rendre plus simple et plus accessible par les développeurs et UX Designers.
- Favoriser la communication entre toutes les compétences qui travaille sur le projet : UX designers, développeurs, techniciens, etc.
- Accélérer la conception d’une interface web.
- Profiter des données fiables et mises.
- Optimiser l’expérience utilisateur.
- Réaliser un gain de temps dans la conception d’interfaces.
- Le Design System est un système consistant, facile à maintenir et à prendre en main.
- S’adapter aux nouvelles technologies. Le Design System est un système scalable qui se développe au fil du temps pour s’aligner aux nouvelles innovations.
La scalabilité est le plus grand avantage du Design System. En effet, cet écosystème numérique est capable d’évoluer, selon les circonstances, d’une façon rapide et économique. Notamment, dans le cas de refonte d’une interface utilisateur, le Design System offre :
- Un référentiel UX/UI qui contient des composants accessibles par tout le monde. Ce qui renforce la synergie entre les designers et les développeurs.
- Une base de données unique à laquelle se réfère chaque intervenant pour réaliser un changement dans l’interface.
Donc, la refonte de l’interface sera effectuée d’une manière harmonieuse entre les membres de l’équipe. Cela évitera les interventions singulières et le manque de coordination entre les UX Designers et les développeurs. Cela peut coûter cher à l’entreprise en termes de temps et d’argent.
Voir cette conférence de Hayley Hughes, actuellement UX manager à Shopify, dans laquelle elle parle de l’intérêt du Design System et son impact sur Airbnb :
Design System vs l'Atomic Design : quelle différence ?
L’Atomic Design est une méthode de construction du Design System. En effet, le Design System emploie l’Atomic Design pour standardiser les éléments de conception : couleurs, fonts, templates, etc. Ces composants sont regroupés en atomes, molécules et organismes afin de créer des pages homogènes et adaptables à tous les supports, avec un coût réduit.
La définition du référentiel du Design System précède celle de l’Atomic Design. Cela permet de préparer un terrain favorable pour constituer un jargon visuel unique requis pour mettre en œuvre l’Atomic Design.
Le langage visuel est étroitement lié à l’identité de la marque et à ses objectifs (qui est décortiquée dans le Design System). Pour cela, il doit avoir un effet puissant pour transmettre les valeurs de la marque et engager sa cible.
L’Atomic Design aide l’UX Designer à passer de l’abstrait (ce qui est été défini lors du Design System) au concret. En effet, le Design System permet de créer la librairie de composants qui servira de référentiel UX/UI. Cette librairie est utilisée par la suite par l’Atomic Design afin de créer des pages basées sur l’imbrication des composants.
Il est utile de rappeler que l’imbrication des composants conduit à concevoir des interfaces faciles d’interprétation : par les membres de l’équipe et par l’utilisateur final.
Conclusion
L’Atomic Design et le Design System est un duo complémentaire qui assure le développement de composants interchangeables. Ces éléments sont utilisés par les acteurs du projet UX pour concevoir et créer des interfaces fluides qui répondent aux objectifs métiers de l’entreprises, aux exigences de la modernité technologique et aux besoins de l’utilisateur final.
Ce duo effectif s’adapte parfaitement aux approches de gestion de projets agiles, tels que Scrum. Cette méthode est la plus populaire parmi les approches agile. Elle place le client au centre des préoccupations et impose son implication dans tout le cycle du développement du produit.
by 
