maxine.design » Realisations » Printemps

Printemps

Contribution au design system Figma, avec la méthode de l'Atomic Design, suite à la récente refonte du site printemps.com

Le contexte projet

J’ai été sollicitée par User Adgents par le biais du collectif Nebuleuse Studio pour participer à l’alimentation du design system de Printemps, pour y ajouter les différents composants créés dans le cadre de la refonte du site printemps.com par User Adgents.

Le design system

Une partie du travail a été de basculer les nouveaux composants issus des maquettes de la refonte du webdesign dans le Design System de Printemps. Un fichier complexe qui permet de documenter tous les styles (couleurs, typographies, grille, ombres…) et tous les composants (ainsi que leurs déclinaisons) utilisés dans l’univers Printemps.

Les designers (mais aussi les développeurs ou product owners) viennent se référer à ce fichier pour faire évoluer les interfaces et s’assurer de la bonne utilisation des éléments.

Un beau travail a été effectué sur les éléments de formulaire, pour les unifier et assurer leur conformité en accessibilité, notamment au niveau des contrastes des couleurs et des tailles de texte.

Mobile first

User Adgents et Printemps ayant à cœur de travailler les versions mobile en premier pour s’adapter aux usages des utilisateurs, chaque composant dispose d’une version mobile et desktop bien adaptée.

Atomic Design

La construction du design system de Printemps requière la méthodologie de l’Atomic Design pour l’organisation des composants. C’est à dire qu’un composant est découpé en plusieurs partie : une page suit un template contenant des organismes, qui contiennent des molécule constitués de plusieurs atomes. Un peu comme des poupées russes !

Cette méthode permet d’assurer la cohérence graphique et fonctionnelle des composants, et facilite leur maintenance.

Un grand merci à Ornella, Andréa et Angélique pour cette belle collaboration !