Qu'est-ce qu'un système de design ?
Les systèmes de design sont des librairies d'éléments réutilisables : Titre, case à cocher, bouton, etc. Ces composants et leur utilisation répondent à des règles fournies dans une documentation. Mais alors pourquoi ne peut-on pas s'en passer sur des projets à vocation de durer et porter étendu. Elles sont le garant de la cohérence des écosystèmes. Sans elles, se repérer et maintenir des sites et des plateformes seraient chronophages et impensables.
Imagier, si à chaque fois que l'on construit une route, on se pose la question du style et de la position, du propos de chaque panneau. Si on se mettait de temps à autre à faire des signalisations de limitation de vitesse, parfois bleu, rouge, sur un support carré, circulaire. Circuler serait une tâche plus complexe et choisir l’aspect de signalisation serait des décisions à n'en plus finir.
Les systèmes de design et leurs avantages
Avec le système de design, les éléments sont plus clairs. Un panneau bleu, c'est l'autoroute, un marron les lieux culturel, un rectangulaire entouré de rouges une ville. C'est un peu pareil du côté numérique. Un bouton principal à tel aspect, il y a un nombre de couleurs limité et dont l'usage est défini.
Une des particularités des systèmes de design du numérique et leur vocation à évoluer perpétuellement. Là où le Code de la route n’évolue très peu sur son aspect visuel et sémantique. Les sites changent de nom, de typographies, de couleurs.
Les principes de design
Un principe de design, c'est une règle à laquelle obéit l'ensemble du système. Par exemple, site mon principe est le responsive ou le mode nuit, tous mes composants et mes maquettes devront prendre en compte ces définitions. Pour certain concepteur, les principes de design doivent être mesurables. Ainsi, on passerait de "responsive" à "s'affiche de manière optimale sur des écrans de 320px à 1400px".
Règles de contenus
Une interface, c'est aussi beaucoup de contenus et d'intitulés. Pour conserver une cohérence sur l'ensemble d'un écosystème, des règles d'écritures sont transmises et appliquées par l'ensemble des contributeurs.
Utilise-t-on un ton plus amical ou corporate, énergique ou posé, accessible ou élitiste, le vouvoiement ou le tutoiement, Continuer ou continuez. Ces décisions sont souvent prises en fonction des valeurs de la marque. Si on conçoit un système de design pour une banque ou une application à destination des auditeurs d'une radio pop, notre manière d'écrire sera radicalement différente.
Les variables de design
Fréquemment caché derrière l’appellation opaque "Design Token", les variables de design renferment des valeurs. Par exemple, la variable "Couleur principale" peut contenir la couleur verte. Ainsi, je peux utiliser la variable dans toutes mes maquettes et sur mon site. Lorsque je souhaite changer les couleurs de mon site, je n'ais qu'à modifier le contenu de ma variable. Cette petite modification se répercutera sur l'ensemble de mes créations.
Maximiser son recours facilite le maintiens dans le temps du système design. Les variables s'appliquent à de nombreux éléments :
- Couleurs
- Style de bordure
- Spécificité d'une ombre portée
- Taille d'un arrondi
- Réglages d'une typographie
- Paramètres d'une transition
Nommer ces variables
Bien nommer une variable, c'est penser à sa clarté et à sa cohérence de structure avec celles déjà existantes. On peut appeler ces variables de manière minimaliste avec cette structure :
Les éléments du système de design
Bloc contenu
- Liste à puce
- Mise en exergue
- Accordéon (ou dépliant)
- Tableau
- Citation
- Image avec légende
- Carrousel d'images
Lien et bouton
- Bouton primaire
- Bouton secondaire
- Bouton tertiaire
- Lien
Navigation
- Haut de page
- Pied de page
- Menu
- Fil d'Ariane
- Pagination
- Moteur de recherche
- Tabulation de navigation
Formulaire
- Champs texte
- Label
- Zone de texte
- Message d'erreur et de succès
- Case à cocher
- Bouton radio
- Commutateur
- Sélectionneur d'interval
- Groupe de bouton
- Champs selection de valeur
- Champs avec bouton
- Facette activable
Informatif
- Tag d'information
- Bandeau d'information
- Message d'information (critique, neutre, positif)
- Indicateur de chargement
Modales
- Modale centrale
- Volet latéral
- Alert Toast
Les tuiles
- Tuiles de produit
- Tuiles de blog
Sections
- Hero (première section d'une page)
- Bloc de mise en avant de la newsletter
- Bloc de remonté de produit
- etc.
Ressources
- Les icônes
- Les illustrations / photos
La documentation
Pour échanger et transmettre les informations entre les métiers, les systèmes de design s'équipent de documentation. Cette dernière regroupe l'aspect du composant, les règles d'usages, des liens éventuels vers des référentiels et son code pour être utilisé rapidement les équipes de développements.
Pour s'inspirer de ces systèmes de design, le site Component Gallery répertorie un certain nombre d'entre eux.
Retour aux articles