Comment intégrer fidèlement une direction artistique exigeante tout en développant des interactions sur-mesure (menus dynamiques, recherche avancée) dans un environnement WordPress ?
L'enjeu principal était technique et collaboratif. Le site devait accompagner le projet architectural du musée (prévu pour 2028). Il a fallu s'approprier les maquettes réalisées par la Direction Artistique d'Indigo Communication (basées sur l'identité visuelle conçue par Pollen Studio) et développer des fonctionnalités interactives avancées, impossibles à réaliser nativement avec les outils de base, afin de garantir une expérience utilisateur haut de gamme.
Respect d’une identité forte : La direction artistique du musée, conçue par Pollen Studio, propose une identité sobre et contemporaine inspirée de l’histoire maritime locale (typographie spécifique, crochets graphiques, palette colorée stricte).
De la maquette au pixel près : Mon rôle a débuté à la réception des maquettes UI réalisées par la responsable du pôle Direction Artistique d’Indigo Communication. J’ai eu la charge de créer les gabarits de pages et d’intégrer fidèlement ce design sous WordPress, en m’assurant que l’interface rende justice à la richesse des contenus du futur musée (histoire, patrimoine, enjeux environnementaux).
Menus dynamiques en JavaScript : Pour pallier les limites natives du CMS, j’ai développé des scripts en JavaScript avancé. J’ai notamment conçu un menu interactif avec sous-menus intégrant des comportements complexes (ouverture/fermeture dynamiques, injection de classes CSS, interactions au survol) totalement fidèles à l’identité visuelle requise.
Enrichissement avec jQuery : Pour améliorer la lisibilité des résultats de recherche, j’ai créé un script dynamique en jQuery. Celui-ci vient greffer automatiquement des éléments visuels signalant le type ou la catégorie de chaque résultat, facilitant ainsi grandement la navigation pour l’utilisateur final.
Recherche par fenêtre modale : J’ai développé une interface de recherche innovante sous forme de fenêtre modale. Dotée d’une barre de recherche performante, elle permet de filtrer les différents contenus (pages, articles, Custom Post Types) de manière fluide sans recharger la page.
« Ce projet a renforcé mes compétences en développement front-end et en gestion d’interfaces complexes sous WordPress. Le choix d’utiliser JavaScript pur et jQuery m'a permis d’assurer une compatibilité optimale avec Elementor tout en garantissant la maintenabilité du code. Ce fut également très formateur de travailler en étroite collaboration avec les équipes de la Ville et les designers pour répondre parfaitement à leurs exigences. »