Qu'est-ce que le système de design (design system) ?
Le système de design regroupe la charte ergonomique et la charte graphique appliquées à ce site Web. C’est un guide pour développer une application, un site web ou toute autre forme de produit ou service digital. Les équipes UX, DA techniques et design peuvent se servir des composants prêts à l’emploi ce qui permet ainsi de garantir une cohérence visuelle.
Dans ce cas-ci, le design system regroupe tous les éléments visuels du site Web.
Si les styles et composantes nécessaires à cette interface se trouvent dans le système de design, ils doivent être utilisés. Voir le site Quebec.ca pour plus de détail.
Si les styles ou composantes ne répondent pas tout à fait au besoin, ou n’existent tout simplement pas, les nouvelles composantes doivent être développées en collaboration avec l'équipe des Communications numériques.
Styles et texte
H1: Il est seulement utilisé dans la partie Image Heros (title)
H2: Voici le style H2
H3: Voici le style H3
H4: Voici le style H4
Normal: Voici le texte normal
Normal gras: Voici le texte en gras
Couleur officielle : #188090
Couleur secondaire: #434343
Éléments visuels servant à mettre de l'emphase
Bouton de type call-to-action
Sert à mettre de l'emphase sur l'action qu'on veut que l'utilisateur fasse.
Par exemple, «Postulez dès maintenant» ou «En savoir plus»
Menu accordéon
Ce type de menu déroulant est utilisé pour éviter de trop longues pages, surtout dans le contexte d'une foire aux questions ou d'une page ayant beaucoup de consignes différentes, comme dans la section Coronavirus.
Ce type de menu déroulant est utilisé pour éviter de trop longues pages, surtout dans le contexte d'une foire aux questions.
Encadré bleu
Sert à mettre de l'emphase sur un court message
Photos et autres éléments visuels
Image Heros
Il y a une image héro sur chaque page, afin de guider l'utilisateur sur le contenu de la page. L'image ne doit contenir aucun texte, et être de préférence, une photos d'une ou plusieurs personnes. La partie de gauche devrait être pâle afin que le titre de la page soit lisible.
Photos
Il est possible d'ajouter des photos dans les pages si elles ont une valeur ajoutée au message. Faire attention à l'accessibilité et toujours remplir le champ <alt>. Pour des raisons d'accessibilité, les images ne doivent pas contenir de texte, le message devant être intégré directement dans la page.
Lignes
Tableaux
| Élément 1 | Élément 2 |
| Élément 3 | Élément 4 |
