Case Study

Nous y voilà, c’est le travail de fin d’année. La consigne est simple mais plaisante, réaliser un side project.  Un projet qui me ressemble, où je choisis les outils et médias que je souhaite exploiter. Quoi de mieux pour terminer l’année ? Voici donc l’étude de cas de mon projet : Swash, guitariste de l’espace !

Naissance du projet

Pendant deux jours lors d’un workshop dédié à ce travail, j’ai mis en place mes idées en définissant plusieurs axes :

  • Qui suis-je ?
  • Quel rôle je souhaite avoir en web ?
  • Quel type de projet je souhaite mettre en place ?

Je me suis dirigé vers un storytelling mêlant musique et illustration SVG animé, en utilisant le format webapp mobile. J’ai deux mois et demi. 

L’histoire

Le temps est compté, je crée alors une partie de l’histoire pour avoir le temps de lui donner vie. Passionné de musique, de guitare, mais aussi de paysages spatiaux, mon projet s’orientera naturellement vers ces inspirations. Voici le pitch principal :

Swash est un guitariste de l’espace, il doit absolument se rendre au MoonStock Festival sur la planète Mega. Pour faire avancer l’histoire, l’utilisateur va interagir avec Swash et son décor. 

Je décide de me concentrer sur un chapitre où l’utilisateur assiste Swash dans ses répétitions de guitare. 

Croquis et illustrations

Pour ce projet, j’ai voulu exploiter Illustrator et le SVG. Swash, le personnage principal voit alors le jour, voici les premiers essais. 

Premier croquis de Swash
Premier croquis de Swash. 

La structure

Petit à petit et grâce aux différentes inspirations, les choses se précisent et je m’oriente vers une structure pour mon chapitre, avec un système de pages plutôt simple et direct :

  • la page logo ;

  • la page de sensibilisation au son ;

  • la page expliquant le contexte (pitch) ;

  • la page expérience avec tutoriel. 

Le design

Avec la structure, j’ai pu définir clairement le design de mes pages, en ajustant les illustrations pour mettre en scène mon personnage. J’ai également démarré le design de la page de présentation de sorte à faire correspondre l’univers graphique du projet. 

Design de la salle de répétitions
Design de la salle de répétitions. 

Petit soucis, j’ai commencé le design de la page de présentation en version mobile, lorsque j’ai voulu m’occuper de la version bureau, tout était beaucoup trop gros ! Il a donc fallu ajuster mes choix. 

L'expérience

J’ai voulu créer une guitare virtuelle ayant une interface simple à comprendre et à utiliser, il a donc fallu définir les interactions en Javascript. 

Des difficultés apparaissent, il faut penser à beaucoup de choses pour éviter les détournements d’utilisation et bugs, pour rendre cette interface fonctionnelle. Voici une version de test, la guitare est remplacée par des voix, puisque les enregistrements n’ont pas encore été fait à ce stade.

Interface test

L'intégration

Le projet est prêt à être intégré. Element positif et non négligeable, le format web app me permet de commencer par l’integration mobile, pour ensuite basculer vers le responsive et la version bureau. C’est la première fois que je réalise un projet personnel en responsive, j’avais hâte mais la tâche s'avère très complexe. 

Il a fallu batailler avec le SVG intégré directement à l’HTML quand je souhaitais animer des parties précises, surtout au niveau des classe CSS qui font doublons. Mais au final, j’ai surtout utilisé le format image, moins complexe à intégrer. 

Au prix de beaucoup d’efforts et de travail, mais aussi de plaisir, je peux enfin mettre en ligne mon projet et je suis fier du résultat. 

Partir d’une simple idée, la faire cheminer pour enfin lui donner vie, c’est réellement ce qui m’attire dans le web design.