scroll down
images wireframes

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.

illustration

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.

images wireframes

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.

images mock up site internet incrusté

Credits