Projet web BUT 2 autour de la régate Toulon Provence Regatta : création du site, de la maquette à l’intégration. J’ai d’abord mené un travail personnel de conception, puis rejoint le groupe de classe pour le projet final, en intervenant sur le footer, le SEO et les visuels pédagogiques des étapes d’une course.
Avant le projet de groupe, j’ai réalisé un avant-projet de mon côté pour poser les bases du site : wireframe, première approche graphique et organisation des blocs de la page d’accueil. Cette étape personnelle m’a permis de tester une direction visuelle et une hiérarchie de contenus avant de les confronter aux contraintes du projet collectif.
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. Il a guidé les choix graphiques pour que le site reflète l’énergie de l’événement tout en restant lisible et professionnel.
À partir du moodboard, j’ai structuré la maquette complète du site sur Figma : grilles, composants réutilisables, navigation et zones de contenu. Cette maquette a servi de base au développement et au travail réparti entre les membres du groupe.
Une fois intégré au groupe de classe, j’ai été chargé de concevoir le footer du site, de la maquette à la version intégrée en ligne. J’ai proposé plusieurs versions aux commanditaires ; les échanges avec eux ont permis d’aboutir à un footer conforme à leurs attentes, cohérent avec le reste du site et fonctionnel sur tous les formats.
J’ai également travaillé sur le référencement du site : structure des balises, métadonnées, titres hiérarchisés et optimisations pour améliorer la visibilité du site Toulon Provence Regatta sur les moteurs de recherche.
Pour rendre le contenu plus pédagogique, j’ai créé une série de visuels illustrant les étapes d’une régate, intégrés directement sur le site. Chaque illustration devait être contrastée, claire et compréhensible au premier regard - première étape : le briefing avant la course.
Deuxième étape : le départ de la régate. Le visuel met en scène le moment où les voiliers s’élancent sur la rade, avec une composition lisible pensée pour le web.
Troisième étape : le parcours en mer. L’illustration montre la navigation et le tracé de la course pour aider le public à comprendre le déroulement de l’épreuve.
Quatrième étape : le passage de bouée. Ce visuel insiste sur un moment clé de la manœuvre, avec un rendu contrasté adapté à la lecture sur écran.
Cinquième et dernière étape : l’arrivée. Ce visuel conclut la séquence pédagogique et clôture le parcours utilisateur sur le site avec une image forte et cohérente avec l’identité nautique du projet.
Cliquez sur un AC pour afficher le détail du projet.