Mieux comprendre le Design System

thomas-huber

12 janvier 2020

Mieux comprendre le Design System

Au point de rencontre entre le développement de produit et le web development, le Design System se présente comme un outil sous forme d’une interface utilisateur permettant l’harmonisation des processus de conception et d’innovation. Plaçant l’utilisateur et ses usages quotidiens en son centre, cette méthode permet l’harmonisation des expériences et structures qui préoccupent les concepteurs d’applications ou de produits digitaux. Outil optimal pour l’accélération et l’économie de développement, le Design System présente de nombreux intérêts dans la mise en œuvre et la conception de design d’interface utilisateur (UI).

A mi-chemin entre le designer et le développeur

Les challenges auxquels sont confrontés aujourd’hui les web designers s’apparentent à ceux rencontrés auparavant par les ingénieurs au début de l’ère micro-électronique des années 1990. Construire un langage élaboré, des abstractions et des modèles de gestion de collaborations, tels sont les enjeux contemporains engagés. Grâce aux avancées dans l’innovation digitale, le fossé entre le développeur et le designer s’est réduit depuis l’apparition de software Computer Aided Design (CAO), mettant en place des outils plus versionnés et interactifs pour élaborer un code informatique. Désormais plus accessible grâce à des designs plus performants, le web development s’est également esthétisé avec l’évolution et la simplification du design digital. L’évolution du Design System peut se comparer à celle de l’architecture qui aujourd’hui façonne ses propres dogmes et codes.

Le Design System en quelques mots

La définition du Design System peut s’apparenter à celle d’un guide de conception. Il regroupe les lignes directrices, le langage et une bibliothèque nomenclaturées en une sorte de charte globale. Librairie de référence, le Design system est un outil essentiel pour le design et le développement d’une application numérique, d’un site e-commerce ou de toute autre forme de service digital. Ainsi, toute personne travaillant sur la conception et l’élaboration d’un produit numérique peut s’y référer et utiliser les différents composants en code simplifié. Le contenu d’une interface Design System dépend alors de l’identité, de l’écosystème digital et de la vocation d’une entreprise donnée. On y retrouve toutefois les caractéristiques communes suivantes :

  • Patterns et composantes UI
  • Typographie
  • Spectres de couleurs et outils associés
  • Imagerie et iconographie
  • Eléments/composants fonctionnels
  • Outils et grilles de structuration des éléments

Les points forts du Design System

Outil essentiel pour le développement de produits et de services digitaux, le Design System se présente comme une banque de données constituée comme base de conception destinée aux développeurs et designers web. Facilitant le design numérique dans son intégralité en une interface simplifiée et davantage accessible pour un éventail plus large de techniciens, le Design System est également destiné à faire gagner du temps aux entreprises dans le développement de leurs produits. Ainsi les objectifs du Design System sont doubles : libérer un temps précieux au designer dès lors émancipé de tâches répétitives et donc permettre à celui-ci de se consacrer au développement du produit final dans sa globalité et son interactivité.

Enfin, le Design System présente l’avantage de faciliter la conception esthétique du produit, celle-ci étant essentielle dans le développement d’une application ou d’une plateforme e-commerce. Point de conjoncture entre apparence et fonctionnalité, cet outil se veut alors un medium de conception indispensable dans le marché digital contemporain.

Design System à l’ère de l’industrialisation du design

Un Design System performant est également celui qui s’adapte aux nouveaux enjeux d’industrialisation du web et du développement digital. Essentiel pour assurer une cohérence des usages et permettre aux utilisateurs une expérience optimale du produit ou du service final, le Design System permet la mise en place d’éléments structurels et graphiques qui serviront à communiquer efficacement. A terme, il doit pouvoir devenir une place centrale d’échanges entre les différents collaborateurs et techniciens impliqués dans le développement d’un produit, en favorisant la rapidité de conception ainsi que le gain de temps nécessaire à l’évolution d’une entreprise.

Le ROI du design system

  • 25% : C’est le montant moyen d’économies réalisées sur chaque projet digital.
  • La rentabilité est effective dès le premier projet digital.
  • 50% : C’est le gain en “time to market” lors de l’utilisation un design system sur des projets digitaux.

Sources : Uxpin, Medium, NMGroup, UXDesign.cc, creative.onl, Le Backyard

Et la gouvernance ?

La gouvernance d’un Design System doit être définie avec précaution pour garantir sa transversalité.

À l’agence, nous identifions plusieurs points d’attention :

  • QUI : Qui est responsable du DS ? Qui le met à jour ?
  • COMMENT : quel est le process interne / externe de mise à jour ? Comment inclure le Design System dans les consultations externes ?
  • OÙ : Où peut-on trouver le DS ? Est-il accessible par tous ?

Et combien ça coûte ?

Pour comprendre les coûts d’un design system, il faut les mettre en parallèle avec le périmètre de ce dernier. « Seulement » du design et des spécifications fonctionnelles, Ou des composants déjà codés ?

D’après notre experience, un design system suffisamment consistant démarre à 40k€ pour une quarantaine de composants designé et codé (front seulement).

Comments are closed.

SUR LE MÊME SUJET

6
Mai

Expérience collaborateur : comment créer une expérience humaine ?

Appliquant les mêmes principes de l’expérience utilisateur aux différents collaborateurs au sei

CTA éditable

6
Mai

Quels sont les avantages de l’atomic design ?

Méthode de design modulaire initiée par le talentueux web developper Brad Frost, l’atomic design

CTA éditable