Outils

  • HTML / CSS
  • Jacascript
  • Suite Adobe

Type

Travail de fin d'année

Description

Je m'appelle Mailys Fernandes et j'ai actuellement 22 ans et je suis témoin de violences conjugales. Depuis petite, j'ai pu percevoir ces évènements qui se déroulaient sous mes yeux sans vraiment comprendre et puis tout c'est calmé jusqu'à ce qu'il y a 5 ans. Des scènes de violence qu'un enfant ne devrait pas voir vis-à-vis de ses parents. Ça m'a détruite et brisé le coeur. Je ne savais pas comment gérer cette frustration qui était en moi, ni même à qui me tourner afin d'en parler. Par la force des choses, je me suis décidée à adopter quelques astuces pour libérer mon esprit afin d'aller mieux.

images wireframes

01. Le concept - Une idéé ?

L’idée j’en avais aucune jusqu’à ce que l’on m’annonce le sujet même si celui-ci était assez vaste mais il permettait de partir dans diverses directions. Je me suis tournée finalement vers un side projet storytelling, je ne savais pas réellement quel sujet j’allais aborder mais je voulais faire quelque chose de différent. Puis finalement l’idée est venue assez facilement, un sujet dont on en parle peu et qui toucher n’importe qui.
Après un échange avec mon professeur Mr Bourgaux, il m’a conseillé de ne pas partir trop loin au niveau du design ainsi que du contenu, que cela ne s’éloigne pas trop de mon témoignage et du message que je veux faire passer.

02. Les wireframes — Un crayon et une feuille

J’ai dessiné des croquis afin de visualiser le projet final et de faire le tri de mes idées, j'ai structuré également toutes mes sections de mon futur contenu. Cette étape n’a pas été trop difficile étant donné que le sujet m’inspirait et que je savais dans quelle direction je voulais y aller.

illustration

03. Adobe — Mise au propre

Une fois décidé, j’ai commencé à créer mes visuels au propre en visualisant où je poserais mes interactions sur un logiciel nommé Photoshop. Ensuite je me suis rendu compte que certains éléments se devaient être ajoutés et d’autres supprimés.
J'ai touché au dessin grâce à Illustrator. J'ai commencé par dessin mes croquis vaguement sur papier pour les ressortir finalisé plus tard, cette étape m'a prise énormement de temps car il faut savoir que je ne sais absolument pas dessiner, mais j'y suis arrivée. Je les ai ensuite vectorisés dans le logiciel en les compressant en SVG afin de les animer plus tard.

illustration

04. Le design — Les couleurs

J'ai voulu associer mon expérience comme une histoire. Je suis resté sur une base de trois couleurs car c'était un choix de ma part de ne pas trop ajouter des touches colorimétriques. Le noir et le blanc font référence au passé et à une partie douloureuse de ma vie. Je n'ai pas choisi un noir profond, j'ai opté pour un gris foncé afin de ne pas trop contraster avec le blanc. J’ai choisi la couleur bleue/vert qui dans la culture occidentale fait référence à l’espoir, garder espoir d’aller mieux et d’affronter l'aléa de la vie.

04. Le design — Les typographies

J'ai utilisé la police Work Sans car elle possède beaucoup de graisses ce qui nous permet de jouer avec sa graisse, ses contours, elle reste toutefois facile à la lecture. Je l'ai utilisé principalement pour les titres et sous-titres.
La typographie Krub est employée pour les textes, les paragraphes, elle reste simple, facile à lire.

05. Remise en question — Les changements

Après mon passage à l’examen au mois de juin, j’ai pu prendre en compte tous les aspects qui n’allaient pas sur mon site. Je ne me suis pas avantagée non plus car lors de mon oral j’ai un peu « rabaissé » mon projet car je n’étais pas satisfaite du rendu. J’ai noté les remarques de mes professeurs ainsi que de mes amis pour améliorer tout ça.

illustration

06. Intégration — Du JS par là, du CSS par ici..

À présent, le plus gros du travail restait à venir, coder. J'ai pris confiance en moi au niveau du code après deux années, je suis plus seraine et j'ai compris de mes erreurs passées. Je ne suis pas tout à fait réconcilier avec le Javascript mais avec l'exercice précedent "Movie Wishlist", je me sens plus à l'aise avec ça.
Pour ce projet, j'ai utilisé GULP et SASS ainsi que pour certains éléments, je me suis informé grâce à des tutoriels et j'ai demandé de l'aide à mes camarades lorsque j'étais bloquée.

07. Le rendu — Le dénouement

Je me suis réconciliée avec le code grâce à certains exercices que j’ai codé durant cette année, j’ai pu me familiariser un peu plus avec le JS par exemple. J’ai plus confiance en mes capacités et à ce que je créer. au final, mon side-projet est l'aboutissement d'une année.

images mock up site internet incrusté

Credits