« Aidons les enfants »
Design Web - Projet client - 2025
Ce projet était un devoir dans le cours de Design Web mais aussi une occasion pour une SRG d’avoir un site pour avoir plus de visibilité. Nous devons respecter les besoins et envie du client :
- Rendre son site visible afin de pouvoir rassurer les futurs jeunes qui devront habiter au Vieux Moulin;
- Permettre de faire des dons et d’avoir plus de bénévolats;
- Avoir un accès pour les juges aux documents judiciaires;
- Rassurer également les parents sur l’entrée de leur enfant au Vieux Moulin.
Évidemment, tout le site devait être adapté pour les utilisateurs, attrayant et ergonomique.
1 - Recherches - Cahier des charges
Tout d’abord, il fallait créer un cahier des charges correspondant aux demandes du client. Dans le cahier des charges nous avons :
- Présentation générale
- Contexte (projet pédagogique, dons)
- A propos (SRG, enfants placés…)
- Objectifs du site (rassurer, dons, visibilité…)
- Envie du client (vie, couleurs, photos, réalisme…
- Analyse
- Benchmark (analyse du site existant et concurrence)
- Public cible
- Spécifications fonctionnelles
- Arborescence (listes des sujets)
- Rubricage (navigation)
- Fonctionnalité (contact, don…)
- Contraintes techniques (accessibilité, utilisabilité…)
- Ressources et Outils
- Contenus (dons, maison, histoire…)
- Outils (WordPress)
- Planning
- S’organiser pour rendre le projet à la bonne échéance
2 - Recherches - Personaes
Ensuite, on a fait des personaes, des personnes qui ont certains besoins et qui nous servent de fil conducteur pour la création de notre wireframe. Ils incarnent tous différents profils qui servent à la création du site et qui pourrait être un potentiel utilisateur. Ici les personaes ont comme profil : jeunes qui rentrent, parents, donateurs, bénévoles, entreprises, futur employé, ancien pensionnaire et juge.
3 - Recherches - Parcours utilisateurs
La prochaine étape est de faire les parcours utilisateurs pour les personaes. Les parcours utilisateurs sont le chemin que l’utilisateur fera dès l’entrée sur le site jusqu’à sa sortie. Dans ces parcours, il y a le chemin qu’il fait l’interaction avec le site, son ressenti, les problèmes qu’il pourrait avoir et les solutions. Ça nous permet de voir ce qu’on peut mettre ajouter sur notre site et ce que les utilisateurs pourraient ressentir et ce qu’on veut leur faire ressentir.
4 - Recherches - Benchmark
Après avoir fini les parcours, la dernière étape de la recherche c’est le benchmark. On prend 3 sites qui ont la même fonction (dont un qui a été montré par le client) et on l’analyse selon une grille qu’on construit.
A la suite de cela, on retire les éléments qui ressemblent, que l’on trouve intéressant pour notre site.
Ici, j’avais pris un site d’une maison de jeunesse à Saint-Ode, un site pour le décrochage scolaire et un autre qui ressemble fort à notre client sur une autre SRG.
Parfois on peut aussi analyser le site déjà existant si il y en a un mais ici il était vraiment minime.
5 - Création - Wireframe
Ensuite on commence le design avec le wireframe. On fait notre design le plus pure, sans couleur, sans police juste avec la disposition que l’on veut ainsi que les éléments : textes, images, navigation… Cette partie nous permet de voir comment on peut agencer les choses et ce qu’on peut y mettre. Ici il reste assez classique.
6 - Inspiration - Moodboard
Après on passe au moodboard de notre futur site. On vient y mettre les mot-clés principaux associés au client et au projet, ils vont nous servir à trouver plusieurs ambiances et inspirations pour le design. Donc pour chaque mot-clé on va chercher des sites ou designs qui vont être en accord avec ce mot et qui pourrait être un piste pour le client. Ça nous permet aussi de lui montrer vers quel style on veut partir et voir si cela lui convient avant de commencer le design.
7 - Création - Design
Voilà l’étape du design. On vient y mettre la police, les images, la couleur et tout ce qu’il faut pour rendre un design attractif et ergonomique. Pour ce site, le plus important était d’attirer les jeunes par la couleurs, les images, dessins et autre… Il fallait vraiment un design pour les enfants, pour les rassurer et les soulager un minimum.
8 - Création - WordPress/CSS/JavasScript
La dernière étape est de créer le site. Pour ce projet, nous avions comme obligation d’utiliser WordPress comme cms, c’est un outil qui permet de créer, gérer et modifier facilement un site web sans avoir à coder tout à la main. Cela permettra au client de savoir facilement gérer son site sans tout casser. Nous devons rendre l’interface administrable et le plus facile possible pour le client. Pour modifier ça, il faut faire le php, c’est là où on ajoutera les différents champs, par exemples : les maisons, les dons, les règles… Cette partie remplace la partie html. Après il faut toujours faire du css voir scss pour styliser le site et également du JavaScript pour animer le site.