Case Study
Présentation du briefing
L’automne 2022, une nouvelle année scolaire s’ouvre à nous, remplie de défis et d’opportunités. Dans notre classe, nous avons découvert une option passionnante, et pour commencer, nous avons été invités à relever deux défis importants à rendre pour janvier. Grâce à l’aide précieuse de mes camarades, j’ai rapidement compris que IOLCE (“Input Output Lire et Communiquer sur Écran”) serait pour moi un défi de taille, mais j’étais déterminé à relever ce défi avec succès.
Choix de la conférence
J’ai choisi cette conférence car elle m’a semblé intéressante lorsque je l’ai rapidement visionnée en accéléré (en X2). L’image d’un hamburger dans la présentation m’a convaincu que c’était la conférence idéale pour moi, étant donné que je suis un grand fan des hamburgers. Ensuite, je me suis joint aux autres participants qui avaient fait le même choix, car on sait jamais, peut-être qu’ils allaient parler de hamburgers aussi, on ne sait jamais !
Écriture du contenu
Au début du projet, nous nous sommes rassemblés une fois la conférence visionnée pour mettre nos notes en commun et écrire les premiers contenus. Malheureusement, j’ai été déçu de constater que personne n’a parlé de hamburgers lors de la conférence, malgré l’image qui m’avait intrigué. Nous avons tout de même continué à travailler ensemble pour produire les meilleurs résultats possible, même si je n’ai pas pu assouvir ma passion pour les hamburgers.
Ensuite, nous les avons soumis à nos professeurs pour correction. Ils nous ont demandé de faire quelques modifications pour améliorer la qualité de nos textes. Nous avons donc travaillé en équipe pour apporter les changements nécessaires avant de finaliser les contenus de notre projet.
Premier design
Tout le plan de travail XD
Wireframe Papier
Wireframe
Maquette XD
Après avoir finalisé les contenus, j’ai commencé l’étape de création des wireframes. J’ai commencé à les faire sur papier pour établir les grandes lignes de notre projet. Ensuite, j’ai utilisé Adobe XD pour les créer de manière plus détaillée et les rendre plus interactifs. Cela m’a permis de visualiser notre projet sous forme de maquette et d’identifier les éventuels problèmes avant de passer à la phase de développement. De plus, en effectuant des tests utilisateurs sur ces wireframes, j’ai pu prévoir des changements sur le design du site pour améliorer l’expérience utilisateur.
Après avoir créé les wireframes, l’étape suivante a été de commencer à travailler sur les premiers designs, avec des couleurs et surtout une grille. Cela a beaucoup amélioré mon design, je me suis également assuré de tenir compte des résultats des tests utilisateurs pour ne pas modifier complètement le projet.
J'ai aussi fait des modifications sur Adobe XD en tenant compte des retours des différents professeurs.
Le code
Une fois les dernières modifications effectuées sur Adobe XD, j’ai commencé tardivement à coder mon site en essayant de respecter au maximum le design réalisé. Cela m’a permis de mettre en place le code pour que le site soit fonctionnel en prenant en compte les retours obtenus lors des tests utilisateurs. Cette étape a demandé une grande attention et de la précision pour s’assurer que le résultat final corresponde le plus possible au design initial. Malgré quelques prises de tête liées à des bugs, j’ai essayé de ne pas baisser les bras et de fournir un résultat final qui correspond le plus possible au design initial et qui est, à mon avis, assez satisfaisant.
Conclusion
En résumé, la réalisation de ce projet m’a appris l’importance de ne pas remettre à plus tard les tâches importantes. Cependant, j’ai appris beaucoup de choses et j’ai découvert de nombreuses techniques et outils qui me seront utiles pour les projets à venir. Malgré tout, je suis un peu déçu qu’il n’y ait pas eu plus de références à des hamburgers, surtout celui qui m’a fait craquer.