Systèmes
Avant d’aborder les systèmes en design, intéressons-nous à ce qu’est un système. Un système est déterminé selon:
- sa frontière: le critère d’appartenance au système
- ses interactions avec son environnement
- ses fonctions (qui définissent le comportement des entités faisant partie du système, leur organisation et leurs interactions)
- sa mission, son rôle, et les ressources nécessaires
Un sous-système (ou module ou composant) est un système faisant partie d’un système de rang supérieur.
Kurt Koffka, 1923, Gestalt Theory: Holism
The whole is other than the sum of the parts…
This is not a principle of additionDécouverte de la qualité fondamentale d’un système:
différents éléments mis ensemble forment un résultat unique.
Russel Ackoff, 1957, Operations Research
Systems is more than the sum of its parts
Une fois que des éléments combinés forment un système, le résultat est plus que simplement la somme de ses éléments combinés.
Design Systems
Définition
Un design system est un ensemble modulaire et cohérent de:
- composants réutilisables (UI Kit – graphique et/ou codé)
- de styles visuels (Style Guide)
- de normes claires (Documentation, Patterns: langage de conception)
Les design systems sont employés pour la conception d’interfaces complexes: applications mobiles, sites webs, identité digitale globale et/ou multi-canaux.
Le but est de garantir une source de vérité unique et de faciliter une meilleure collaboration en équipe.
On n’est pas obligé d’appliquer cette méthode pour chaque projet, cela fait surtout sens lorsque l’on travaille à plusieurs, sur des projets plus conséquents, et/ou que l’on cherche à rationaliser son processus de design d’interfaces.
Documentation
C’est la partie la plus importante d’un design système! Un design système trouve son utilité que s’il est bien compris, et utilisé par des personnes collaborant ensemble. Que cela soit sous forme d’annotation, et/ou de descriptions textuelles, c’est le complément qui rends accessible et limpide comment fonctionne le système.
Style Guide
Le style guide regroupe tous ingrédients graphiques primitifs:
Couleur, Typographie, Espacement, etc.
UI Kit
Un kit d’interface regroupe tous les composants créés à partir du style guide.
Pattern Language
Cela regroupe des modèles d’interface détaillant les flux d’utilisations, par exemple: un formulaire de connexion, de création de compte, etc.