Agence Design System : de la création des composants à l’implémentation technique

Vous cherchez à rationaliser et à accélérer le développement de vos produits digitaux ? Vous souhaitez assurer une expérience utilisateur (UX) uniforme à travers tous vos outils ? Vous êtes au bon endroit.

Vos enjeux et besoins en DS

Pourquoi mettre en place un Design System ?

Comment créer son design system ?

La multiplication de vos supports digitaux induit un besoin indispensable de cohérence et d’harmonisation de votre identité visuelle . Vous avez besoin que votre charte graphique et votre expérience utilisateur soient conformes à vos attentes et à votre marque.

Pour répondre à ce besoin, le Design System existe ! C’est une collection structurée de styles guides, iconographies, graphiques, patterns et règles qui visent à guider la conception de votre produit de manière cohérente et scalable. Il s'agit essentiellement d'un kit de construction qui aide toutes les équipes (product owner, UX, UI, développement, marketing…) à concevoir et développer des produits et des applications de manière plus efficace et uniforme. Cela va permettre de fournir un langage visuel et des systèmes de composants réutilisables pour vos équipes.

Que vous soyez une entreprise avec beaucoup de supports digitaux ou une entreprise qui se lance dans la création d’un produit, mettre en place un Design System est une décision judicieuse. Vous garantissez ainsi une homogénéisation de votre identité visuelle sur tous vos supports ainsi qu’une amélioration de votre productivité. Vos collaborateurs sont donc libres et autonomes pour piocher les composants nécessaires à leurs projets !

  • Améliorer la communication entre les services UI & Dev

    Il définit un vocabulaire commun et simplifie la coordination des actions entre les différents services.

  • Accroître significativement la productivité des équipes

    Il accélère les échanges et l’accès aux ressources.

  • Avoir une expérience utilisateur harmonisée

    Il améliore et harmonise la qualité finale de l'expérience utilisateur.

  • Réduire les coûts dans la durée

    Il centralise la conception, évite les doublons et fait économiser de l'argent dans la durée.


“ Créer un Design System avec des Design Tokens est un investissement stratégique qui permet de garantir la qualité, la cohérence et l'efficacité du design à grande échelle ! “

Fabien Pasquet
Développeur JavaScript Fullstack

Notre savoir-faire pour le Design System

Les étapes de conception de votre Design System

Notre équipe de Designers et Développeurs sont des experts de la création de Design Systems flexibles et évolutifs. Nous ne nous contentons pas de le créer, nous sommes à vos côtés pour son implémentation technique, son déploiement et sa maintenance. De l'audit initial à la formation de vos équipes, en passant par la réalisation d'une bibliothèque de composants réutilisables et sa documentation, nous offrons un accompagnement complet. 

Notre objectif ? Vous rendre autonome tout en veillant à ce que le Design System réalisé continue de répondre à vos besoins évolutifs.

  • Audit et analyse de l’existant

    Afin d’établir la meilleure stratégie, nous démarrons par une analyse de l’existant. Pour cela nous cartographions votre écosystème digital, nous analysons les données de vos sites existants et on s'entretient avec vos collaborateurs.

  • Définition du besoin

    Nous définissons ensemble votre besoin et consultons chaque service pour comprendre ses enjeux.

  • Production de la librairie de composants UI / UX

    Nous concevons les éléments dont vous avez besoin en suivant le principe d’Atomic Design : déclinaison de votre identité et vérification de l'accessibilité, réalisation des librairies et de leur contenu (icônes, grille, standards, tokens…). Nous nous assurons de vous fournir un fichier Figma structuré et intégrant les dernières avancées logicielles.

  • Création des Design Tokens

    Nous concevons et rationalisons les Design Tokens. Ces valeurs atomiques permettent de stocker des éléments de design visuel comme les couleurs, les tailles de police, les espacements, etc. Ces tokens permettent ensuite d’avoir une identité cohérente à travers différents produits et plateformes. Nous évangélisons également son utilisation auprès de vos développeurs et designers.

  • Implémentation technique de la librairie

    Notre équipe de développeurs développe la bibliothèque de composants complète sur Storybook et implémente les règles d’usage.

  • Livrables complets

    Nous fournissons une documentation exhaustive et détaillée pour l’utilisation de tous les composants, des règles de production et des bonnes pratiques.

    Documentations
    Documentation accessible pour tous (Designers, Dev, PM…) incluant toutes les méthodes de conception, de design (styleguide), les bonnes pratiques, les contraintes etc.

    Librairie Design Figma
    Intègre tous les tokens, composants, grilles, assets.

    Librairie Tech Storybook
    Intègre les éléments Figma en version technique.

  • Formation de vos équipes

    Notre objectif est de créer un Design System qui soit facilement évolutif et qui puisse être pris en main par la suite par vos équipes techniques, UI et UX. Nous formons donc vos consultants à son utilisation afin de garantir une maintenance et une prise en main optimale.

