Design system

L'art subtil d’affûter la cohérence visuelle et fonctionnelle de vos interfaces

De nos jours, la présence digitale des marques est devenue leur outil de communication principal. L'image est présente sur le site web, mais aussi sur de nombreuses applications et réseaux sociaux. Maîtriser son identité est un vrai challenge. Il est essentiel de construire un écosystème cohérent afin d'optimiser l'expérience des utilisateurs et des clients. 

L’objectif principal d’un Design System est de faciliter la vie de vos utilisateurs en optimisant les expériences qu’ils font sur vos interfaces afin que la confiance qu’ils accordent à votre organisation soit complète!

Une librairie de composants centralisés et prêts à l'emploi

Un Design System, c’est une bibliothèque de référence qui regroupe la charte graphique et la charte ergonomique. Qu’il s’agisse de votre logo dans ses différentes déclinaisons, des composants de votre charte visuelle ou encore de tous les éléments fonctionnels de vos applications, ils sont décrits et disponibles pour les spécialistes qui contribuent à votre présence digitale.

Des recommandations en matière d'expérience utilisateur

Réaliser un Design System, c’est également l’occasion de vous positionner par rapport à l’expérience que vous souhaitez offrir à vos utilisateurs. Les bonnes pratiques en matière d’ergonomie, les normes d’accessibilité et la tonalité rédactionnelle représentent vos valeurs et forgent votre réputation. Votre charte visuelle devient également fonctionnelle... et unique.

Image
Graphic Atomic Design

Des processus de travail accélérés et la garantie de cohérence

Un Design System permet à vos équipes de partager une vision commune de vos objectifs. Il leur permet de focaliser leur attention sur ce qui est important et, ainsi, de trouver les meilleures solutions pour mettre ces objectifs en adéquation avec les besoins de vos utilisateurs.

Si vos équipes peuvent commencer chaque nouveau projet avec des ressources graphiques prêtes à être intégrées, le gain en temps et développement permettra d'optimiser les délais et les coûts. Les briefings, les processus de travail et les validations sont rationalisés. Ainsi, vos produits seront disponibles plus rapidement.

 

Qui sont les utilisateurs du Design System ?

En plus de vos visiteurs, 4 types de contributeurs principaux vont être positivement impactés:

Vos chefs de projets

Ils auront accès:

  • aux directives ergonomiques et aux normes d’accessibilité recommandées,
  • aux aspects liés à l’indexation de vos contenus dans les moteurs de recherche,
  • aux ressources visuelles et techniques à partager avec les prestataires,
  • à du matériel pédagogique lié aux enjeux de votre présence digitale.

Ils bénéficieront:

  • d’informations pour préparer des briefing créatifs précis,
  • d’une charte permettant d’évaluer la conformité des livrables,
  • de ressources centralisées, disponibles, à jour et faciles à diffuser.
Vos créatifs

Ils auront accès:

  • à votre charte visuelle et à vos Corporate Guidelines,
  • aux ressources graphiques de votre identité visuelle,
  • à vos recommandations en matière d’expérience utilisateur,
  • à tous les composants d’interfaces validés et décrits.

Ils bénéficieront:

  • d’une immersion rapide dans votre univers visuel et vos critères de qualité,
  • d’étapes de travail répétitives éliminées et de validations rapides,
  • de ressources leurs permettant de se concentrer sur l’ergonomie des interfaces.
Vos développeurs

Ils auront accès:

  • à des informations concises concernant votre contexte technique,
  • à vos recommandations en matière de visibilité et d’accessibilité,
  • à tous les composants d’interface en code, prêts à l’intégration,
  • à des ressources concernant les comportements responsifs des interfaces.

Ils bénéficieront:

  • d’une immersion rapide dans votre contexte technique,
  • de développements répétitifs sans plus-value évités,
  • de codes testés et d’erreurs d’affichage éliminées.

Comment mettre en place un Design System?

Établir la charte digitale des valeurs de votre organisation est certainement un projet qui va remettre quelques certitudes en question… et mobiliser le temps précieux de vos collaborateurs. Chez Inovae, nous pensons qu'un Design System doit s’intégrer en douceur dans votre contexte et susciter l’enthousiasme de vos équipes. Une charte qui n’est pas adoptée ni appliquée ne servira à rien. Nous vous accompagnons avec un processus rigoureux qui sera adapté à vos besoins et à vos priorités.

