TFE — Un moment d’égarement

Cette troisième partie de mon travail a été très difficile pour moi. Entre plusieurs remises en questions personnelles, et un éparpillement total entre recherches, code et design, j’ai dû lutter psychologiquement afin de ne pas baisser les bras.

Finaliser ma base de données

L’un des objectifs que je m’étais fixés lors de ces deux semaines était de finaliser entièrement ma base de données en sélectionnant 30 jeux de société accessibles et qui, d’après le sondage que j’avais réalisé auparavant, faisaient l’unanimité auprès des amateurs. Voici le lien menant à cette database : https://docs.google.com/spreadsheets/d/1gyV4DFP5tpw_A2kWM5IgRfNXqG4WFNQt3trNUn6ztX8/edit?usp=sharing

Le GoogleSheets de ma base de données

Mais cette base de données n’est malheureusement pas encore terminée. Je compte encore ajouter pour chaque jeu les informations qui lui sont propres comme son prix moyen, son ou ses auteurs, l’âge minimal nécessaire, une brève description et une première explication des règles rédigée par mes soins. Ça risque donc de me prendre encore pas mal de temps.

J’ai par la suite converti le fichier csv tiré de ce document en un tableau javascript afin de pouvoir le manipuler dans mon application.

Ma première approche graphique

C’est lors de cette partie que j’ai également commencé à travailler sur la direction artistique qu’allait prendre mon projet. La première remarque que je me suis fait était que je voulais qu’on retrouve dans mon application des éléments graphiques venant de jeux de société comme des cartes, des dés ou des tuiles par exemple. Pour ce qui est des couleurs, je savais d’ores et déjà que j’avais besoin d’une palette vive et moderne. Le bleu me semblait indispensable car il colle parfaitement à l’univers graphique du monde des jeux de société de manière générale. Il fallait donc que je contraste celui-ci avec une autre couleur et c’est le orange qui m’a le plus plu. J’ai également ajouté une troisième couleur pour élargir mes possibilités, et celle-ci est le vert.

Ma palette de couleurs

Un nom et une baseline pour mon projet

Afin de trouver un nom qui conviendrait parfaitement à mon travail, j’ai décidé de faire un brainstorming sur mon concept. Jeux, initiation, novices, aléatoire, conseils, … Sur base de ces mots, j’ai tenté différentes combinaisons :

• Ludinit ;
• Tyroll ;
• Ludos ;
• Ludor ;
• Ludice ;
• Gaminit ;
• Ludoroll.

Et c’est ce dernier nom qui m’est resté le plus en tête. C’est donc celui-là que j’ai décidé de garder actuellement.

Pour ce qui est de la baseline, je savais qu’il fallait qu’elle fasse comprendre aux utilisateurs à quoi sert l’application en quelques mots. C’est pourquoi j’ai décider de partir sur ceci : “Découvrez votre premier jeu de société d’un seul jet”. Je trouve qu’elle résume bien mon concept et le jeu de mot intégré m’amusait plutôt bien.

Réfléchir à un logo

Concernant mes recherches au sujet du logo, j’ai très vite eu l’idée d’un dé entouré de deux flèches afin d’évoquer à la fois le monde des jeux et la possibilité de générer aléatoirement un résultat. Je trouve que ce concept représentait assez bien mon projet. J’ai ouvert illustrator et j’ai commencé par dessiner un dé en perspective, j’ai ensuite placé les faces 1, 2 et 3 pour éviter de surcharger avec les plus grands nombres. Puis j’ai réalisé plusieurs déclinaisons de l’idée que j’avais en tête jusqu’à arriver à un résultat plutôt satisfaisant.

Évolution de la création du logo de LudoRoll

J’ai ensuite tenté plusieurs compositions avec le nom et une alternative colorimétrique. Il fallait également que mon logo fonctionne sur tous types de fond, c’est pourquoi j’ai également intégré une version plus lisibles sur les fonds sombres ou multicolores. La police que j’ai décidé de choisir pour ce logo est actuellement Prosto One, mais j’hésite encore à en changer par la suite.

Mes différentes compositions de logo

Une remise un peu catastrophique

À la fin de cette troisième partie de mon travail, il était prévu que je rende, comme tous les autres élèves, un MVP (Minimum Viable Product). Le problème étant que je ne m’étais pas encore concentré sur le code avant cela. Il me restait quelques jours avant la date fatidique de remise et je n’avais ni prototype à présenter, ni début de code. Il fallait donc que je fasse un choix rapidement. Soit je décidais de réaliser des wireframes en débouchant sur un protoype figma (ce qui aurait probablement été la meilleure solution) soit je choisissais de coder ma fonctionnalité principale en mettant le design de côté. J’ai malheureusement choisi la deuxième option. À partir de là, il fallait que je détermine rapidement dans quel langage de programmation j’allais coder l’entièreté de mon application. J’ai d’abord pensé partir sur du PHP car grâce aux cours de Mr. Terranova, j’avais déjà réalisé une application plutôt similaire avec une base de données contenant des livres. Je me suis alors replongé dans les différentes slides qu’on avait eues lors des cours afin de réapprendre à utiliser ce langage. J’ai d’ailleurs rapidement su créer ma fonctionnalité grâce à un formulaire et sa méthode POST. Super, tout fonctionnait très bien, sauf que je n’arrivais pas à intégrer un bouton permettant à l’utilisateur de relancer un nouveau tirage… Après plusieurs recherches sur internet, j’ai compris qu’il y avait très peu de documentation récente sur ce langage et je n’ai pas trouvé de solution “rapide” et compréhensible à mon problème. J’ai donc pris la décision de changer en partant sur un langage avec lequel j’avais pu beaucoup travailler pendant mon stage, React. Le problème est que je n’ai donc pas eu énormément de temps pour coder quelque chose de propre et efficace. J’ai d’ailleurs fait face à un autre problème étant le transfert du build d’un projet react sur OVH, mais j’ai réussi à trouver une solution temporaire pour que la fonctionnalité soit tout de même un minimum testable. Mais bon, même celle-ci n’était pas totalement terminée et puis je n’avais aucun contenu à proposer.

Le petit point positif est que les différents retours que j’ai pu avoir était des propositions auxquelles j’avais déjà pensées mais que je n’avais pas expliquées dans mon MVP. Mais bon, avec le peu de contenu que j’avais, c’était normal de ne pas avoir plus de retours.

Le focus pour la suite

Durant les deux prochaines semaines, je compte me consacrer d’avantage aux wireframes de mon projet, il faudrait que je termine entièrement celles-ci afin de pouvoir figer mon design et d’ensuite pouvoir plus tranquillement coder l’application. Je pense également potentiellement intégrer le framework CSS Tailwind qui me faciliterait grandement la tâche pour l’étape du code.

Chapitres

1. TFE — Les débuts ;
2. TFE — Se recentrer sur l’objectif ;
3. TFE — Un moment d’égarement (👈vous êtes ici) ;
4. TFE — Garder le cap ;
5. TFE — La dernière ligne droite.