L’hydro
Le projet :
Dans le cadre 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é pour accompagner le projet. Installé dans l’ancienne École nationale supérieure maritime (« L’Hydro »), le musée proposera un parcours mêlant histoire maritime, patrimoine local et enjeux environnementaux.
Le site présente le projet architectural mené par l’Atelier Philippe Prost et Designers Unit, suit l’avancée du chantier, valorise la programmation culturelle et intègre un portail des collections développé avec Webmuseo.
La Ville a confié la conception du site à Indigo Communications, déjà chargée de la refonte du site municipal. En collaboration avec les équipes de la Ville et selon la charte graphique du studio Pollen Design, un site WordPress modern
Compétences développées :
Développement JavaScript avancé : Conception et gestion dynamique de menus interactifs avec sous-menus, intégrant des comportements complexes comme l’ouverture/fermeture, la gestion des classes CSS dynamiques, et des interactions au survol pour améliorer l’expérience utilisateur.
Maîtrise de l’intégration WordPress & Elementor : Sélection et manipulation d’éléments DOM spécifiques aux widgets Elementor, adaptation du code pour respecter la structure des pages et assurer une parfaite intégration avec les outils WordPress.
Gestion des interfaces utilisateurs (UI) : Application rigoureuse d’une charte graphique via des classes CSS dynamiques, gestion des couleurs thématiques pour chaque élément du menu, et création d’éléments visuels personnalisés (crochets graphiques) pour une navigation intuitive et esthétique.
Création d’interactions utilisateur optimisées : Développement d’un système modale avec barre de recherche intégrée, permettant de filtrer les contenus (pages, articles, custom post types) et d’afficher des résultats enrichis (catégorie, résumé, lien) pour faciliter la navigation et la recherche d’information.
Utilisation de jQuery pour enrichir l’expérience : Script dynamique pour ajouter des éléments visuels signalant explicitement le type ou la catégorie de chaque résultat, améliorant la clarté et la lisibilité des pages de résultats.
Respect des standards web modernes : Gestion des événements DOM, optimisation des comportements UX, et développement responsive conforme aux attentes des utilisateurs et des designers.
Conclusion :
Le développement du site internet pour le futur Musée Maritime de Saint-Malo a permis de créer une plateforme moderne, ergonomique et conforme à la charte graphique définie, en adéquation avec les besoins spécifiques du client.
Grâce à une collaboration étroite avec les équipes de la Ville et les designers, le projet a réussi à intégrer des fonctionnalités interactives avancées, notamment un menu principal dynamique et coloré, fidèle à l’identité visuelle du musée, ainsi qu’une fenêtre modale innovante avec une barre de recherche performante.
Ces outils ont amélioré la navigation et l’expérience utilisateur, facilitant l’accès aux contenus variés (pages, articles, post-types), tout en assurant une gestion fluide et intuitive des sous-menus et des résultats de recherche.
Le choix technique d’utiliser JavaScript pur et jQuery a permis d’assurer une compatibilité optimale avec l’environnement WordPress et Elementor, tout en garantissant la maintenabilité du code.
Ce projet a renforcé mes compétences en développement front-end, gestion d’interfaces complexes, et intégration WordPress, tout en me confrontant aux défis liés à la gestion d’un contenu riche et structuré, et à la mise en œuvre d’une expérience utilisateur soignée et cohérente.
