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 dès mes premières années j'ai pu être témoin de violences conjugales. Je ne savais pas comment gérer cette frustration qui était en moi, ni même à qui me tourner sans recevoir du jugement envers mes proches. Je n'ai voulu déranger personne ni même mes parents, je me tournais sur le internet avec de briefs témoignages mais pas de réels conseils ou solutions.
De ce fait j'ai voulu mettre en place 3 conseils primordiaux lorsqu'on est spectateur de ces évènements en alliant mon histoire personnelle afin qu'on puisse se référer à moi.
01. 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.
02. 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. Je les ai ensuite vectorisés dans le logiciel en les compressant en SVG afin de les animer plus tard.
03. Le design — Les couleurs
J'ai voulu associer mon expérience comme une histoire. Je suis resté sur une base de deux couleurs car c'était un choix de ma part de ne pas ajouter des touches colorimétriques. Le noir et le blanc font référence au passé et à une partie douloureuse de ma vie.
03. Le design — Les typographies
Montserrat possède beaucoup de graisses. Ce qui nous permet de jouer avec certains éléments, elle reste simple, facile à lire.
Early Man et Vast Shadow Regular donnent du rythme et du dynamisme à la page web.
04. 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. Je suis débrouillarde qu'avant et même si j'ai peur d'aller vers les autres encore, je suis moins timide avec le temps et j'ose plus maintenant.
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.
Credits
- Bryan Jennequin — Javascript
- Codegrid — Animation SVG
- Nicolas Vrcc — Curseur