Lors de la mise en place de projets web, de nombreux acteurs dépendants les uns des autres interviennent, et bien souvent, sans vraiment communiquer entre eux. Designers en tout genre, équipes de programmeurs, etc. Plus le nombre d’intervenants est important, plus la mise en commun de leur travail est difficile à gérer.
Surviennent alors des manques d’éléments, des incohérences au niveau du design, mais aussi des décalages entre ce qui est attendu par certaines équipes et ce qui est proposé par les autres. Les difficultés auxquelles font face les entreprises en phase de digitalisation sont nombreuses, et peuvent vous faire perdre un temps considérable, ainsi que beaucoup d’argent.
Heureusement pour vous, il existe une solution très intéressante, permettant une collaboration optimale entre tous les acteurs de la conception d’un projet web : le design system.
Qu'est-ce qu'un design system ?
Un design system est un procédé dédié à la coopération entre les designers et les programmeurs d’une interface. Il s’agit d’une plateforme collaborative sur laquelle sont mis en lien tous les professionnels qui œuvrent pour l’élaboration du projet. L’objectif d’un tel dispositif est de leur permettre de réunir et de standardiser tous les composants dont ils ont besoin au sein d’un seul et même système. On y retrouve alors un grand nombre d’éléments, qui, associés les uns aux autres, forment petit à petit des pages web.
Le design system sert également de guide à tous les intervenants, en leur permettant d’axer leurs réalisations autour des mêmes normes techniques et des mêmes règles (nomination des fichiers, guide de style, conventions, etc.).
En somme, le design system peut être comparé à une bibliothèque évolutive d’éléments dans laquelle chaque équipe peut se servir pour alimenter son travail : on parle ici de pictogrammes, de bouts de code, de typographies, de codes couleur, etc.
L’efficacité de ce procédé récent est telle que de nombreuses firmes l’ont déjà mis en place. C’est par exemple le cas d’Airbnb, Google, Apple et Microsoft.
L'atomic design, un concept digital important
Comme vous l’avez compris, l’un des principaux objectifs du design system est de mettre en place une sorte de bibliothèque comprenant le plus grand nombre d’éléments possible, de sorte à pouvoir les réutiliser ensuite dans les interfaces. Dans cette optique, il est important de faire apparaître tous les composants de votre page, du plus petit pictogramme, jusqu’aux pages et à leur imbrication. On parle alors d’Atomic design.
L’Atomic design, c’est une approche qui consiste à comparer les composants d’une interface aux atomes du corps humain. Concrètement, cela revient à voir une page web comme un ensemble de particules, qui, liées les unes aux autres, finissent par former cette page web. Ces particules, qui correspondent aux éléments de design, sont classées en cinq catégories, détaillées sur l’image ci-dessous.
L’objectif de l’Atomic design ne s’arrête pas à l’élaboration d’une interface unique et vouée à rester telle qu’elle. Au contraire, l’intérêt de cette démarche est de pouvoir agencer et structurer chaque page de manière très rapide.
Pour mettre en place un design system qui s’appuie sur le concept d’Atomic design, Agily a répertorié pour vous les 3 étapes les plus importantes.
Les 3 étapes pour créer un design system
Étape 1 : fixer les objectifs du design system
La première chose à faire lorsque vous mettez en place un design system, c’est de définir pourquoi votre entreprise a besoin d’un tel dispositif. Il est important de répertorier les choses que vous souhaitez améliorer ou mettre en place dans votre stratégie digitale.
Au travers de l’analyse du comportement des visiteurs de votre site, de sondages ou même de questionnaires, vous pouvez facilement cibler ce que vos clients attendent de vos équipes techniques. Cette réflexion va vous permettre de concevoir un design system optimal, en adéquation avec vos besoins, ainsi que ceux de vos utilisateurs.
Bien évidemment, même si un design system vous permet de modifier vos plateformes web de manière simple et rapide, gardez en tête que chaque� changement doit être réfléchi et doit avoir un but bien particulier. Prenez garde de bien établir une stratégie avant chacune de vos modifications.
Étape 2 : définir les règles de style et de nomination
Afin de mettre vos équipes dans les meilleures conditions possibles, et d’assurer la cohérence entre le travail des designers et les attentes des programmeurs, il est important de standardiser votre design system avec des indications claires et précises.
D’abord, la priorité est sûrement de mettre en place un guide de style. Il s’agit d’un document regroupant les différentes règles de design à respecter pour chaque élément, à l’instar d’une charte graphique. Ce guide fait office de référence pour les intervenants artistiques.
De la même manière, il est primordial de fournir à vos équipes des indications sur la nomination des fichiers. De manière générale, un design system comporte un nombre important d’éléments. C’est pourquoi, à l’image d’une bibliothèque, il doit être ordonné et classifié, afin que chaque donnée soit facilement trouvable.
Un design system étant spécifique à chaque organisation, n’hésitez pas à ajouter d’autres instructions afin d’encadrer au mieux le travail réalisé. Par exemple, à propos de l’extension des fichiers, ou bien d’un fil conducteur que vous souhaitez voir apparaître tout au long de vos interfaces.
Étape 3 : créer la structure du design system
La troisième et dernière étape consiste à créer la structure de votre design system. C’est-à-dire qu’il faut désormais définir la disposition des différents composants au sein de chaque page. Que ce soit les boutons, les textes, les menus de navigation ou même les vidéos, tout doit être placé avant même d’être réalisé. Ce travail préalable a pour objectif d’assurer la conformité des dimensions de chaque élément.
Une fois toutes ces étapes complétées, votre design system sera prêt à l’emploi. Les différents intervenants pourront œuvrer ensemble de manière optimale, de sorte à concevoir votre site web ou votre application rapidement et de manière cohérente.
Si, finalement, vous souhaitez mettre en place un design system, notez qu’il existe de nombreux outils permettant la réalisation d’un tel projet. Le plus célèbre d’entre eux reste Figma, un dispositif dédié à la création d’interfaces web et mobiles, basé sur la collaboration en ligne de plusieurs intervenants. Si vous souhaitez tester Figma, il existe une offre gratuite permettant de créer jusqu’à trois projets actifs.
