Le Design System
Le Design System est un guide de conception graphique. Exemple: conception de matériaux Google ( material Design) Gouvernement Américain (US Web Design System). Il est composé d’un ensemble de règles, de contraintes et de principes implémentés dans la conception et le code. On y retrouve tous les composants du site. Le design system est très utile pour faciliter l’expérience utilisateur (la navigation sur le site). Les équipes internes ont la possibilité de construire un logiciel avec des conceptions propres, cohérentes et réfléchies. L’approche vise à mettre l’utilisateur au centre de notre projet.
Le design system regroupe un grand nombre d’éléments, de produits digitaux créés par des designers pour rendre service aux développeurs. L’objectif est de développer l’identité de marque de l’entreprise au travers d’éléments graphiques Du point de vue de l’utilisateur, cela va lui permettre de naviguer sur le site ou l’application de manière cohérente.
Les trois choses importantes à retenir sur le Design System
Les règles : Certaines règles sont inhérentes au design system. Prenons l’exemple d’un bouton cliquable sur une page Internet. Celui-ci doit obligatoirement être accompagné d’un texte ou d’un visuel afin d’attirer l’attention de l’utilisateur.
Les contraintes : Le choix des couleurs est très important et il suit une ligne directrice précise. Il ne peut y avoir que 3 types de couleurs. Les primaires, les secondaires et dites « par défaut ».
Les principes : Comme dit précédemment, l’utilisateur est au coeur de la conception du site Internet. Les principes du design system visent à faciliter les interactions virtuelles entre l’entreprise et l’utilisateur.
Attention : Il faut bien distinguer le Design System d’un style guide. Contrairement à ce que l’on pourrait croire, l’utilisation du design system ne se limite pas à être une simple présentation visuelle. Il concentre tout l’écosystème du site Internet, tandis que le style guide va servir uniquement aux composants du site (les couleurs, la typographie ou les CTA par exemple).
Les framework peuvent être un Design System, mais le Design System ne peut pas être un framework. Il fournit des instructions techniques aux deux. Avec la montée en puissance des Frameworks JS basés sur des composants (par exemple Vue ou React), les Design System sont également axés sur la conception de composants.
Exemple: Le 1er manuel des normes graphique est celui de la Nasa en 1975
Atomic design
Atomic Design is methodology for creating Design System » Brad Frost
On pourrait qualifier l’Atomic Design comme la philosophie du Design System, c’est-à-dire sa façon de le penser.
L’Atomic Design se compose en cinq parties:
Atom : ce sont les blocs de construction de base. Appliqués aux interfaces Web, les atomes sont nos balises HTML, comme un champ de saisie de texte et bouton (les inputs).
Molécules : ce sont des groupes d’atomes liés entre eux pour être les plus petites unités fondamentales. Le champ de saisie de texte et de bouton sont combinés en une recherche.
Organism : ce sont des groupes de molécules réunies pour former une section relativement complexe et distincte d’une interface. La recherche de la molécule est combinée avec des molécules de navigation pour former un organisme d’en-tête.
Template : ils sont composés principalement de groupes d’organismes cousus ensemble pour former des pages. C’est ici que nous commençons à voir le design se mettre en place et la mise en pages en action.
Pages : ce sont des instances spécifiques de templates. Ici, le contenu des espaces réservés est remplacé par du contenu représentatif réel pour donner une description précise de ce qu’un utilisateur verra en fin de compte.
Brad Frost : « As rem craft of web design continues to evolves, we are recognizing the meed to develop thoughtful Design Systems, rather than creating simple collections of web pages… Atomic design is methodology for creating Design Systems »
Traduction : Au fur et à mesure que les métiers de la conception Web continuent d’évoluer, nous reconnaissons le désir de développer des systèmes de conception réfléchis, plutôt que de créer de simples collections de pages Web… La conception atomique est une méthodologie de création de systèmes de conception
Pattern Lab
Définition : Dans le Design System, on pourrait qualifier le Pattern Lab comme l’outil de conception. C’est un générateur de site statique optimisé en PHP et code qui assemble des composants d’interface utilisateur. C’est un moyen rafraîchissant d’aborder les atomes, les molécules, les organismes… [LIEN]
Tools
Il existe de nombreux outils pour réaliser un Design System, tel que Sketch (disponible uniquement sur Mac), Figma, Invision studio ou encore Adobe XD. Ils permettent de créer en Atomic Design vos maquettes pour pouvoir créer votre Pattern Lab.
Versionning
Le contrôle de version est le moyen par lequel différentes versions et brouillons d’un document, comme vos wireframe ou design par exemple, sont stockés et gérés.
Pourquoi est-ce une bonne idée ?
Le Versionning permet beaucoup de choses : grâce à lui, plusieurs personnes peuvent travailler sur le même projet simultanément en ayant la dernière version du fichier. Il permet également d’éviter de se poser la question de savoir quel est le projet le plus récent, et donc d’éviter de les perdre ou de les écraser. On peut communiquer les dernières modifications sans problèmes ainsi que collaborer et travailler ensemble plus facilement.
Collaboration
Définition : Les outils web, sociaux et logiciels utilisés pour faciliter la communication en interne ou avec les clients du projet afin d’obtenir un résultat plus qualitatif en moins de temps possible. Les techniques de collaboration web comprennent le chat par téléphone, chat texte, les conférences, séminaires multi-utilisateurs distants via un intranet ou un système téléphonique.
Tools
Il existe de nombreux outils pour collaborer. En voici deux :
Invision : Il possède un potentiel illimité de collaboration Invision Entreprise fournit les outils de conception dont vous avez besoin sur une seul et même plateforme.
Abstract : Il facilite la collaboration avec d’autres concepteurs . Basé sur le même concept que Git avec ses push, pull, merge, branches, et ses possibilités de laisser des commentaires du travail réalisé.
Il en existe bien plus encore, avec par exemple Zeplin, Sketch ou encore Figma.
Qu’est-ce que l’on recherche dans ces outils ?
Grâce à ces outils, on peut mettre en place au mieux sa méthodologie et son processus de design, travailler plus rapidement avec ses collaborateurs en leur communiquant facilement ce que l’on vient de réaliser mais aussi de garder une trace avant les nouvelles modifications.
De nombreuses agences utilisent les Designs System pour leurs créations graphiques : c’est notamment le cas d’Orbiteo qui utilise cette technologie pour ses clients.
