Pour commencer
Comment utiliser le Système de Design ?
Le Système de Design a pour but de réunir en un seul endroit l'ensemble des composants et des modèles de conception de l'interface. Pour ce faire, il liste notamment les éléments graphiques et visuels (layouts, composants, codes couleur...).
Il permet donc de concevoir et réaliser un design parfaitement homogène sur toute l'interface.
Le Système de Design s'articule autour de 3 briques : le guide de style, les composants et les classes utilitaires. Grâce à ces 3 briques, vous êtes libre de créer un élément d'interface.
Les 3 axes du Système de Design
Le guide de style
Il fixe les éléments de la charte relatifs aux couleurs, aux tailles de police, aux icônes, etc.
Les composants
Un composant est un ensemble d'éléments agencés, conformément au guide de style, et de façon immuable. Cela implique que :
- On peut assembler des composants les uns avec les autres.
- En revanche, il est interdit de modifier un composant.
- De même, il est interdit de recréer un composant existant (via des classes utilitaires par exemple).
Les classes utilitaires
Il s'agit de classes CSS permettant de créer des éléments d'interface.
La combinaison de classes utilitaires offre de grandes possibilités de composition d'éléments conformes au guide de style.
En revanche, elles ne doivent jamais être utilisées pour recréer un composant qui existe déjà.
Mise en application
A faire :
Règles natives du guide de style
A ne pas faire :
1. H2 surchargé en bleu
2. Label déplacé
3. Couleur du bouton surchargée
Sites Internet qui ont recours au Système de Design de l'ANS
La liste suivante recense les sites Internet qui utilisent le Système de Design de l'Agence du Numérique en Santé. Cette liste est régulièrement mise à jour.