2020 - 2022
J'ai pu au cours de mon alternance participé à l'élaboration d'un design système complet nommé "Toga".
L'objectif était de construire une bibliothèque de guides et de références au service de la construction de standard d'expérience utilisateur au sein des produits. Facilitant ainsi le travail des designers, des développeurs et des différents stakeholders. Le tout en améliorant la collaboration et en garantissant une cohérence à travers l'expérience proposées.
La mise en place de Toga a rendu possible le rebrand des produits de l'écosystème en seulement quelques jours au lieu de plusieurs semaines.
La construction d’une librairie comportant l'ensemble des éléments sur Figma ainsi qu’une documentation de l'ensemble des guidelines sur DSM, outil dédié au design système.
Engineering
Développement de l’ensemble des composants en javascript en se basant sur une librairie déjà existante, "Prime react" afin de gagner en productivité.
La construction d’une librairie comportant l'ensemble des éléments sur Figma ainsi qu’une documentation de l'ensemble des guidelines sur DSM, outil dédié au design système.
Engineering
Développement de l’ensemble des composants en javascript en se basant sur une librairie déjà existante, "Prime react" afin de gagner en productivité.
Développement de l’ensemble des composants en javascript en se basant sur une librairie déjà existante, "Prime react" afin de gagner en productivité.
Engineering
Développement de l’ensemble des composants en javascript en se basant sur une librairie déjà existante, "Prime react" afin de gagner en productivité.
Fondations
La première étape dans l’élaboration du système à été de définir les fondations. Celles-ci comprennent les éléments de base qui seront réutilisés et servent de guidelines dans l'ensemble du design système. On y retrouve notamment les couleurs, les fonts ou encore les icônes.
Ces éléments possèdent chacun un token qui leur est propre permettant de les identifier facilement. Cela permet entre autre de faciliter la collaboration, mais aussi de rendre le système flexible. Il devient alors très simple d’y apporter des modifications, en changeant la propriété associée à un token.
Fondations
La première étape dans l’élaboration du système à été de définir les fondations. Celles-ci comprennent les éléments de base qui seront réutilisés et servent de guidelines dans l'ensemble du design système. On y retrouve notamment les couleurs, les fonts ou encore les icônes.
Ces éléments possèdent chacun un token qui leur est propre permettant de les identifier facilement. Cela permet entre autre de faciliter la collaboration, mais aussi de rendre le système flexible. Il devient alors très simple d’y apporter des modifications, en changeant la propriété associée à un token.
Fondations
La première étape dans l’élaboration du système à été de définir les fondations. Celles-ci comprennent les éléments de base qui seront réutilisés et servent de guidelines dans l'ensemble du design système. On y retrouve notamment les couleurs, les fonts ou encore les icônes.
Ces éléments possèdent chacun un token qui leur est propre permettant de les identifier facilement. Cela permet entre autre de faciliter la collaboration, mais aussi de rendre le système flexible. Il devient alors très simple d’y apporter des modifications, en changeant la propriété associée à un token.
Une fois les fondations définies, la construction des différents composants peut débuter. Ils nous permettrons par la suite de créer des paternes plus complexes et de bâtir des interfaces.
La librairie de composants à été construite en se basant sur le principe"Atomic design": Partant de l'élément le plus simple tel qu'un bouton (atome), il permet de bâtir par la suite des structures plus complexes (molécules et organismes) et in fine de construite des pages complètes. Le tout afin d'assurer une cohérence dans l'expérience proposée en adoptant une démarche systémique, facilitant également la gestion du responsive.
Une fois les fondations définies, la construction des différents composants peut débuter. Ils nous permettrons par la suite de créer des paternes plus complexes et de bâtir des interfaces.
La librairie de composants à été construite en se basant sur le principe"Atomic design": Partant de l'élément le plus simple tel qu'un bouton (atome), il permet de bâtir par la suite des structures plus complexes (molécules et organismes) et in fine de construite des pages complètes. Le tout afin d'assurer une cohérence dans l'expérience proposée en adoptant une démarche systémique, facilitant également la gestion du responsive.
Une fois les fondations définies, la construction des différents composants peut débuter. Ils nous permettrons par la suite de créer des paternes plus complexes et de bâtir des interfaces.
La librairie de composants à été construite en se basant sur le principe"Atomic design": Partant de l'élément le plus simple tel qu'un bouton (atome), il permet de bâtir par la suite des structures plus complexes (molécules et organismes) et in fine de construite des pages complètes. Le tout afin d'assurer une cohérence dans l'expérience proposée en adoptant une démarche systémique, facilitant également la gestion du responsive.
Développement
En parallèle il fut nécessaire de s’assurer avec les développeurs de la fidélité des composants par rapport au designs qui avaient été conçus. Qu’il s'agisse de la UI, du comportement, des propriétés utilisées ou encore de l'accessibilité.
Ce processus à pu être facilité grâce à l’utilisation de StoryBook, un outil permettant de développer les composants de façon isolée, donnant la possibilité aux designers d’avoir accès en permanence à l'ensemble des composants développés ainsi qu'aux différentes informations relatives au code.
Développement
En parallèle il fut nécessaire de s’assurer avec les développeurs de la fidélité des composants par rapport au designs qui avaient été conçus. Qu’il s'agisse de la UI, du comportement, des propriétés utilisées ou encore de l'accessibilité.
Ce processus à pu être facilité grâce à l’utilisation de StoryBook, un outil permettant de développer les composants de façon isolée, donnant la possibilité aux designers d’avoir accès en permanence à l'ensemble des composants développés ainsi qu'aux différentes informations relatives au code.