Peut-on voir le Design System comme un langage ?

C’est la question que je me suis posé en observant et en analysant les plus complets d’entre eux.

Pour commencer de tenter de répondre à cette question, nous pouvons d’abord nous demander basiquement « À quoi sert un Design System ?« .

Un DS est un moyen de communication relativement complexe, d’une marque ou d’un produit, s’adressant à ses clients et utilisateurs. Nous avons donc bien dès le schéma de départ, deux interlocuteurs et une problématique de communication.

Il est également préférable de rappeler qu’il s’agit avant tout d’un outil de conception regroupant : les éléments graphiques, visuels, typographiques, les règles d’utilisation (guidelines), les guides (styleguide), la charte éditoriale, les composants et les layouts.

Mais n’est-ce seulement qu’un outil ? Conçu principalement pour garantir une cohérence dans les interfaces et une meilleure collaboration entre les designers et développeurs, le DS peut également être perçu comme un référentiel pour faciliter la construction de page. C’est ce dernier point qui va nous intéresser.

Les standards du numérique comme grammaire

Lors de la phase de conception d’une page, le designer va tenter d’exprimer un message grâce aux éléments qui lui sont fournis avec son DS. Pour cela, il est évident que son DS doit d’abord respecter les usages conventionnels des domaines du web, de l’applicatif, du logiciel ou du système d’exploitation. Ces usages se sont imposés peu à peu comme une convention depuis la création des premières interfaces numériques, instituant un code qu’il est intéressant de transposer en structure grammaticale.

La base grammaticale

Si nous devions ainsi percevoir la structure d’une page comme celle d’une phrase, nous pourrions alors définir la structure suivante :

Élément visuel statique = Groupe nominal (GN)
Élément visuel d'interaction = Groupe verbal (GV)

Groupe nominal (GN)
Photo = Nom
Pictogramme = Nom
Couleur = Adjectif

Groupe verbal (GV)
Bouton = Verbe
Picto dans un bouton = Complément d'objet
Couleur dans un bouton = Adverbe

[[GN]-[GV]]

Avec ces quelques éléments simples, il paraît plus facile de percevoir la conception d’une page comme l’écriture une phrase.

Exemple

[ Je suis sur la page produit (nom) verte (adjectif) [SN] ] et si [ je clique sur le bouton (verbe) « acheter » rouge (adjectif) avec un picto panier (complément d’objet) [SV] ] alors je déclencherai un tunnel d’achat.

La syntaxe

À présent ajoutons à cela la notion de grille et layout, permettant d’indiquer au designer ce qui grammaticalement serait correct ou non :

Exemple

Exemple d’une page « liste de produits », affichant un colonnage de 3 blocs, composés d’une vignette, un titre d’un texte et d’un bouton.
Un layout est donc une syntaxe permettant la construction d’une page.

L’Atomic Design comme infrastructure

L’Atomic Design permet un raisonnement par combinaison d’éléments, très proche d’une structure grammaticale. Une structure moléculaire type « menu » comportant des atomes type « bouton » peut facilement être comparée à une phrase comportant plusieurs verbes d’action. Leur ordre a une importance, et le modifier reviendrai à changer le sens de la phrase. Ainsi lorsque vous créez une molécule, vous ordonnez une locution vectrice de sens.

Le responsive comme changement syntaxique

L’exercice du travail d’adaptation au support des interfaces peut être perçu comme un re-formulation syntaxique. La proposition verbale est recomposée sous une autre forme tout en gardant l’essence. Cet effort d’adaptation peut alors amener à raccourcir ses idées et les synthétiser.

Les autres éléments

D’autres éléments peuvent s’inscrire dans cette comparaison. On peut ainsi ajouter les quelques éléments suivants :

• Typographie, Charte édito, émoji = Intonation
• Illustration = Nom
• Couleurs = Adverbe
• Animation = Adjectif
• Grille = Ponctuation, rythme
• Boite de dialogue = Interjection
• Composants de formulaire (radio, case à cocher, champs de saisie…) = Interrogation
• Bouton valider ou continuer = Affirmation
• Bouton annuler ou retour = Négation

En tant que designer, il peut être intéressant d’établir un Design System en gardant en tête la manière dont on veut communiquer avec son utilisateur à travers tous ces éléments en leur faisant porter un sens.

Un DS est donc bien un référentiel d’éléments fini qui permet aux designers de créer un nombre infini de propositions.

Chaque Design System est une langue

Partant du postulat que les usages du numériques sont devenus une forme de grammaire fonctionnelle universelle et explicite, alors chaque DS est une expression appliquée sur cette structure. Un DS peut donc être perçu comme une langue avec ses singularités.

On peut alors imaginer la liste suivante comme des langues utilisant la même structure : https://www.designsystems.fr/liste-des-designs-systems-francais

Les variations de structure apparaissent alors comme les subtilités de langue permettant à la marque ou au produit de se différencier tout en étant compris par tous ses interlocuteurs.

Ces multiples codes instaurés entre le produit et son utilisateur crée un lien de complicité par la compréhension : pendant quelques instants, nous parlons la même langue.

Certains vont déjà jusqu’à présenter plus distinctement le concept. C’est le cas d’IBM ou Mircrosoft qui parlent bien de « Design Language » évoquant ainsi chaque élément de leur DS comme motif de son idiome : https://www.ibm.com/design/language/
https://developer.microsoft.com/fr-fr/

Construire un DS est la conception d’un dictionnaire qui permettra de référencer les éléments de langage et leur permettra d’évoluer dans le temps par la suite (comme toute langue vivante!). La linguistique est bien une approche dans la conception qui permet de corréler la forme à sa sémantique.

Références
https://www.ibm.com/design/language/
https://developer.microsoft.com/fr-fr/
https://blog.shine.fr/lillustration-et-la-couleur-2-piliers-du-design-chez-shine-fb28256a9981
http://jiminy.chapalpanoz.com/linguistique-design/
https://www.shopify.fr/partenaires/blog/langage-visuel-en-design-comment-le-construire