Citadium
- HTML
- SCSS
- JAVASCRIPT
- TWIG
- ANIMATIONS
- SEO
- PERFORMANCES
- PIXEL PERFECT
Client
Citadium est une enseigne phare du retail mode en France, avec une communauté exigeante et engagée. Sa plateforme e-commerce internationale traite des volumétries élevées et vise des objectifs business ambitieux.
- +400 000 utilisateurs uniques / mois
- ~2,3 % de taux de conversion
- ~20 M$ de revenus annuels
- Parcours desktop & mobile à fort enjeu d’UX/UI
Mission
Dans le cadre de la refonte intégrale du branding menée par W3lead, j’ai redéveloppé l’ensemble du front du site e-commerce international de Citadium dans un environnement PHP/Twig. Projet ambitieux avec un niveau d’attente très élevé en UX, UI et animations. J’ai assuré la livraison de 95 % du front en solo.
Voir le site- Architecture : templates modulaires (Twig partials), layout system réutilisable, composants UI pixel-perfect.
- Stack : HTML · SCSS (architecture claire) · JavaScript ES6.
- Performance & Core Web Vitals : lazy-loading médias, images responsives (
srcset/sizes),preload/preconnect, CSS critique, minification. - SEO technique : balisage sémantique propre, métadonnées, maillage interne soigné.
- Accessibilité : navigation clavier, focus states, contrastes, rôles ARIA essentiels.
- Creative development : micro-interactions et animations maîtrisées, sans impacte sur le chargement des pages et la fluidité de l'expérience utilisateur.
Conditions générales façon Star Wars
J'ai fait défilé les pages légales comme le générique Star Wars, parce que pourquoi pas ? Principalement du CSS, un soupçon de JS, grand spectacle, et le tout entièrement accessible.
Animation de wishlist
On déclenche la surprise au moment précis de l'intention. Approche CSS/SVG d'abord avec un JS minimal : un micro-script génère des cœurs aléatoires qui glissent le long de chemins SVG avec des transitions fluides. Résultat : une micro-interaction légère et fluide qui marque les esprits et renforce discrètement la fidélité sans sacrifier les performances.