Design web & mobile

GHOSTS SMASH – TFA – Charlotte Jacques

Voici la fin d’année qui approche et avec elle, le fameux TFA !
Les objectifs de ce projet ?
Démontrer que je suis apte à passer en troisième, et du coup m’aider à trouver un stage pour l’année prochaine dans une entreprise qui me corresponde le plus possible.
Ci-dessous, toutes les étapes qui m’ont conduite vers la réalisation de ce dossier.

 

1. Phase de recherche

Au début de l’atelier du TFA, nous avons reçu un questionnaire pour nous aider au mieux à bien commencer notre projet.

Tout en tenant compte de ce que je venais de lire et du briefing, j’ai réfléchi à ce que je voulais faire comme projet de fin d’année. Ce qui me plait le plus dans ce domaine, c’est le code, que ce soit en front-end ou en back-end. Je me suis donc penchée sur un projet plus porté sur le code que sur le design.

Pour la fin de l’après-midi, j’avais un projet en tête : un jeu pour smartphone fait presque entièrement en JavaScript. C’est ainsi que « GHOSTS SMASH », un jeu où il faut écraser le plus de fantômes possible, est né.

2. Phase d’inspiration

Une fois le projet défini et le thème validé par mes professeurs, je me suis mise à chercher des inspirations pour mon futur jeu.

J’ai commencé large en prenant des images qui n’avaient rien avoir avec le web mais qui me plaisaient par rapport aux couleurs et à l’atmosphère.

Quand l’ambiance générale que je voulais donner à mon jeu a été plus ou moins définie, j’ai affiné ma recherche d’inspiration. J’ai commencé à regarder des designs de jeux, des applications, des illustrations de fantômes, …

Après tout cela, je voyais déjà beaucoup plus clair dans mon projet: où je voulais aller et ce que je voulais en faire. Malgré que je n’ai pas fait du design une priorité dans ce travail, j’ai veillé au fait que mon jeu soit agréable et ergonomique, comme vous pourrez le voir dans la phase suivante.

3. Phase visuelle

La phase d’inspiration finie, je me suis penchée sur la partie visuelle du projet. Comme c’est la branche du métier qui m’inspire et qui me plait le moins, j’avais quelques appréhensions. Mais finalement, cela c’est agréablement bien passé car j’étais motivée par ce travail.

J’ai décidé d’un set de couleurs de base pour le fond de mon jeu, des couleurs pep’s et dynamiques. J’ai également opté pour un dégradé en oblique vertical qui donne pas mal de mouvements dans le fond.

Ensuite, j’ai dessiné mes fantômes sur illustrator. Afin de varier dans le design du jeu et de sa page de présentation, j’en ai créé 4. Pour ne pas que ça flash de trop avec les couleurs du fond, les fantômes sont travaillés sur 3 couleurs.

Pour la typographie, j’en voulais une qui ne soit ni trop ronde, ni trop carrée non plus. J’ai donc fait pas mal de recherche et la police Khand m’a tapé dans l’oeil.

4. Phase de conception

Après la mise en place du côté visuel, j’ai commencé à créer les wireframes finaux. C’était une étape révélatrice dans mon projet étant donné qu’elle dresse vraiment une vue d’ensemble de ce à quoi mon jeu va ressembler.

Une vision claire et nette dés le début, c’est bien plus facile pour développer par la suite. Plus besoin de chipoter, les détails sont là et on ne pense plus qu’au développement.

Pour les boutons, je suis restée dans le même style graphique que le jeu et la page de présentation. C’est à dire, un dégradé dans la couleur des fantômes et le texte qui reprend les nuances de couleurs du fond.

5. Phase de développement

Place à l’intégration!

Tous les visuels et wireframes étant créés, je peux concentrer l’entièreté de mes forces sur la partie que j’attendais le plus dans ce travail. Ce pourquoi j’ai choisi de faire ce projet, ce que j’aimerais faire le plus possible durant mon stage mais également plus tard si j’ai la possibilité de travailler dans le web: le développement.

J’ai commencé à coder simplement en JavaScript, mais j’ai rencontré quelques difficultés. Après quelques recherches sur le net et en parlant à d’autres étudiants qui, comme moi, faisaient des jeux, j’ai décidé d’utiliser Pixi.js pour m’aider.

Mon jeu est à présent terminé, il ne me reste qu’à fignoler à tête reposée quelques points de détail.

C’est vraiment un projet que j’ai apprécié faire du début à la fin.

Un grand merci à tous mes professeurs qui m’ont aidée dans ce projet, ainsi qu’à mes amis et à ma famille qui m’ont soutenue tout au long de l’année !

     Projet au hasard