En ce qui concerne le côté UX et UI de notre projet, nous avons décidé de fonctionner sous le principe de Design System, et pour ne rien oublier dans la composition de celui-ci, nous avons mis en place une check list.
Après avoir défini nos Design Principles et notre Voice & Tone, éléments indispensables pour nous donner la direction à prendre en terme de design, nous nous sommes dit que nous allions diviser les essais d’UI-kit entre 3 étudiants, afin de tripler les idées de design, avant de mettre en commun pour rassembler nos idées.
L’un d’entre nous a fait quelques tests concernant les composants de l’UI-kit.
Il a défini une couleur de noir et de blanc pour ne pas prendre le noir et le blanc à 100%, en s’assurant de checker les contrastes entre ces nouvelles couleurs et les 3 que l’on avait déjà choisies (cyan, magenta et vert). À savoir que l’on ne peut donc pas utiliser de background magenta avec du texte noir, sinon nous n’obtenons pas un contraste triple A. C’est pour cela que cet étudiant n’a effectué que des tests de boutons avec du vert et du cyan, les deux couleurs qui, mixées avec du noir, fonctionnaient en contraste triple A.
Il a fait quelques tests d’effets de boutons, ainsi que des tests de liens. Les tests à l’extrémité de droite étant ceux qu’on ne gardera finalement pas.
Le deuxième étudiant s’est concentré sur le header et le footer (qu’il avait déjà commencé en amont). Avant tout, il a fait des recherches, de la vieille, et il a pu remarquer que la plupart des sites web des musées sont simples et épurés. Il relève également qu’au niveau de la navigation, il y a un souvent un bouton principal mis en avant, soit par un encadrement, soit par une couleur différente qui permet de faire l’interaction principale du site. Au niveau du footer, la plupart des sites web de musées reprennent les informations importantes de ceux-ci ainsi que les liens importants.
Pour commencer, il a établi trois liens principaux dans sa navigation :
Au niveau du design de header en version mobile, il a conçu un burger menu, avec le lien souligné pour montrer qu’il est actif. Comme précisé précédemment, vu que le dernier lien qu’il a fait est considéré comme un bouton, il l’a encadré en fonction de l’UI-kit établi au préalable.
