Travail de fin d’étude - Article 04
Il est temps d’arrêter de procrastiner sur tout ce qu’il me reste à faire avant le MVP pour m’y mettre sérieusement !
Comme à mon habitude, je suis une grande fan des … listes, non pas des listes numériques mais bien les bonnes vieilles listes manuscrites, j’adore ! Ça me permet de mettre mes idées en ordre et de pouvoir avec beaucoup de bonheur, barrer les choses que j’ai déjà accomplie !
Beaucoup de discussions virtuelles
– Discussion Slack. M. Bourgaux
J’envoie un Google Doc avec le début de mon chapitre avec les recommandations faite par Kooka pour avoir l’avis d’un deuxième professeur sur mon début d’histoire. Quelques suggestions et on entame la suite !
Une variation dans l’histoire pour une expérience plus complète et une sensibilisation plus prononcée. Des conseils sur la hiérarchie de mes textes.
– Discussion Slack. Kooka
Une nouvelle histoire, un nouvel avis. La création d’un mind map. Des recommandations très enrichissantes. J’aborde la suite avec impatience.
Des commentaires sur mon MVP, une discussion sur mon histoire. On continue et on ne lâche rien.
– Troisième rendez-vous. Kooka
Discussion après discussion. Idée après idée je comprends que je n’arrive pas à avancer sur mon projet car il n’est pas défini à 100% dans ma tête. Ce rendez-vous m’a fait me rendre compte à quel point j’étais perdue au sein de toutes les choses que je veux mettre en place dans mon projet.
Objectif : me recentrer, planifier, comprendre
– Discussion Discord. Professeurs & Élèves
Une analyse de mon MVP par un élève. Des commentaires et des conseils. Un petit pas de plus vers la suite.
Objectif : évoluer, avancer
– Discussion Slack. M. Therasse
Des idées pour la mise en place du code, de l’aide et un peu de stress tout de même. Après d’autres discussions, me voilà rassurée, des choses connues s’offrent à moi.
– Premier rendez-vous Discord. M. Tournay
Quelques suggestions pour la suite, des nouveaux conseils et de la discussion.
Chercher
Un nom de projet, mon cœur balance entre le français et l’anglais et après de multiple griffonnage de mots sur une feuille de papier j’ai, je crois, trouver le nom de mon TFE.
Et non faux espoir…
Malgré toutes les idées que j’avais pu avoir, rien ne me convenait, aucun des ces mots/noms/phrases ne me parlait à l’heure actuelle mon projet s’appelle toujours “Logo”…
Planifier
Trois feuilles symbolisant trois mois, trois mois avant la remise de notre travail de fin d’étude. Un planning trouvé sur Pinterest, des annotations sur les dates des remises. Une nouvelle motivation.
Lien des calendriers : https://kyraina.com/free-chic-2020-monthly-calendar-12-months-12-pages/
Comprendre
L’intérêt d’écrire l’histoire est selon moi de sensibiliser les gens au sujet qui me tient à cœur, malgré la première histoire que j’avais écrite je n’avais pas compris l’importance des choix que pouvait avoir l’utilisateur sur le déroulement des événements. J’ai donc décidé de tout reprendre à zéro.
Une nouvelle page, blanche, par qui et par où commencer ?
– Par qui ?
Nathan, 9 ans, à laissé poussé ses cheveux durant les vacances et est fière de montrer sa nouvelle coupe à ses copains.
– Par où ?
Une histoire de violence psychologique dans le cadre scolaire.
Clarifier
Après avoir compris ce que je veux vraiment et vers où je me dirige. Il a fallu clarifier mes pensées. J’ai recommencé mon histoire sur un Google Doc vierge, j’ai créé une légende colorée.
Malgré ma légende je me suis rendu compte à quel point pour une personne extérieur ça doit être compliqué de comprendre chaque choix dans le scénario et la conséquence qui s’y rapporte. J’ai créé un mind map.
Détailler
Il est grand temps de me décider sur le style que je veux donner à mon TFE. Les débuts que j’avais créés sur mon précédent médium ont quelque peu évolué. Mon projet est composé de trois typographies qui ont chacune un rôle dans la hiérarchisation des mes éléments.
Une typographie sans serif utilisée en regular pour les paragraphes, les boutons de choix et en light pour les boutons “menu”.
Une typographie serif utilisée en bold pour les numéros de chapitre et en bold-italic pour le titre de mes histoires.
Une deuxième typographie serif utilisée en black pour les gros titres dans mon histoire.
Une palette de couleur minimaliste, comme à mon habitude pour laisser la place aux illustrations réalisée à la tablette graphique. Chaque histoire aura sa propre palette de couleur et permettra ainsi de les différencier.
Concernant mes illustrations, j’ai d’abord beaucoup hésité sur premièrement mon envie de dessiner car ce n’est clairement pas ma tasse de thé et deuxièmement je me pensais/sentais incapable de réaliser ce que j’avais vraiment en tête.
Le mot d’ordre à été l’inspiration.
Des illustrations simples mais efficace qui s’accorde avec l’histoire qui est racontée. Uniquement composés de trait et d’aplat, une sorte de flat design. Après de nombreux essais et l’aide de mon papa, le premier Nathan à enfin vu le jour.
Une fois mon personnage final choisi, j’ai commencé les autres illustrations.
Je me suis alors posée une question, est-ce que chaque situation a besoin d’une illustration pour la représenter ? J’ai donc décidé de mélanger deux styles de dessin au sein de mon histoire interactive. Le dessin au trait et ce qu’on appelle le doodling, de petits dessins “gribouillés” rapidement sur une feuille, dans mon cas sur un calque Illustrator.
Le vif du sujet
Le design en lui-même n’a pas été compliqué à réaliser, le plus dur à été de trouver pour chaque page une illustration ou un doodle qui accompagne ma narration.
J’ai également pensé à intégrer du son pour plonger l’utilisateur au sein de l’expérience de manière plus profonde. Je me suis ensuite attaquée à la version mobile… Étant donné que j’ai évidemment travaillé à l’envers, le design mobile a été plus compliqué à faire car la version desktop n’a pas été pensé pour l’adaptation mobile (bravo Emily). Heureusement, ça n’a pas été trop compliqué à adapter.
Pour la version mobile, le seul changement a été de faire disparaître le logo et de laisser les boutons d’actions visibles lors de la lecture de l’histoire.
Une fois toutes mes pages finies j’ai refait un prototype Adobe XD que j’ai envoyé à mes professeurs pour un dernier avis avant de me lancer dans le code.
Après avoir envoyé mon prototype, de nouveaux conseils de M. Bourgaux et Kooka m’aide à faire évoluer mon projet et à améliorer les différentes illustrations pour les rendre plus narrative.
Time sheet
Les prochaines étapes
- Trouver un nom (toujours et encore)
- Compléter les illustrations
- Remettre en forme ma page “contact”
- Finir ma dernière illustration
- Finir la version responsive
- Commencer à coder
À dans deux semaines pour la fin de nos aventures 👋🏼
