Blog

9 exemples de Design Systems d’entreprises et d’institutions (édition 2023) 

Un design system est une collection de composants réutilisables, comprenant des normes claires, qui permettent de développer des produits, applications et services digitaux. 

Cet outil favorise la collaboration, l’efficacité et la cohérence graphique dans le cadre, notamment, de projets de développement de sites web, d’applications web, ainsi que de logiciels. 

Aujourd’hui, de plus en plus d’entreprises belges et internationales utilisent un design system. 

Dans cet article, découvrez des exemples de design systems de référence publiés par : 

  • Des entreprises comme Google, IBM, Proximus et Décathlon 
  • Des institutions publiques comme la Commission européenne, le gouvernement français, la Ville de Bruxelles 
  • Des acteurs du monde associatif comme l’ONE.

Exemples de Design Systems d’entreprises 

Le design system de Google – Material Design 

Material Design a été présenté pour la première fois en 2014 et il a depuis inspiré de nombreuses autres entreprises à adopter leur propre design system. En 2022, Google a publié la dernière version de son design system : Material 3.

Dans ce design system, vous pouvez retrouver :  

  • Un kit de démarrage 
  • Des outils de développement comprenant du code et de la documentation pour Android, Flutter (un kit pour développer des applications), ainsi que pour des sites webs
  • Des ressources pour les fondements qui constituent la base de toute bonne utilisation d’une interface, des normes d’accessibilité aux modèles essentiels de mise en page et d’interaction
  • L’ensemble des aspects visuels d’une interface utilisateur, comprenant la couleur, les espacements, les icônes, les animations, les formes et la typographie
  • Une bibliothèque de composants comprenant notamment les boutons, les menus, les checkbox, la barre de navigation, etc.

Consultez le design system Material Design de Google

Le design system d’IBM – Carbon Design System 

IBM a lancé Carbon Design System en 2014 avant tout pour ses besoins propres, tout en proposant une version open source afin que chacun puisse l’utiliser et y contribuer. 

Dans Cabon, vous retrouvez : 

  • Des lignes directrices à propos des couleurs, des icônes, des espacements, etc.
  • Un ensemble de composants
  • Des combinaisons réutilisables de composants et de modèles
  • Des ressources à l’usage de la communauté
  • La possibilité de contribuer à l’amélioration de Carbon en signalant des problèmes

Date de lancement : juin 2014 

Consulter le Design System : Carbon Design d’IBM 

Le Design System de Proximus

Lancé en 2019, le design system de Proximus comprend : 

  • Un kit de démarrage
  • Un ensemble de directives
  • Un accès à tous les composants du Thème de Proximus Pickx
  • Une liste de principes de base pour créer des produits numériques.
  • Une bibliothèque de composants pour créer des pages
  • Une bibliothèque d’éléments pour créer des formulaires
  • Des templates avec des combinaisons réutilisables de composants
  • De la visualisation de données
  • Des éléments utiles pour la création d’interfaces web.

Date de lancement : août 2019

Consultez le Design System de Proximus

Le Design System de Decathlon – Vitamin

Lancé en 2020, le design system de Decathlon (Vitamin) aide l’entreprise à construire une expérience utilisateur cohérente et de qualité à travers leurs différents écosystèmes.

Vitamin offre un ensemble d’outils et de composants, à la fois pour les designers et les développeurs sur les différents aspects suivant :

  • La marque Decathlon, avec son logo, l’utilisation du logo, la signature de la marque, etc.
  • L’ensemble de l’aspect digital que Decathlon
  • Comment utiliser correctement les designs de Decathlon sur les produits

Consulter le Design System Vitamin de Decathlon

Exemples de Design Systems d’institutions publiques

Le Design System de l’Union Européenne et la Commission Européenne

Lancée en 2021, la bibliothèque des composants Européens (ECL) est un guide complet contenant les éléments de design et les normes visuelles qui composent tous les sites web et applications gérés par la Commission européenne.

La bibliothèque contient l’ensemble des éléments suivants :

  • Une liste de directives à suivre tout au long du processus de création
  • Les composants représentant des regroupements simples d’éléments d’interface utilisateur (comme une étiquette, un champ de saisie et un bouton pour former un champ de recherche)
  • Des utilitaires comprenant des composants génériques qui peuvent être utilisés en dehors des composants
  • Des ressources contenant un glossaire et des outils web.

Date de lancement : avril 2021

Consultez le design system de l’Union européenne et de la Commission Européenne 

Le Design System du Gouvernement Français 

Lancé en 2021, ce design system a pour objectif d’unifier les différents sites web de l’État français avec un design cohérent.

Il se compose des différents aspects suivants :

  • Les fondamentaux comprenant les couleurs, les grilles et icônes, ainsi que les bases pour construire un site ou une application
  • Une bibliothèque composées de 30 composants
  • Un onglet communautaire regroupant des designers et des développeurs qui apportent leur expertise et leur support

Consultez le design system du Gouvernement Français 

Le Design system de la Ville de Bruxelles 

Lancé en juillet 2012, le design system de la ville de Bruxelles permet aux différents organismes et projets de la ville d’assurer une cohérence graphique.

Il se compose des différents points suivants : 

  • Les fondations comprenant les couleurs, les typographies, les logo, les icônes, les layouts et les hover/focus
  • Les composants comprenant la navigation, les boutons, les demandes, les tabulations, les filtres, les formulaires, les messages, ainsi que l’affichage des données.

Date de lancement : juillet 2021

Consultez le Design System de la Ville de Bruxelles

Le Design System de la Ville d’Anvers 

