Décryptage

Le Design System : une révolution dans la création digitale

Le 13 décembre 2018

Par Colline Marabese, assistante chef de projet

Partager cet article

Le Design System est un ensemble de règles permettant de faciliter l’uniformisation des contenus digitaux et donc la cohérence visuelle globale. Il regroupe la charte graphique, l’UX et la charte éditoriale.

Il s’agit donc d’un ensemble extrêmement vaste et complet qui peut faire la différence.

La légende raconte même que ceux qui utilisent le Design System dans leur processus de création ne peuvent plus s’en passer car bien trop séduits par une souplesse sans pareille… Prêts à découvrir si la légende dit vrai ?

Le design system pour une charte graphique respectée dans vos différents supports de communication digitaux

Efficacité

Gagner du temps

Et oui, Design System rime avec gain de temps (bon, ça ne se voit pas trop comme ça mais pourtant si !). En effet, le Design System utilise le principe de l’atomic design qui permet de regrouper un ensemble de composants (boutons, blocs spécifiques, champs, vignettes, etc.) qui seront utilisés pour la conception d’interfaces.

Ce système permet un gain de temps considérable à la fois pour le designer et le développeur dans la mesure où un changement sur un composant se répercutera automatiquement sur l’ensemble des composants du même type. Par exemple, si votre bouton de devis est rouge et que vous souhaitez le changer en vert, la modification ne sera à faire qu’à un seul endroit et s’appliquera sur l’ensemble des pages où le bouton de devis apparaît.

Et, bien entendu, qui dit gain de temps pour le prestataire, dit gain de temps pour vous ! Et qui dit gain de temps dit gain d’argent !

Vous commencez déjà à être conquis par le Design System ? Attendez de lire la suite…

Illustration

Plus de cohérence

Créer un environnement de marque homogène

Le Design System permet d’établir une cohérence à plusieurs niveaux :

  • Des composants : En permettant d’assurer des interfaces homogènes qui deviendront par la suite familières pour l’utilisateur
  • Des pages : Certaines pages utiliseront le même gabarit, ce qui vous permettra d’organiser vos contenus de manière logique et cohérente.
  • Des résolutions : Un système de grille est défini en amont pour fonctionner sur toutes les résolutions et avoir un rendu optimal aussi bien sur mobile que sur grand écran.
  • De la communication : Définir une charte éditoriale permet de conserver une cohérence en termes d’expérience client.
  • Des différents supports : Les règles qu’instaure le Design System permettent également d’uniformiser l’ensemble de vos supports à la fois sur le plan graphique, fonctionnel et éditorial afin de créer une réelle continuité d’un support à un autre.

Cette nécessité de cohérence à la fois visuelle et éditoriale est capitale, d’une part, pour votre marque car elle permettra d’affirmer son positionnement et son discours et, d’autre part, pour l’utilisateur car ce dernier bénéficiera d’une expérience utilisateur continue et logique.

Design system : un approfondissement de la charte graphique

Collaborer plus facilement

Simplifier les évolutions futures

Il serait contre productif de figer votre interface et/ou votre identité visuelle et de vous priver de toute évolution ! Surtout dans le secteur du digital où les usages, les normes et les besoins évoluent rapidement.

Faire vivre votre support digital sera plus simple grâce à ce système de référence qui permettra aux équipes de modifier certaines propriétés (tailles, couleurs ou formes) de certains composants en en mesurant l’impact sur les différentes interfaces.

Dans le monde du digital, il est important de chercher en permanence comment optimiser les outils à notre disposition afin de gagner en productivité. Le Design System, c’est le fruit même de cette réflexion : c’est LA solution pour être rapide et efficace tout en fournissant un travail de qualité.

Illustration

Démarrons ensemble

Vous avez été convaincu ?

Le Design System vous a convaincu en théorie ? Il est maintenant temps de passer à la pratique ! Contactez nos consultants à Strasbourg, Paris, Lyon ou Aix Marseille pour tester un projet avec le Design System et gagnez en temps, en efficacité et en flexibilité !

Nous confier un projet

Projets

Nos réalisations

Airbus

Airbus - Aéronautique

Airbus - Aéronautique

Fusionner deux sites web Airbus en mettant l'utilisateur et la génération de leads au centre de la conception

Audit ergonomique/UXCadrageUX ResearchStrapiAccompagnement stratégiqueUI / UX Design

Majeur•e•s

Majeur•e•s - Culture

Majeur•e•s - Culture

Concevoir le 1er annuaire inclusif des professionnel·les de la musique et lutter contre les inégalités de genre

Tests utilisateursUX WritingAteliers co-conceptionBenchmark UXWordPressReact JSUI / UX Design

Maisons Vivalia

Maisons Vivalia - Construction

Maisons Vivalia - Construction

Se démarquer de la concurrence grâce à un configurateur de maisons immersif

Stratégie éditorialeWordPressUX WritingRecherche utilisateurAteliers co-conceptionAudit ergonomique/UXBenchmark UXUI / UX DesignIdentité visuelle

Liebherr Électroménager

Liebherr Électroménager - E-commerce

Liebherr Électroménager - E-commerce

Digitaliser la vente en direct par la création d’un site e-commerce haut de gamme

UX WritingExpérience client (CX)E-commerceUI / UX DesignAudit ergonomique/UXAteliers co-conceptionSymfonyStratégie éditorialeBenchmark UXAudit des datas

Nos compétences créatives

Pour vous accompagner

atelier-co-conception

Ateliers de co-conception

Faire émerger des solutions innovantes pour créer ensemble un produit « qui marche ».
En savoir plus
prototypage

Prototypage et tests

Évaluer les performances de votre solution et tester son efficacité sur un prototype interactif.
En savoir plus
ux-writing

Rédaction UX et SXO

Communiquer efficacement avec vos cibles en utilisant les bons mots et le bon ton.
En savoir plus
design-system

Design system

Harmoniser vos supports digitaux grâce à une charte graphique solide et efficace.
En savoir plus
desing-interface-ui

Design d'interface (UI)

Produire le design de vos interfaces utilisateurs et créer une expérience émotionnelle positive.
En savoir plus
design-interaction

Design d'interaction (IxD)

Favoriser le dialogue entre vos utilisateurs et votre produit pour maximiser l’engagement.
En savoir plus

L'agence

Découvrir
adeliom-agence

Nos réalisations

Découvrir
adeliom-realisations