L'objectif principal est d'établir rapidement une première version qui permet d'ajuster rapidement la cohérence de vos interfaces.

  • Inventaire et audit
    • Analyse de votre écosystème digital.
    • Inventaire de vos interfaces.
    • Audit de cohérence visuelle et fonctionnelle.
    • Audit UX et accessibilité.
    • Liste exhaustive des vos éléments graphiques et de vos composants.
  • Périmètre et plateforme
    • Définition des besoins de votre future charte digitale.
    • Choix d'une plateforme adaptée à l'envergure de votre Design System.
    • Analyse commune des sujets pédagogiques à aborder.
    • Mise en place de la plateforme.
  • Priorités
    • Mise en place de l'architecture des contenus.
    • Planning des étapes de mise en place.
    • Définition des informations et ressources prioritaires.
  • Conception visuelle
    • Analyse de la conformité de votre identité visuelle pour une utilisation optimale dans le contexte digital.
    • Conception graphique / uniformisation des composants d'interfaces.
    • Analyses des besoins iconographiques.
    • Optimisation typographique.
    • Définition d'une palette couleurs digitale.
  • Composants visuels
    • Définition des logiciels graphiques privilégiés.
    • Organisation de la librairie atomique et des conventions de naming.
    • Préparation des tous les composants d'interfaces.
    • Création de tous les états visuels requis par les différents composants.
    • Rédaction des descriptions fonctionnelles de chaque composant.
    • Définition d'une palette couleurs digitale.
  • Composants techniques
    • Définition des formats de code requis.
    • Développement de tous les composants.
    • Mise en place d'une stratégie de mise-à-jours des ressources.
  • Recommandations
    • Définition des sujets liés à l'UX qui doivent être abordés.
    • Création des contenus.
  • Diffusion
    • Présentation et training du Design System à vos utilisateurs.
    • Préparation du matériel pédagogique disponible dans la charte.
    • Formation de vos utilisateurs et support.

En savoir plus sur le Design system

Un design system chez Inovae

Design system by Inovae

J'aimerais partager avec vous « Pourquoi j'ai décidé de travailler avec des Design System chez Inovae » et comment ils sont devenus un élément central dans mon processus créatif.

Design System, quésaqo ?

Un Design Sytem est une bibliothèque de composants visuels qui, mis ensemble, vont permettre l'élaboration d'interfaces digitales. Son élaboration s'envisage sur toute la durée d'un projet en fonction des problématiques à résoudre ou des besoins du client. Cette solution va servir de référence tant pour les designers que pour les développeurs et permettre de réduire le temps de maquettage et d'implémentation.

Un Design System propose une approche modulaire du design qui ne se focalise pas sur la page en tant que telle, mais plutôt sur ses éléments qui la composent. La tâche du designer n'est plus alors de simplement produire des "Pages" mais bien des "composants de page". L'arrivée de nouveaux outils comme Sketch vont permettre aux designers de goûter pleinement à tous les avantages qu'offre la création d'un Design System.

Image
Illustration D8mo design system Inovae

 

Atouts et avantages

Automatiser des processus de création pour se concentrer sur l'essentiel

Gérer les états

Travailler par élément et non plus par page va permettre un travail plus abouti au niveau de l'interactivité. En effet, une approche modulaire permet de mieux prévoir les états des boutons (hover, disable etc.) mais aussi les messages d'erreur, les toasts ainsi que de nombreux éléments de contexte qui ne sont que rarement affichés de base sur une maquette.

Image
Illustrations de toasts & buttons

 

Ne designer que les exceptions

L'utilisation d'un Design System va réduire le temps de design et d'implémentation tout au long du projet. Le graphiste conçoit une seule fois chaque élément, qui sera ensuite réutilisé tout au long des pages. Le gain en productivité est énorme et cela offre une flexibilité très appréciable pour répondre aux demandes de modification. En effet, chacun des changements sur un élément se répercutera sur l'ensemble des pages où cet élément apparaît, éliminant de fait le fastidieux travail de mise à jour individuelle de chaque maquette.

En cela, un Design System est à l'opposé du system "Page par page" qui force le designer à travailler de manière linéaire chaque maquette.

Exemple: il est demandé de mettre à jour le logo dans le header d'un site qui comprend 60 pages finalisées.

Avec le page par page → Remplacer le logo autant de fois qu'il est présent sur les maquettes ( = 60 fois)
Avec le Design System → Remplacer le logo sur l'élément "Header" ( = 1 fois)

Image
Illustrations de croquis de pages

Designer dans une logique de dev

