Maquettage Figma
Construction de la structure du site, des grilles et des composants UI. Définition de la navigation, des blocs de contenu et des zones visuelles avant le développement.
Graphisme — Projet 05
Site web Toulon Provence Regatta
Création d'un site web complet pour la régate Toulon Provence Regatta, de la maquette à la mise en ligne.
Présentation du projet
Toulon Provence Regatta est une course de régate qui rassemble voiliers et passionnés de voile sur la rade de Toulon. Pour ce projet de groupe, j’ai conçu une partie de la maquette, réalisé des visuels expliquants les étapes d'une régate et conçu le Footer du site.
Avant projet
Avant la maquette finale, nous avons posé les bases du site avec un wireframe structurel puis une première approche graphique. Cette étape permet de valider l’arborescence, la hiérarchie des contenus et l’organisation des blocs avant le travail détaillé sur Figma.
Moodboard et maquettage Figma
Le moodboard a servi à définir l’univers visuel du site : couleurs, typographies, références nautiques et ambiance générale de la régate. Sur cette base, la maquette Figma a structuré l’arborescence, les grilles et les composants réutilisables du site.
Les étapes d’une régatte
Présentation des visuels présents sur le site pour expliquer le déroulement d’une course : du briefing à l’arrivée, chaque étape est illustrée pour rendre le contenu plus pédagogique et immersif sur le site. il fallait que les visuels soient contrastés et que leur contenu soit clair et facile à comprendre.
Footer du site
J'ai été mis en charge de la création du footer du site de la maquette à la version finale. J'ai proposé des versions aux commenditaires qui, lors d'échanges, ont menées à la version finale.
Cette étape présente la première version du footer puis la version finale en adéquation avec les attentes des commenditaires.
Processus de réalisation
Programmation & intégration
Traduction des maquettes en pages web : mise en page responsive, interactions et intégration des visuels produits pour le site TPR.
Création de visuels
Production des illustrations des étapes d’une régatte et du footer, pensées pour accompagner le contenu éditorial et renforcer l’identité nautique du projet.