Aujourd’hui j’ai pris appris que derrière la plupart des libraires de composant il y a un Design System.
Dans le web, un Design System est un ensemble de règles de conception permettant de créer des interfaces homogènes et accessibles.
C’est l’émergence des différents support de diffusion et les enjeux d’accessibilités qui ont favorisé l’apparition des Design System.
Voici quelques-uns des Design System les plus utilisés :
- Atlassian Design System par Atlassian
- Material Design par Google
- Apple Human Interface Guidelines par Apple
- Ant Design par Alibaba Group
La liste est bien plus longue que ça, je vous laisserais le soin d’aller chercher le Design System qui correspond le plus à votre besoin.
Material Design (Google)
Prenons l’exemple d’un des Design System les plus utilisé Material Design. Material Design a été introduit par Google en 2014. Utiliser Material donnera à votre application un aspect similaire aux différents outils de Google (Gmail / Google Drive / Youtube …).
La raison d’être de Material Design est d’abstraire la complexité des interfaces en fournissant des solutions à des problèmes d’UX complexes. La promesse de Material, c’est une interface simple, accessible qui offre la meilleure expérience utilisateur possible. Ainsi lorsqu’on utilise Material, on se concentre plus sur sa palette de couleur et sur les jeux d’ombre pour mettre en évidence des éléments d’interface.
Le terme Material vient du fait que ce Design sSystem s’inspire de la matière du monde réel. La philosophie est la suivante : les utilisateurs sont familiers avec les éléments du monde réel tels que la lumière, les ombres et le mouvement. Ainsi on peut offrir un environnement dans lequel les utilisateurs peuvent facilement s’y retrouver.
Material Design met un point d’honneur sur l’accessibilité. Ces interfaces doivent être accessibles sur tout type d’appareil (smartphone, tablette, ordinateur …) et par des utilisateurs ayant tout type de handicape.
Implémentation de Material Design
La plupart des gros Design System possèdent des libraries de composants et des maquettes de ces derniers (tel que des collections Figma) permettant aux développeurs et aux designer d’utiliser le Design System directement dans leurs applications sans devoir tout implémenter.
Cela rend le Design System très abordable car on ne doit pas maitriser l’ensemble des règles pour commencer à l’utiliser.
Voici un ensemble de librairies qui implémente Material Design pour les différentes technologies Front-End les plus utilisées en 2024 :
React
Vue
https://www.creative-tim.com/vuematerial/
Angular
À noter qu'en général, il existe plusieurs librairies qui fournissent les composants respectant les règles d’un Design System.
Toutes les libraires ne sont pas équivalentes, elles viennent avec plus ou moins de composants. En fonction de votre besoin et de vos objectifs, ce critère peut être pris en compte pour décider la techno que vous choisirez pour implémenter votre application.
Conclusion
Personnellement, je développe principalement des interfaces en React. Je suis familier à l’utilisation des librairies suivantes :
Je trouve ces collections de composants sont complètes. Ces derniers me permettent d’avoir des interfaces homogènes, accessibles et surtout me font gagner un temps précieux car il ne faut pas développer et tester chacun des composants d’une application.
Depuis peu, j’utilise Shadcn UI qui propose une collection de composants en Tailwind CSS. Je vous conseille fortement d’essayer cette librairie prometteuse.
Top comments (2)
Pour info, l'état français a son propre design system qui permet d'avoir une uniformité dans les différents sites du gouvernement.
C'est à regarder pour un développeur qui voudrait travailler sur les sites gouvernementaux de la France.
C'est ici.
Merci pour l'info, c'est bon à savoir !