{"id":123,"date":"2021-04-07T11:50:05","date_gmt":"2021-04-07T09:50:05","guid":{"rendered":"http:\/\/remidudragne.com\/le-blog\/?p=123"},"modified":"2021-04-07T15:46:37","modified_gmt":"2021-04-07T13:46:37","slug":"peut-on-voir-le-design-system-comme-un-langage","status":"publish","type":"post","link":"https:\/\/remidudragne.com\/le-blog\/peut-on-voir-le-design-system-comme-un-langage\/","title":{"rendered":"Peut-on voir le Design System comme un langage ?"},"content":{"rendered":"\n

Peut-on voir le Design System comme un langage ?<\/h2>\n\n\n\n

C’est la question que je me suis pos\u00e9 en observant et en analysant les plus complets d’entre eux.<\/p>\n\n\n\n

Pour commencer de tenter de r\u00e9pondre \u00e0 cette question, nous pouvons d’abord nous demander basiquement \u00ab\u00a0\u00c0 quoi sert un Design System ?<\/strong>\u00ab\u00a0.<\/p>\n\n\n\n

Un DS est un moyen de communication relativement complexe, d’une marque ou d’un produit, s’adressant \u00e0 ses clients et utilisateurs. Nous avons donc bien d\u00e8s le sch\u00e9ma de d\u00e9part, deux interlocuteurs et une probl\u00e9matique de communication.<\/p>\n\n\n\n

Il est \u00e9galement pr\u00e9f\u00e9rable de rappeler qu’il s’agit avant tout d’un outil de conception regroupant : les \u00e9l\u00e9ments graphiques, visuels, typographiques, les r\u00e8gles d’utilisation (guidelines), les guides (styleguide), la charte \u00e9ditoriale, les composants et les layouts.<\/p>\n\n\n\n

Mais n’est-ce seulement qu’un outil ? Con\u00e7u principalement pour garantir une coh\u00e9rence dans les interfaces et une meilleure collaboration entre les designers et d\u00e9veloppeurs, le DS peut \u00e9galement \u00eatre per\u00e7u comme un r\u00e9f\u00e9rentiel pour faciliter la construction de page. C’est ce dernier point qui va nous int\u00e9resser.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Les standards du num\u00e9rique comme grammaire<\/h2>\n\n\n\n

Lors de la phase de conception d’une page, le designer va tenter d’exprimer un message gr\u00e2ce aux \u00e9l\u00e9ments qui lui sont fournis avec son DS. Pour cela, il est \u00e9vident que son DS doit d’abord respecter les usages conventionnels des domaines du web, de l’applicatif, du logiciel ou du syst\u00e8me d’exploitation. Ces usages se sont impos\u00e9s peu \u00e0 peu comme une convention depuis la cr\u00e9ation des premi\u00e8res interfaces num\u00e9riques, instituant un code qu’il est int\u00e9ressant de transposer en structure grammaticale.<\/p>\n\n\n\n

<\/div>\n\n\n\n

La base grammaticale<\/h3>\n\n\n\n

Si nous devions ainsi percevoir la structure d’une page comme celle d’une phrase, nous pourrions alors d\u00e9finir la structure suivante :<\/p>\n\n\n\n

\u00c9l\u00e9ment visuel statique = Groupe nominal (GN)<\/strong>\n\u00c9l\u00e9ment visuel d'interaction = Groupe verbal (GV)<\/strong>\n\nGroupe nominal (GN)\nPhoto = Nom\nPictogramme = Nom\nCouleur = Adjectif\n\nGroupe verbal (GV)\nBouton = Verbe\nPicto dans un bouton = Compl\u00e9ment d'objet\nCouleur dans un bouton = Adverbe<\/pre>\n\n\n\n
[[GN]-[GV]]<\/p><\/blockquote><\/figure>\n\n\n\n
Avec ces quelques \u00e9l\u00e9ments simples, il para\u00eet plus facile de percevoir la conception d’une page comme l’\u00e9criture une phrase.<\/p>\n\n\n\n
Exemple<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
<\/p>\n<\/div>\n<\/div>\n\n\n\n
[ Je suis sur la page produit (nom) verte (adjectif) [SN] ] et si [ je clique sur le bouton (verbe) \u00ab\u00a0acheter\u00a0\u00bb rouge (adjectif) avec un picto panier (compl\u00e9ment d’objet) [SV] ] alors je d\u00e9clencherai un tunnel d’achat.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
La syntaxe<\/h3>\n\n\n\n
\u00c0 pr\u00e9sent ajoutons \u00e0 cela la notion de grille et layout, permettant d’indiquer au designer ce qui grammaticalement serait correct ou non :<\/p>\n\n\n\n
Exemple<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Exemple d’une page \u00ab\u00a0liste de produits\u00a0\u00bb, affichant un colonnage de 3 blocs, compos\u00e9s d’une vignette, un titre d’un texte et d’un bouton.
Un layout est donc une syntaxe permettant la construction d’une page.<\/p>\n\n\n\n
<\/div>\n\n\n\n
L’Atomic Design comme infrastructure<\/h3>\n\n\n\n
L’Atomic Design permet un raisonnement par combinaison d’\u00e9l\u00e9ments, tr\u00e8s proche d’une structure grammaticale. Une structure mol\u00e9culaire type \u00ab\u00a0menu\u00a0\u00bb comportant des atomes type \u00ab\u00a0bouton\u00a0\u00bb peut facilement \u00eatre compar\u00e9e \u00e0 une phrase comportant plusieurs verbes d’action. Leur ordre a une importance, et le modifier reviendrai \u00e0 changer le sens de la phrase. Ainsi lorsque vous cr\u00e9ez une mol\u00e9cule, vous ordonnez une locution vectrice de sens.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Le responsive comme changement syntaxique<\/h3>\n\n\n\n
L’exercice du travail d’adaptation au support des interfaces peut \u00eatre per\u00e7u comme un re-formulation syntaxique. La proposition verbale est recompos\u00e9e sous une autre forme tout en gardant l’essence. Cet effort d’adaptation peut alors amener \u00e0 raccourcir ses id\u00e9es et les synth\u00e9tiser.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Les autres \u00e9l\u00e9ments<\/h3>\n\n\n\n
D’autres \u00e9l\u00e9ments peuvent s’inscrire dans cette comparaison. On peut ainsi ajouter les quelques \u00e9l\u00e9ments suivants :<\/p>\n\n\n\n