Le design, s'il est adapté aux besoins du client, ne doit jamais l'être au détriment de l'implémentation. Les développeurs doivent être impliqués dès le commencement de l'élaboration du Design System pour apporter leur expertise sur la faisabilité de certaines combinaisons de modules. Un Design System conçu en équipe et en bonne intelligence apporte cet environnement sécurisant au designer qui peut créer dans une logique proche de celle des développeurs. L'implémentation s'en trouve, de fait, grandement facilitée.

 

La construction du Design System

Se lancer

Concevoir un projet avec un Design System, c'est faire le choix du modulaire. C'est aussi une décision qui implique la participation de l'ensemble de l'équipe. En effet, un Design System se conçoit par tous et nécessite la participation de chacun pour bien fonctionner.

Il n'est pas toujours facile de savoir par où commencer mais voici quelques clés pour vous lancer.

Les composants

Un bon début peut consister à lister tous les composants qui vous sont familiers et qui feront partie de votre Design System (boutons et états, carte, banner, carousel, key numbers, quote, etc). Cette liste vous servira de pense-bête et sera alimentée tout au long du processus de production.

Les pages

La phase de conception va permettre ensuite d'élaborer les grands templates du projet : homepage, landing page, page de details, search...

Au fur et à mesure que ces templates se construisent, les composants vont se mettre en place. Chacun doit avoir une fonction précise et ne doit pas varier d'un template à l'autre. Dans ce but, il est tout à fait normal d'effectuer de nombreux réglages entre les composants et les templates. C'est même le signe que votre Design System va dans la bonne direction !

Image
Illustration de croquis du design system - Inovae

L'atomic design

Pour apporter de la structure à notre System, l'Atomic Design est là pour nous aider.

Image
Capture d'écran d'atomic design - Inovae

 

Conçu par Brad Frost, L'Atomic Design est une méthode basée sur la modularité. Elle permet de créer des Design Systems à partir de composants: atomes, molécules, organismes, templates et pages.

Image
Les 5 principes d'atomic design

Le but est d'attribuer une fonctionnalité par composants pour obtenir une design hautement consistant sur l'ensemble des pages.

Dans Sketch, la maîtrise des symbols est clé pour rendre le Design System performant.

Un symbol est un élément qui va pouvoir être utilisé simultanément sur plusieurs pages de manière dynamique.

-> Sketch 💎- utilisation des symbols – découvrez les détails en vidéo !

 

Récolter du feedback

Tout au long de la réalisation des maquettes, il faut régulièrement récolter les feedbacks des développeurs back et front. Une documentation à jour permet à chacun de pouvoir comprendre l'utilisation de chaque composant du système.

Documenter est essentiel pour bien maintenir le système à jour car il a vocation à évoluer dans le temps. InVision est un outil en ligne qui permet de partager des prototypes. Il est d'une grande aide pour permettre à une équipe d'interagir autour de wireframes ou de maquettes. Parfaitement synchronisé avec Sketch, il offre un gain de temps certain au moment de partager un Design System.

Plugin Craft

Ce plugin est proposé par l'InVision Lab. Il permet de classer et stocker les éléments du Design System dans une bibliothèque personnelle ou partagée. Il est alors facile de les utiliser pour construire les maquettes un peu comme on utiliserait des Légo pour construire une maison.

Image
Capture d'écran du plugin Craft - Inovae

Vous l'aurez compris, un Design System va au-delà de la simple bibliothèque de composants. Il demande au designer qui le conçoit de sortir de sa zone de confort et de prendre mieux en considération les aspects techniques. Un bon Design System se conçoit en harmonie avec les développeurs car il doit être une référence pour l'équipe durant toute la durée du projet.

Chez Inovae, nous avons à coeur d’innover, de progresser, et de viser la qualité dans nos processus de développement.

La réalisation de notre Design System nous apporte, au quotidien, de nombreux avantages et gains :

👉🏼 Une productivité accrue
👉🏼  Une grande réactivité sur les demandes de modifications 
👉🏼  Une réduction du temps d’implémentation 
👉🏼  Un temps de maquettage accéléré 
👉🏼  Une meilleure vision technique sur toute la chaîne de production web 
👉🏼  L’alignement des équipes internes 
👉🏼  Un surplus de motivation et la baisse des tâches récurrentes 
👉🏼  Une grande cohérence dans nos processus
👏🏼  La satisfaction de nos clients

Adeline Radius
Adeline Radius
Directrice artistique

Adeline conçoit des univers visuels épurés alliant esthétisme et efficacité pour permettre aux utilisateurs d’accéder aux contenus de manière intuitive et interactive.

Contactez nos experts et construisons ensemble votre transformation digitale.
Allons-y!

Besoin d’optimiser votre efficacité digitale?

Besoin d’optimiser votre efficacité digitale?

Fermer