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 Solutions 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.

"enfant heureux"

 

 

 

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

Voici un tableau simple
Élément 1Élément 2
Élément 3Élément 4