Aller directement au contenu

Design System

La cohérence de votre écosystème digital

Design System

Le Design System est notre réponse pour tous nos clients à la recherche d’un écosystème digital cohérent.

Le Design System est la garantie d’un écosystème digital offrant une homogénéité visuelle et fonctionnelle à tous les produits numériques : sites Web, espaces clients, applications mobiles, solutions SAAS…

Le Design System centralise les éléments de conception, tels que les composants interactifs, les styles, les normes à respecter, les bonnes pratiques et les chartes. Les systèmes de conception que nous élaborons facilitent le processus de développement et réduisent les efforts de conception et de développement.

Ils permettent des mises à jour rapides et des itérations continues indispensables aux cycles de développement Agiles.

Une question ? Un projet ?

Contactez-nous

Nous créons votre Design System en 4 étapes

  1. Design System : cadrage et stratégie

    Cadrage et stratégie

    Nous définissons le périmètre de votre Design System avec vos équipes

  2. Design System : librairie de composants

    Librairie de composants

    Nous créons la librairie de composants graphiques dans Figma

  3. Design System : Documentation

    Documentation

    Nous rédigeons la documentation et les processus d’utilisation du Design System

  4. Design System : formation

    Formation

    Nous formons vos équipes à la prise en main de leur Design System

Votre Design System

Les 4 étapes clés

Design System : cadrage et stratégie

1. Cadrage et stratégie

Nous créons des Design Systems sur mesure qui répondent à vos objectifs

Dès l’avènement des Design Systems nous avons compris que la mise en place d’un système de conception est avant tout un enjeu de transformation des processus de conception et d’ambition de marque.

Le cadrage et la définition de votre stratégie de conception sont des étapes clés de la création de votre Design System. Elles permettent de créer les fondations de votre Design System en collaboration avec vos équipes opérationnelles, marketing et branding.

Définir un Design System

La phase de cadrage en detail

Définir un Design System qui réponde à vos enjeux

  • Les objectifs : quels sont les objectifs à l’échelle de votre entreprise ?
  • Les utilisateurs : qui sont les principaux utilisateurs ? Designers ? Développeurs ? PO ?
  • La marque : quels éléments de design souhaitez-vous standardiser ?
  • Les processus : comment intégrer le Design System dans vos processus de travail actuels ?
  • Évaluation : quels indicateurs mettre en place pour mesurer son impact ?
  • Formation : comment faciliter l’adoption du Design System
Design System : librairie de composants

2. La librairie de composants

Répertorier, standardiser et structurer vos composants interactifs

Les consultants spécialistes en Design UI et en design d’interaction réalisent avec vos équipes un inventaire des composants interactifs utilisés dans l’ensemble de votre écosystème digital.

Cet inventaire permet de définir la structure de votre librairie de composants de votre Design System.
 Nous utilisons la méthode du Design Atomique pour définir la structure de la librairie de composants dans Figma.

Une fois les composants créés nous définissons des solutions techniques tiers pour synchroniser les composants graphiques créés dans Figma avec les composants front-end.

Consultant spécialiste en Design UI

La création d’une librairie de composants graphiques

Les composants graphiques dans Figma et votre framework front end

  • Fondations : couleurs, polices, icônes, grilles, règles d’espacement, principes de conceptions, normes
  • Composants d’interface : boutons, liens, sélections, champs de saisie
  • Blocs de contenus : header, footer, sections de pages, tableaux, formulaires
  • Templates : des exemples de pages qui utilisent les composants du Design System
  • Synchronisation : utiliser un connecteur pour synchroniser les composants Figma avec vos composants front-end
Design System : documentation

3. Documentation & processus

Documenter c’est adopter

Chez Usabilis nous avons la conviction qu’un Design System fonctionne lorsqu’il favorise la collaboration entre les équipes produits, les designers et les développeurs.

Chaque Design System doit être créé sur mesure et en fonction de votre workflow.

La documentation et le processus associé définissent des règles simples et partagées pour utiliser et maintenir votre Design System sur le long terme.

Documenter un Design System

Comment bien documenter un Design System ?

  • Outils : Storybook et Zeroheight sont les deux outils de documentation que nous recommandons
  • Modèle : des modèles de page pour faciliter la contribution et l’apprentissage de la documentation
  • Interactions : visualiser les interactions depuis la documentation sans avoir besoin d’aller dans Figma
  • Exemple de code : ajouter les des codes snippets dans la technologie front end cible
  • Versioning : définir les règles de fréquences de mise à jour et de versioning de la documentation
  • Pilotage : créer un organe de pilotage de maintien de la qualité du Design System. Mettre en place des indicateurs pour mesurer l’adoption
Design System : formation

4. Formation & évangélisation

Le passage de relais en douceur

Au moment de lancer la première version de votre Design System, nous formons vos équipes.

Notre centre de formation et nos consultants / formateurs vous propose un plan de formation adapté aux différents utilisateurs du Design System. Cette formation permet de prendre en main le Design System au travers de cas pratiques réels.

Par la suite, nous pouvons coacher vos équipes pour continuer d’évangéliser le Design System et augmenter son taux d’adoption.

Formateur Design System

Nos avantages

  • Formation initiale : formation intra entreprise avec une alternance théorie / mise en pratique
  • Coaching projet : suivi de vos équipes lors des premières utilisations du Design System
  • Aide au pilotage : participation aux organes de pilotage du Design System
  • Évaluation continue : suivi des indicateurs de performance et recommandations d’amélioration

Témoignage client Votre satisfaction

Logo Groupe AtlanticEmmanuel TERRIEN

Heads of design : Products & UX
Groupe Atlantic

Usabilis nous accompagne sur l’amélioration de nos processus de design et de l’ergonomie de nos produits. Grâce à leur accompagnement et expertise nous avons créé une plateforme de design unique et partagé par toutes les entités du groupe pour l’ensemble de nos produits connectés.