Le concept de design system (système de design) n’est pas novateur en soi, mais récemment ces systèmes gagnent en popularité dans le design d’interface utilisateur (UI), en grande partie grâce aux liens intimes avec le développement web / mobile et à l’univers du développement de produit; domaines plus matures dans le component thinking.
Une double casquette de designer et de développeur
Cet article trouve son origine dans une activité de fond que j’exerce ici, chez apptitude. Où nous construisons et maintenons notre propre bibliothèque de composants nommée TACL (plus à ce sujet dans un article à paraître prochainement). L’objectif primaire de cette bibliothèque est de réduire les heures passées à coder des composants d’interface utilisateur à partir de zéro entre différents projets.
Bien que la TACL soit fondamentalement un outil de développement, nous pouvons nous poser la question dans quelle mesure cette bibliothèque-maison remplit les critères, décrits par la suite, d’un système de design fonctionnel. Puis, par la suite, comment nous pouvons utiliser celle-ci pour améliorer notre processus de design.
Portant la double casquette de designer UI et de développeur, je suis toujours à la recherche de moyens pour rapprocher ces univers parfois disparates que sont le design et le développement. À cet égard, les systèmes de design réduisent en partie cet écart en amenant certains principes directeurs du développement web dans le monde du design digital. Monde qui depuis l’aube du web 2.0, ( aux alentours du tournant du millénaire, parce que soyons honnêtes tout ce qui est antérieur à cette période c’est la préhistoire) tente de rattraper son contemporain plus tangible : le design de produit (product design).
Pourquoi s’intéresser aux systèmes de design
La conception que les designers sont purement des animaux visuels est une idée reçue établie depuis longtemps mais erronée. Bien que ce soit un aspect important voir essentiel du design, de nombreux outils et techniques fonctionnent très bien, voir mieux sans élément visuel. Prenons pour exemple le wireframing où le designer libéré des distractions visuelles peut se concentrer exclusivement sur le fonctionnement, le workflow ou encore l’expérience utilisateur de sa création.
Cependant, la manière dont nous approchons d’ordinaire les projets en tant que designer est toujours intimement lié à une façon visuelle de travailler. Pour chaque projet, le design est fait sur mesure et cela prend du temps, parfois beaucoup de temps. Notamment parce que le designer se retrouve à faire des tâches répétitives. Ceci a comme implication de rendre le design onéreux.
Qui plus est s’il n’existe pas une source de vérité unique le design est impossible à maintenir. Une charte graphique et la définition d’une identité visuelle sont un bon début, mais l’idée ici est de considérer le design dans son intégralité. Réfléchir par exemple à la maintenance des diverses interactions ou encore de la navigation.
Dans l’optique d’envisager une « maintenabilité » du design, nous pouvons et devrions en tant que designers nous inspirer de la notion de single source of truth existante dans le développement web.
« The practice of structuring information models and associated data schema such that every data element is stored exactly once. » – someone on wikipedia
Le questionnement sur les systèmes de design a donc deux objectifs concrets; libérer du temps précieux au designer, qui ne passera plus ce temps à designer une multitude affolante de boutons, mais pourra mettre au service du projet ses compétences qui valoriseront davantage le produit final et aussi mettre en place une systématique qui rendra le design d’un projet extensible et évolutif.
Principes et caractéristiques d’un système de design
Pour commencer deux définitions parmi tant d’autres que l’on trouve sur le web:
« A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience. » – Nathan Curtis
« A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. » – Design Systems Handbook by Invision
Le manque d’homogénéité entre les définitions est l’indicateur le plus éloquent de l’état actuel des systèmes de design dans l’industrie, ils sont en pleine puberté. Ce qui m’amène à vous proposer ma propre définition :
Un ensemble de modules composables, collés entre eux à l’aide de standards, principes et d’intégrité esthétique.
Voilà donc le moment de rentrer dans le vif du sujet en discutant trois constituants à mon sens essentiels à chaque système de design.
Des standards
Un système de design pour pouvoir être applicable et permettre d’apporter la plus-value souhaitée doit se doter de standards pour les raisons suivantes:
- Les standards sont la colonne vertébrale de tout système
- Les standards nous guident et nous aident à imposer une cohérence, une uniformité
- Les standards d’un système de design peuvent inclure; conventions de nomination, patterns pour donner un retour utilisateur, ou directives pour l’accessibilité
Une intégrité esthétique
« How well an app’s appearance and behavior integrate with its function. » — Apple
L’aspect visuel adressé précédemment est aussi un élément essentiel d’un système de design. Mais cette notion ne doit pas simplement être considérée comme une façade mais bien comme le rapport délicat et harmonieux entre l’apparence et la fonctionnalité.
Ou exprimé autrement, un élément qui ressemble à un bouton devrait agir comme un bouton.
- Nécessité d’avoir une consistance globale aussi bien qu’interne
- Les attentes de l’utilisateur vis-à-vis d’un aspect visuel doivent être respectées
- La consistance intrinsèque du système doit être maintenue, notamment sur des éléments comme le jeu de couleurs, les animations, l’espacement, etc…
- L’intégrité esthétique doit respecter la marque et participe à sa création ainsi qu’à la diffusion de ses valeurs
La « composabilité »
Dans le design industriel et de produits, le principe du design modulaire est répandu. Les voitures, les bâtiments, une chaise de bureau sont tous construits en pièces de composants qui peuvent être combinés et assemblés pour créer des variations quasi illimitées de produits.
En 2013, Brad Frost a introduit ce concept dans l’univers du design d’interface au moyen de l’Atomic Design et de ses principes. L’idée suggère une construction en partant depuis les plus petits composants imaginables, les atomes (p.e. champs, liens, texte…) qui peuvent être assemblés en molécules puis en organismes pour créer modules, pages ou écrans.
Au coeur de ce concept constituant d’un système de design, se trouve l’idée qu’en se focalisant sur l’intégration de bonnes pratiques (en design visuel, en accessibilité, en responsive, etc. ) et en les emballants individuellement, nous pouvons créer des blocs de construction solides.
Exemples connus et reconnus
Pour imager les quelques points mis en avant précédemment, voici quelques exemples de système de design :
Commençons peut-être avec le plus connu et le plus utilisé parmi les systèmes de design, celui créé par Google, le Material Design.
Un autre exemple auquel vous avez probablement déjà été confronté sans vous en rendre compte, le système de design créé et utilisé par Airbnb.
Et pour finir un exemple plus générique d’un système de design qui coche les cases des principes et caractéristiques abordées précédemment : LEGO.
Trois mythes concernant les systèmes de design
Pour étudier et démystifier les effets liés à la mise en place de systèmes de design, nous allons examiner les trois mythes suivants :
Affranchi du fardeau que représente le travail fastidieux du pousse-pixel, les designers se retrouvent libérés dans leur quotidien pour accorder plus de temps et d’énergie aux tâches qui mènent à créer de véritables projets fabuleux.
Les systèmes de design devraient être construits et créés pour être adaptables permettant de faire des ajustements progressivement et projet par projet.
Les systèmes de design devraient dynamiser les designers et réduire le fossé de collaboration (entre designers et développeurs).
L’avis avisé de Jean, l’un de nos développeurs
Pour conclure cette thématique, une brève mise en perspective de l’évolution des systèmes de design en comparaison avec l’évolution du développement informatique faite par l’un de nos développeurs, Jean.
Comme on a pu le voir, le rôle crucial du design dans les apps web est relativement récent. Le design gagnant en importance vers la fin des années 2000 avec ce qui était appelé le Web 2.0, l’explosion des SaaS et des PaaS.
Si l’on prend un peu de recul et que l’on considère le développement web, c’est un non sens d’utiliser du HTML et des browsers pour intégrer les aspects GUI (graphic user interface). Mais, ceci est devenu un standard de facto avec l’avénement d’Internet et des Cloud based SaaS et PaaS qui a complètement changé la manière de publier et de distribuer des softwares.
Parallèles entre designers et développeurs
Les challenges que les designers rencontrent aujourd’hui peuvent, dans une certaine mesure, être comparés aux défis que les ingénieurs en informatique rencontraient lorsqu’ils devaient construire des blocs au-dessus d’un langage machine extrêmement limité et ensuite créer des langages de haut niveau, des abstractions, des modèles mais aussi des moyens de collaborer et d’organiser le travail.
Le fossé entre le travail de développeur et de designer va être réduit avec la transformation de ce que nous pouvons appeler le design traditionnel, fait avec des software CAD (computer aided design), en faveur de nouveaux processus et outils qui tendent à être plus descriptifs, versionnés, constitués et maintenus de manière similaire à du code informatique.
D’un point de vue plus artistique, ce ne serait pas une surprise que des standards visuels et des écoles esthétiques émergent dans le design digital, de manière analogue à l’architecture qui a façonné ses propres codes et dogmes.
Sources et éléments pour approfondir le sujet
- [A comprehensive guide to design systems – Will Fanguy – Invision ]
- [The full-stack design system – Emmet Connolly – Intercom]
- [Design systems Handbook – Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield – designbetter.co]
- [Tout savoir sur les Systèmes de Design – Audrey Hacq – Medium]