Erwan Barbier
1 semaine
Projet de groupe
Figma
Notion
Organisation et valeurs
Dans le cadre d’un projet de Master, nous avons conçu un Design System pour accompagner la refonte des écrans de Steam. Nous avons commencé par définir son identité et ses valeurs qui sont d'avoir un système flexible, ouvert et inclusif.
Nous avons choisi un modèle contributif. Les équipes de développement peuvent participer à la définition des tokens, tandis que l’ensemble des équipes peuvent proposer, tester et intégrer de nouveaux composants.
Côté organisation, nous souhaitions fonctionner sans hiérarchie, dans un esprit holacratique. Les décisions étaient prises en fonction des besoins du design, avec la qualité du livrable comme priorité commune.
Nous avons d’abord audité les pages existantes de Steam, analysé les plateformes concurrentes et testé plusieurs pistes de direction artistique. Après avoir priorisé les tâches, nous avons posé les fondations du Design System, puis réalisé les premiers wireframes et écrans. Nous avons ensuite itéré sur les composants, les variables, les primitives et les écrans.
L'UI kit
Une fois la direction artistique établie, nous avons commencé à mettre en place les primitives du Design System, les fondations avec la typographie, les couleurs et les espacements.
Une fois les bases posées, c'est au tour des écrans et la création des composants de ceux-ci afin d'alimenter notre UI kit disponible sur Figma.
La documentation
Pour documenter le Design System, nous avons créé une page Notion où designers et développeurs peuvent retrouver les informations essentielles sur chaque composant, ses usages, ses spécifications techniques et les recommandations liées à l’accessibilité.
Dans la documentation, les Do et Dont permettent aux designers ainsi qu’aux développeurs de comprendre les différents comportements que le composant peut avoir en fonction du contexte.
Nous avons également mis l'accent sur la partie accessibilité de l'interface en respectant les règles de contrastes des WCAG.
Les écrans
Nous avons réalisé 2 modes d'affichage. Le mode Desktop et le mode Mobile. Pour cela, nous avons ajouté des modes dans nos variables afin de changer les tailles et masquer/afficher certains éléments à l’aide de booléens.
