Guid'Tricks

webdesign intégration landing page plan de comm’
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

Skater

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.

Skater

La Maquette

Du webdesign !

Mockup de la maquette de Guid'Tricks

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.

Mockup de la maquette de Guid'Tricks

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

Réseaux sociaux

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.

Réseaux sociaux

Intégration Web

Un peu de code !

Mockup du site de Guid'Tricks

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.

Mockup du site de Guid'Tricks

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, …)