Guid'Tricks
gestion de projet
Voici un de mes projets étudiants de première année. Dans celui-ci, nous étions par groupe de 3 et nous devions créer une Web App qui devait permettre la géolocalisation de spots pour les « riders » (pratiquants de trottinette, skate, etc …). Cependant, nous devions d’abord réaliser la landing page pour la promotion du projet . J’ai eu le rôle de chef de projet et j’ai tout fait pour mener à bien celui-ci. J’ai donc énormément travaillé dans tous les aspects du site.
Le Projet
Le contexte
Le Projet
Le contexte
Voici un de mes projets étudiants de première année. Dans celui-ci, nous étions par groupe de 3 et nous devions créer une Web App qui devait permettre la géolocalisation de spots pour les « riders » (pratiquants de trottinette, skate, etc …). Cependant, nous devions d’abord réaliser la landing page pour la promotion du projet . J’ai eu le rôle de chef de projet et j’ai tout fait pour mener à bien celui-ci. J’ai donc énormément travaillé dans tous les aspects du site.
La Maquette
Du webdesign !
J’ai travaillé dessus en grande partie, j’ai voulu donner un côté « street » au projet. On retrouve notamment ce sentiment dans l’arrière-plan du site. Concernant l’harmonie colorée, le bleu devait rappeler le côté fraîcheur, jeunesse. Le jaune rappelle un esprit de joie. Et enfin, le noir encore une fois ce côté « street ». La typographie, elle aussi devait rappeler les éléments cités précédemment. Le site était en mobile-first et j’ai donc optimisé le menu pour que l’utilisateur ait une meilleure expérience.
La Maquette
Du webdesign !
J’ai travaillé dessus en grande partie, j’ai voulu donner un côté « street » au projet. On retrouve notamment ce sentiment dans l’arrière-plan du site. Concernant l’harmonie colorée, le bleu devait rappeler le côté fraîcheur, jeunesse. Le jaune rappelle un esprit de joie. Et enfin, le noir encore une fois ce côté « street ». La typographie, elle aussi devait rappeler les éléments cités précédemment. Le site était en mobile-first et j’ai donc optimisé le menu pour que l’utilisateur ait une meilleure expérience.
La Communication
Le plan de communication
Nous devions réaliser un plan de communication pour notre projet. J’ai donc élaboré une stratégie de communication sur différentes plateformes online et offline. J’ai réalisé le gantt de cette stratégie. J’ai aussi dû rechercher des partenariats possibles.
La Communication
Le plan de communication
Nous devions réaliser un plan de communication pour notre projet. J’ai donc élaboré une stratégie de communication sur différentes plateformes online et offline. J’ai réalisé le gantt de cette stratégie. J’ai aussi dû rechercher des partenariats possibles.
Intégration Web
Un peu de code !
La Web App mobile-first a été intégrée en HTML / CSS / JS du côté du front-end. Et du côté du back-end, le PHP / MySQL s’en chargeait. Du côté de la landing page, celle-ci a été réalisée à l’aide du framework Bootstrap, et est donc responsive.
Intégration Web
Un peu de code !
La Web App mobile-first a été intégrée en HTML / CSS / JS du côté du front-end. Et du côté du back-end, le PHP / MySQL s’en chargeait. Du côté de la landing page, celle-ci a été réalisée à l’aide du framework Bootstrap, et est donc responsive.
Outils Utilisés
Les logiciels, et autres qui m'ont aidé
Adobe XD utilisé pour le maquettage.
Filezilla utilisé pour déplacer les fichiers sur le serveur du département.
HTML / CSS pour structurer et habiller le site.
Javascript pour ajouter de l’interaction, notamment au niveau du menu.
PHP / MySQL, pour gérer les données sur le serveur back-end.
Google Suite a permis de stocker les documents en ligne afin de ne pas les perdre.
Fontawesome, la bibliothèque d’icônes.
Bootstrap, pour le côté responsive de la landing page.
Tom’s Planner pour la réalisation du Gantt
et d’autres outils pour l’analyse des concurrents, le partage des posts, les designs, … (Canva, Majestic SEO, Facebook, Instagram, …)