Concevoir un Design System

Étape 1 : Prendre un shot d’inspiration

Qu’est-ce qu’un Design System ?

Un design system ou design language est un ensemble d’éléments graphiques participants à l’interaction entre un service digitalisé et ses utilisateurs. Le système définit des règles et des principes de conception pour apporter de la cohérence dans le discours. Il tente de réduire le nombre de signes à appréhender par l’utilisateur pour lui faciliter l’usage du service.

Un design system peut être assimilé avec une charte graphique digitale. Si les deux participent à la cohérence globale de l’expérience utilisateur, le premier peut inclure la seconde en précisant toutefois des principes d’interactions, des patterns et des cohérences éditoriales. Un design system peut être indépendant d’un branding. C’est le cas du célèbre Material Design de Google.

Un design system s’adresse à l’intégralité des concepteurs d’interfaces : Visual Designer, Codeur, Interaction Designer, Motion Designer, Rédacteur, Photographe et Sound Designer. Chacun peut y trouver des ressources et des règles de conception. Il aide à construire un vocabulaire commun facilitant la collaboration.

Cet article est une dose d’inspiration. Il tente de poser un socle de conception pour tous ceux qui souhaiteraient créer un écosystème numérique.

Les composantes d’un design system

Un design system se compose de règles dont découlent des éléments d’interface. Si chaque design system possède sa propre bibliothèque, nous pouvons retrouver des grands principes communs.

En analysant les design systems les plus connus, nous remarquons qu’ils peuvent se composer d’un contexte, de lois « physiques », de comportement, de style, de formes et de patterns.

Voir l’intégralité du Benchmark : Benchmark des design systems

Benchmark des Design Systems les plus populaire

A. Un contexte

Souvent un design system est créé pour un environnement particulier. Il aborde certains principes de conception révélant l’ambition de ses auteurs.

Material évoque sa volonté de créer des principes unificateurs : Material Design : Goals & Principles

IBM décrit six contextes dans lesquels se déroule l’expérience de leur produit : IBM Design Language : Experience

B. Physique

Ce sont les caractéristiques globales des éléments : disposition dans l’espace, fluidité des éléments, relation entre les éléments…

Dans Material Design, Google va jusqu’à définir le material comme un matériau possédant des propriétés physiques intrinsèques. Ils décrivent les fondamentaux de la lumière, de la matière et du mouvement qui pour eux sont les clés pour mieux saisir le monde digital : Material Design : Physical properties

IBM évoque des principes de conception permettant de structurer le flow des éléments : IBM : Design Language : Layout

B. Comportement

Cette catégorie aborde le comportement des éléments lorsqu’ils « vivent » : leurs animations, les zones interactives ou les types de feedback utilisés.

Dans IOS Humain Interface Guideline, Apple définit le tempo des feedbacks Haptic à utiliser suivant le message : iOS Humain Interface Guideline : feedback

IBM s’inspire de ses machines pour déterminer le mouvement de ses composants graphiques : IBM Design Language : Animation Elements

C. Style

C’est la couleur du message qu’on souhaite transmettre qu’il soit écrit, parlé ou évoqué. Le message peut être défini par sa formulation, son ton, sa ponctuation, sa forme (couleur et format)…

MailChimp le fait à merveille grâce à son outil Voice & Tone qui regroupe toutes les bonnes pratiques à adopter pour répondre à un client : MailChimp : Voice & Tone

Material Design conseille sur la formulation à adopter afin de construire un message clair et précis : Material Design : writing

D. Forme

C’est tous les types de formes que les principes évoqués précédents peuvent prendre. C’est la bibliothèque des éléments, des composants et des icônes. Cette liste est diverse et propre à chaque système. Il existe plusieurs classifications permettant de ranger sa bibliothèque. Apple utilise le trio : UI Bars, UI Views et UI Controls. Brad Fost son célèbre Atomic Design : Atoms, Molecules, Organisms, Templates et Pages. Ou encore Jeff Crossman et son équipe pour General Electric : applications, features, templates, components, basics et principles

GE’s Predix Design System : https://medium.com/ge-design/ges-predix-design-system-8236d47b0891

Atomic Design : http://bradfrost.com/blog/post/atomic-web-design/

On retrouve dans la plupart des systèmes quelques éléments clés tel que les icônes, les formulaires, les boîtes de dialogue, les listes, les boutons ou encore les tableaux.

Voir la liste des composants de divers Design Systems

Commencer son Design System et pour quelles raisons

Un design system permet le plus souvent de faciliter le travail en équipe. Il est donc important que la méthodologie appliquée soit inclusive. Un design system peut embrasser un large éventail de solution, comme il peut être restreint à un objectif précis. Commencer par auditer les besoins en interface afin de juger ce qui est nécessaire à produire. Certains designers ont déjà mis en place des outils et des méthodologies pour bien commencer son design system :

1. Interface Inventory by Brad Frost : commencer par faire un audit de vos éléments graphiques à l’aide de screenshot et d’un fichier PPT.

2. Picking Parts, Products & People : A Team Activity to Start a Design System : Nathan Curtis à élaborer une liste des composantes que peut aborder un design system ainsi qu’une méthodologie d’atelier pour les choisir en équipe.

3. Benchmark Design Systems : composants : Une liste comparative des composants des designs systems les plus populaires

Si vous êtes prêt pour créer votre design système, vous trouverez ici un Kit pour bien commencer.

Like what you read? Give Victorien (.net) a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.