Système de design
Un système de design, un système de conception ou un design system est un ensemble de composants réutilisables et de normes claires qui peuvent être assemblés pour créer un nombre illimité d'applications[1]. Les systèmes de design aident à la conception de produits numériques et au développement de produits tels que des applications mobiles[2] ou des sites Web. Ils peuvent contenir, sans toutefois s'y limiter, des bibliothèques de modèles/composants, des dictionnaires de conception, des guides de style (police, couleur, espacement, placement), des composants codés, des langages de marque et de la documentation.
Il sert de référence en combinaison avec un dictionnaire de design qui garantit que les nombreuses équipes différentes impliquées dans la conception et la construction d'un produit créent des produits cohérents qui se ressemblent et se comportent les uns comme les autres[3].
Les systèmes de conception notables incluent Lightning Design System (par Salesforce)[4], Material Design (par Google)[5], Carbon Design System (par IBM)[6] et Fluent Design System (par Microsoft)[7].
Avantages
[modifier | modifier le code]Les avantages d’un système de design sont :
- Conception rationalisée jusqu'au flux de production.
- Crée un langage unifié entre et au sein des équipes interfonctionnelles.
- Des implementations plus rapides, grâce à des composants réutilisables et une rationalisation partagée.
- De meilleurs produits, grâce à des expériences utilisateur plus cohérentes et un langage de conception cohérent.
- Maintenance et évolutivité améliorées, grâce à la réduction des couts de conception et de realisation.
- Une concentration accrue sur les équipes produit, en s'attaquant aux problèmes courants afin que les équipes puissent se concentrer sur la résolution des besoins des utilisateurs[8].
Origines
[modifier | modifier le code]Les systèmes de design sont utilisés depuis longtemps sous différentes nomenclatures. Les systèmes de conception ont joué un rôle important dans le domaine de la conception depuis leur création, mais ils ont subi de nombreuses modifications et améliorations depuis leur origine. L'utilisation de systèmes ou de modèles, comme on les appelait dans les années 1960, a été mentionnée pour la première fois lors de la conférence de l'OTAN sur le génie logiciel (discussion sur la manière dont les logiciels devraient être développés) par Christopher Alexander, ce qui a attiré l'attention de l'industrie. Dans les années 1970, il a publié un livre intitulé « A Pattern Language » avec Murray Silverstein et Sara Ishikawa, qui traitait des modèles interconnectés dans l'architecture d'une manière simple et démocratique, ce qui a donné naissance à ce que nous connaissons aujourd'hui sous le nom de « Design Systems » (systèmes de design).
L'intérêt pour le domaine numérique s'est à nouveau accru dans la seconde moitié des années 1980, pour que cet outil soit utilisé dans le développement de logiciels, ce qui a conduit à la notion de modèle de conception de logiciel (Software Design Pattern). Comme les modèles sont mieux conservés dans un environnement d'édition collaboratif, cela a conduit à l'invention du premier wiki, qui a ensuite conduit à l'invention de Wikipédia elle-même. Des conférences régulières ont été organisées et, même à l'époque, les modèles étaient utilisés pour construire des interfaces utilisateur. L'essor s'est poursuivi jusque dans les années 90, les recherches de Jennifer Tidwell clôturant la décennie. L'intérêt scientifique s'est poursuivi jusque dans les années 2000.
L'intérêt général pour les langages de modèles pour la conception d'interfaces utilisateur a de nouveau augmenté avec l'ouverture de Yahoo! Design Pattern Library en 2006 [9] avec l'introduction simultanée de Yahoo! Bibliothèque d'interface utilisateur ( bibliothèque YUI en abrégé). L'introduction simultanée visait à permettre une conception plus systématique que les simples composants fournis par la bibliothèque d'interface utilisateur.
Le Material Design de Google a été en 2014 le premier à être qualifié de « langage de conception » par la firme (la version précédente s'appelait « Holo Theme »). Très vite, d’autres ont emboîté le pas.
Les défis techniques des projets Web à grande échelle ont conduit à l'invention d'approches systématiques dans les années 2010, notamment BEM [10] et Atomic Design. Le livre sur Atomic Design [11] a contribué à populariser le terme « Design System » depuis 2016. Le livre décrit une approche pour concevoir des mises en page de produits numériques d'une manière basée sur les composants, ce qui les rend évolutifs et faciles à mettre à jour.
Différence entre les langages de modèles, les systèmes de design et les kits d'interface utilisateur
[modifier | modifier le code]Un langage de modèles permet à ses modèles d'exister sous de nombreuses formes différentes - par exemple, un formulaire de connexion, avec un champ de saisie pour le nom d'utilisateur, le mot de passe et des boutons pour se connecter, s'inscrire et récupérer le mot de passe perdu est un modèle, peu importe si les boutons sont verts ou violets. Les modèles sont appelés modèles précisément parce que leur apparence visuelle peut différer, mais les similitudes fonctionnelles et leur relations (appelée configuration) restent les mêmes. Cependant, un langage de modèles comporte toujours un ensemble de directives visuelles contenant des couleurs et une typographie spécifiques. La plupart des systèmes de design permettent de configurer les éléments d'un langage de modèles (via ses modèles) en fonction des besoins.
Un kit d’interface utilisateur est simplement un ensemble de composants graphiques, sans règles explicites fournies pour son utilisation.
Résumé
[modifier | modifier le code]Un système de design comprend divers composants, modèles, styles et lignes directrices qui aident à rationaliser et à optimiser les efforts de conception. Les facteurs critiques à prendre en compte lors de la création d'un système de design incluent la portée et la capacité à reproduire les projets ainsi que la disponibilité des ressources et du temps. Si les systèmes de design ne sont pas correctement mis en œuvre et entretenus, ils peuvent devenir désorganisés, rendant le processus de conception moins efficace. Toutefois, lorsqu’ils sont bien mis en œuvre, ils peuvent simplifier le travail, rendre les produits finaux plus cohérents et permettre aux concepteurs de relever des défis UX complexes[12].
Notes et références
[modifier | modifier le code]- Will Fanguy, A comprehensive guide to design systems, Invision, (lire en ligne)
- (en) « Design System - App Design and UX guidelines to build top mobile apps », GoodBarber (consulté le )
- « Everything you need to know about Design Systems »,
- « Lightning Design System »
- (en) « Material Design », Material Design (consulté le )
- « Homepage – Carbon Design System »
- « Homepage – Fluent Design System », Microsoft
- Yesenia Perez-Cruz, Expressive Design Systems, Jeffrey Zeldman, (ISBN 978-1-937557-85-0), p. 4
- (en-US) « Yahoo! Design Pattern Library », Creative Commons, (consulté le )
- (en) « 'Why BEM?' in a nutshell / DECAF Blog », 'Why BEM?' in a nutshell / DECAF Blog, (consulté le )
- Brad Frost, Atomic design, Massachusetts, (ISBN 978-0-9982966-0-9, OCLC 971562254, lire en ligne)
- (en) Fessenden, « Design Systems 101 », Nielsen Norman Group, (consulté le )
Liens externes
[modifier | modifier le code]- What is a Design System? par Robert Gourley
- Design Patterns
- Design Systems Gallery