L’hydro – Musée Maritime de Saint-Malo
L’hydro – Musée Maritime de Saint-Malo
Avril 2025
En vue de l’ouverture du futur musée maritime de Saint-Malo prévue pour 2028, la Ville a souhaité créer un site internet dédié. Ce site doit accompagner l’ensemble du projet. Il doit notamment présenter le projet architectural mené par l’Atelier Philippe Prost et Designers Unit, suivre l’avancée du chantier, valoriser la programmation culturelle et intégrer un portail des collections développé avec Webmuseo.
Par ailleurs, le musée s’installe dans l’ancienne École nationale supérieure maritime (« L’Hydro ») et proposera un parcours mêlant histoire maritime, patrimoine local et enjeux environnementaux.
DIRECTION ARTISTIQUE
La direction artistique et l’identité visuelle du projet ont été conçues par Pollen Studio. En effet, l’agence a développé une identité sobre et contemporaine, inspirée de l’histoire maritime de Saint-Malo. Typographie, crochets graphiques et palette colorée structurent l’univers visuel du musée. Ces éléments ont ainsi guidé toute l’intégration du site web.
CONCEPTION ET DÉVELOPPEMENT WEB
La responsable du pôle direction artistique d’Indigo Communication a réalisé les maquettes du site. Elle s’est basée sur la charte graphique de Pollen Studio pour imaginer une interface claire et contemporaine. Elle est adaptée aux contenus riches du futur musée.
Indigo Communication était déjà chargée de la refonte du site municipal. La Ville leur a donc confié la conception de ce nouveau site.
J’ai ensuite assuré l’intégration et le développement complet du site WordPress. Mon travail a consisté à créer les gabarits de pages. J’ai également intégré fidèlement les maquettes sous WordPress/Elementor. De plus, j’ai développé des interactions sur mesure pour améliorer la navigation et l’expérience utilisateur.
VIDÉO DE PRÉSENTATION
Vous pouvez voir ci-contre un enregistrement d’écran de la home page lors de la livraison du site web.
Compétences développées
Développement JavaScript avancé : J’ai conçu et géré les menus interactifs avec sous-menus. Cela intègre des comportements complexes (ouverture/fermeture et classes CSS dynamiques). Ainsi, j’ai mis en place des interactions au survol pour améliorer l’expérience utilisateur.
Création d’interactions utilisateur optimisées : J’ai développé un système modale. Il est doté d’une barre de recherche intégrée. Ce système permet de filtrer les contenus (pages, articles, custom post types) et d’afficher des résultats enrichis pour faciliter la navigation.
Utilisation de jQuery pour enrichir l’expérience : J’ai créé un script dynamique. Il ajoute des éléments visuels qui signalent le type ou la catégorie de chaque résultat. De cette manière, la clarté et la lisibilité des pages de résultats sont améliorées.