Les outils et langages utilisés par nos UI Designers et Développeurs

Pour donner vie à votre Design System, nous utilisons les outils les plus performants du marché. Figma, Storybook ou encore Style Dictionary, nous disposons des technologies nécessaires pour construire, tester et déployer votre UI Kit.

  • Nos Designers utilisent Figma pour créer les éléments UI du Design System

    Figma

    Nous utilisons principalement Figma pour créer des interfaces utilisateur, des prototypes, et pour documenter les éléments du Design System.

  • Nos développeurs utilisent Storybook pour créer les bibliothèques de composants

    Storybook

    Nous utilisons Storybook pour développer et créer des bibliothèques de composants UI de manière isolée pour React, Vue, Angular, et bien d'autres.

  • Nos consultants sont des experts de Zeroheight

    Zeroheight

    Comme Storybook, ZeroHeight permet de créer facilement une documentation pour Design Systems.

  • Nous formatons les propriétés de Design avec Style Dictionary

    Style Dictionary

    Nous utilisons Style Dictionary pour automatiser la transformation et le formatage de propriétés de design (couleurs, tailles de typographie, espacements, etc.) en formats utilisables par différentes plateformes (iOS, Android, web, etc.).

  • PostCSS est notre allié pour définir les Design Tokens

    PostCSS ou CSS-in-JS

    Pour définir les styles et les Design Tokens, nous utilisons des outils tels que PostCSS, SCSS, avec l'utilisation de la méthodologie BEM, ou du CSS-in-JS. Nous utilisons également parfois les classes utilitaires et tailwind CSS.

  • Nos développeurs utilisent Web Components pour développer un Design System.

    Web Components ou bibliothèques (React, VueJS…)

    Selon votre environnement nous développons en utilisant des composants web standards, ou en sélectionnant une bibliothèque spécifique telle que React ou VueJS.

  • GitHub nous aide à collaborer et suivre le projet.

    GitHub

    GitHub est notre outil de versioning de code et de collaboration.

  • Nous sommes des experts TypeScript

    TypeScript

    Nous utilisons TypeScript car il apporte une sécurité typée au développement des éléments du kit UI, ce qui réduit significativement les erreurs de runtime et améliore la maintenabilité du code.

Nos atouts et spécialités au service de votre projet

  • Maîtrise de la méthode Atomic Design

  • Une multi-expertises : UI, UX et Tech

  • Une approche sur mesure

Nos modes d'intervention

Nos modes d’intervention en implémentation d’un Design System

Nous proposons un service sur mesure et adapté en fonction de vos besoins.

Nous pouvons vous accompagner sur la conception de A à Z de votre Design System ou simplement sur certaines prestations.

Nous sommes en mesure de créer une équipe dédiée à sa production complète ou uniquement à l’accompagnement de l’un de nos experts selon votre besoin. Cela peut être simplement sur la conception UI / UX ou sur la l’implémentation technique des composants.

Nos experts sont à votre écoute pour discuter de votre besoin.

Améliorez et harmonisez votre expérience utilisateur dès maintenant !

Demander un rendez-vous
Nos clients

Nos références clients autour du Design System

  • Comment faire évoluer un produit digital grâce à une refonte ?
  • Refonte d’une application : méthode et projet

Retour d'Expérience - Le Design System d'iGraal

Les articles de nos experts en Système de Design

Les articles de nos experts autour du Design System

FAQ Design System

Nous répondons à vos questions les plus fréquentes sur la conception d’un Design System

  • Un Design System est-il seulement utile pour les grandes entreprises ?

    Absolument pas ! Toute organisation peut bénéficier d'un Design System, quelle que soit sa taille. Il aide à maintenir la cohérence et à accélérer le développement dès les premiers stades du projet.

  • Combien de temps faut-il pour créer un Design System ?

    Cela dépend de la complexité de votre écosystème digital. Un projet peut aller de quelques semaines à plusieurs mois. Notre équipe évalue vos besoins pour fournir un calendrier précis.

  • Notre Design System peut-il évoluer ?

    Celui-ci est conçu pour être évolutif. Nous vous accompagnons dans cette démarche, en veillant à ce qu'il puisse s'adapter et grandir avec votre entreprise.

  • Quel est le coût de création et d’implémentation technique d’un Design System ?

    Le coût dépend de la complexité et de l'étendue du système. Nous offrons des consultations pour comprendre vos objectifs et vous fournir une estimation personnalisée qui reflète la valeur ajoutée par un système bien conçu.