Design system

The subtle art of sharpening the visual and functional consistency of your interfaces

Nowadays, the digital presence of brands has become their main communication tool. The identity is present on the website, but also on many applications and social networks, mastering your identity is a real challenge. It is essential to build a coherent ecosystem in order to optimise the experience of users and customers.

The main objective of a Design System is to make life easier for your users by optimising the experiences they have on your interfaces. This will raise the confidence they have for your organisation.

A library of centralised and ready-to-use components

A Design System is a reference library that brings together the graphical guidelines and the ergonomic chart. Whether it is your logo in its various variations, components of your identity chart or all the functional elements of your applications, they are described and available to specialists who contribute to your digital presence.

User experience recommendations

Creating a Design System is also an opportunity to position yourself in relation to the experience you want to offer your users. Good ergonomic practices, accessibility standards and editorial tone represent your values ​​and forge your reputation. Your visual chart also becomes functional... and unique.

Image
Graphic Atomic Design

Accelerated work processes and the guarantee of consistency

A Design System allows your teams to share a common vision of your objectives. It allows them to focus their attention on what is important and, thus, to find the best solutions to align these objectives with the needs of your users.

If your teams can start each new project with graphical resources ready to be integrated, the gains in time and development will optimise deadlines and costs. Briefings, work processes and validations are streamlined. Thus, your products will be available more quickly.

 

Who are the users of the Design System?

In addition to your visitors, 4 types of main contributors will be positively impacted:

Your project managers

They will have access to:

  • ergonomic guidelines and recommended accessibility standards.
  • aspects related to the indexing of your content in search engines.
  • visual and technical resources to share with service providers.
  • educational material related to the challenges of your digital presence.

They will benefit from:

  • information to prepare precise creative briefing.
  • a charter to assess the compliance of deliverables.
  • centralized resources, available, up to date and easy to distribute.
Your creatives

They will have access to:

  • your visual chart and your Corporate Guidelines.
  • the graphical resources of your visual identity.
  • your recommendations in terms of user experience.
  • all validated and described interface components.

They will benefit from:

  • a quick immersion in your visual universe and your quality criteria.
  • repetitive work steps eliminated and rapid validation.
  • resources allowing them to concentrate on the ergonomics of interfaces.
Your developers

They will have access to:

  • concise information about your technical background.
  • your recommendations in terms of visibility and accessibility.
  • all interface components in code, ready for integration.
  • resources concerning the responsive behaviors of interfaces.

They will benefit from:

  • a quick immersion in your technical context.
  • repetitive developments with no added value avoided.
  • Codes tested and display errors eliminated.

How to set up a Design System?

Establishing a digital chart of values ​​for your organisation is certainly a project that will call into question some certainties ... and mobilise the precious time of your employees. At Inovae, we believe that a Design System should integrate smoothly into your context and arouse the enthusiasm of your teams. A chart that is not adopted and implemented will not help. We support you with a rigorous process that will be adapted to your needs and your priorities.

The main objective is to quickly establish a first version which allows you to quickly adjust the consistency of your interfaces.

  • Inventory and audit
    • Analysis of your digital ecosystem.
    • Inventory of your interfaces.
    • Visual and functional consistency audit.
    • UX and accessibility audit.
    • Exhaustive list of your graphical elements and your components.
  • Scope and platform
    • Definition of the needs of your future digital chart.
    • Choice of a platform adapted to the scope of your Design System.
    • Common analysis of the educational topics to be addressed.
    • Implementation of the platform.
  • Priorities
    • Implementation of the architecture of content.
    • Planning of the implementation stages.
    • Definition of priority information and resources.
  • Visual design
    • Analysis of the compliance of your visual identity for optimal use in the digital context.
    • Graphic design / standardisation of interface components.
    • Analysis of iconographic needs.
    • Typographic optimisation.
    • Definition of a digital color palette.
  • Visual components
    • Definition of preferred graphics software.
    • Organisation of the atomic library and naming conventions.
    • Preparation of all interface components.
    • Creation of all the visual elements required by the different components.
    • Writing of functional descriptions of each component.
    • Definition of a digital color palette.
  • Technical components
    • Definition of required code formats.
    • Development of all components.
    • Implementation of a strategy for updating resources.
  • Recommendations
    • Definition of UX related topics that need to be addressed.
    • Content creation.
  • Dissemination
    • Presentation and training of the Design System to your users.
    • Preparation of educational material available in the charter.
    • Training of your users and support.

To learn more on 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!

Need to optimise your digital efficiency?

Need to optimise your digital efficiency?

Close