Lancé en 2017, le design system de la ville d’Anvers (Antwerp UI), a été mis en place pour aider à la création d’applications au sein de la ville d’Anvers. Il est aussi utile afin de s’assurer que les applications gérées par la ville respectent les normes d’accessibilité.

Antwerp UI se compose de différents éléments comprenant notamment :

  • Un kit pour débuter
  • Une liste de composants très complète, allant des simples couleurs jusqu’à la mise en page d’articles
  • Des patterns comprenant des ensembles de composants réutilisables notamment pour des formulaires ou pour la navigation.

Date de lancement : 2017
Consultez le Design System de la Ville d’Anvers.

Exemples de Design Systems du monde associatif

Design System de l’ONE

Le design system de ONE (Office de la naissance et de l’enfance) réalisé par Anais Digital a été lancé en février 2022. Cet outil permet aux équipes de l’ONE de construire une expérience cohérente à travers leurs différents écosystèmes.

Le design system de l’ONE se compose des éléments suivants :

  • Les fondations comprenant les couleurs, les typographies, les structures, les ombres et les logos
  • Les assets comprenant les icônes et un catalogue de photos
  • Les composants comprenant les éléments nécessaires pour une action (boutons, liens, etc.), des formulaires, des layouts, la navigation, les overlay et les indicateurs.

Date de lancement : février 2022

Consultez le design system de l’ONE

Pour créer le Design System de votre entreprise, contactez notre équipe d’experts !

Pourquoi utiliser un Design System ? 

Un design system permet de rationaliser le travail de design et de développement en fournissant un langage et un cadre de travail communs aux designers et aux développeurs. 

Un bon design system couvre tous les aspects du processus de design, de la typographie à la théorie des couleurs en passant par la mise en page et l‘expérience utilisateur (UX).

Un design system s’avère très utile lorsque :

  • Vos équipes design et de développement ne sont pas situées au même endroit 
  • Vos équipes design et de développement évoluent et changent avec le temps 
  • Vous êtes présents sur plusieurs plateformes, avec différentes technologies et vous souhaitez conserver une cohérence graphique 
  • La qualité de votre expérience utilisateur diminue 
  • Vos équipes recréent sans cesse des éléments de design ou de développement qui sont déjà existants.

Les avantages d’un design system 

  • Partage et collaboration : les équipes Produit, Design et Développement élaborent un langage commun qui est compréhensible par tous.tes. Cela contribue à améliorer considérablement la communication.
  • Efficacité : les composants sont créés une fois et sont ensuite conservés dans un même endroit. Il n’est donc plus nécessaire de les re-concevoir à chaque projet. La productivité augmente, les produits sont délivrés plus rapidement et les dépenses de design et de développement diminuent. 
  • Focus : Les designers ne doivent plus passer du temps dans la création d’interfaces. Ils peuvent se concentrer dans des projets créatifs et leurs domaines de spécialisation (User Research, conception de nouvelles fonctionnalités, etc.).
  • Cohérence et qualité : grâce à des actions d’interface clairement établies, plus faciles à traiter et à absorber sur le plan cognitif, les utilisateurs bénéficient d’une expérience fluide du produit.

Si vous souhaitez en savoir plus sur les design systems, prenez rendez-vous avec un de nos experts.

Ces articles devraient aussi vous intéresser

03/01/2023

Design system : pourquoi est-ce indispensable pour votre entreprise en 2023 ?

Posséder un design system est une solution qui permet de gagner du temps et de la productivité tout en gardant une cohérence dans ses produits digitaux. Dans cet article, nous vous expliquons en quoi consiste un design system,  les avantages qui y sont associés et comment  en créer une  version efficace et adaptée à votre entreprise.

10 Best Tools for Wireframes and Prototypes

12/08/2022

Les 10 meilleurs outils de création de wireframes à utiliser en 2022

Créer une interface web est une étape à ne pas négliger car c’est la première chose que nos utilisateurs verront. Il faut donc que celle-ci soit cohérente, rapide, esthétique et intuitive. A défaut, les utilisateurs pourraient quitter votre site ou application. C’est pourquoi utiliser un outil de conception de wireframes et mockups est très intéressant. Dans cet article, nous allons vous présenter les 10 meilleurs outils de création de wireframes et mockups.

devenir UX designer

28/06/2022

Comment devenir UX Designer ?

L’Expérience Utilisateur (UX) est l’une des expertises fortes d’Anais Digital. Elle fait partie de notre ADN. Mais quelles sont les compétences à avoir pour devenir un bon UX Designer ? Quelles formations suivre pour exercer ce métier ? Notre équipe UX vous partage son point de vue et son expérience en la matière.

No waste podcast ep10

21/04/2022

Ep10 – Définir la gouvernance d’un projet digital

Saviez-vous que la performance de vos projets ne se trouve pas uniquement dans la mise en place d’un plan efficace ? Elle se traduit aussi par la mise en place d’une gouvernance efficace et adaptée au contexte. La mise en place de projets digitaux au sein d’une entreprise implique la définition d’une structure : la […]

No waste podcast Ep 9

14/04/2022

Ep 9 – Un moment pour tout et un temps pour chaque chose (FR)

C’est sans doute l’une des perspectives les plus séduisantes de la vie d’entrepreneur : être maître de son temps.  Quand on comprend que dans la vie chaque minute compte. Apprendre à gérer son temps devient une compétence indispensable de l’entrepreneur.  Dans cet épisode, Christophe Jouret revient sur ce célèbre adage de l’Ecclésiaste : “Un moment […]

Download our Free Report

Want to have a chat about this ? Call us now +32 2 320 12 94.