Introduction
Le Défi : L'Art face au Code "Gabi" est un personnage illustré emblématique créé par Marie-Hortense Camous, véritable figure de la culture niçoise. L'auteure avait une vision très précise : elle refusait la rigidité d'un site web standard basé sur des grilles. Elle souhaitait que l'expérience utilisateur rappelle l'ouverture d'un de ses livres, foisonnant de paysages panoramiques dessinés à la main.
La Solution J'ai travaillé en binôme avec l'auteure pour créer un pont entre l'art et la technologie. Tandis qu'elle assurait la direction artistique et les illustrations, mon rôle a consisté à traduire ces dessins statiques (au pixel près) en un site web fluide et vivant, parfaitement adapté à toutes les tailles d'écran.
Responsive Adaptation
Préserver la Composition Adapter des illustrations pleine page pour le web est un défi technique notoire. Un comportement "responsive" standard a tendance à rogner l'image maladroitement ou à masquer des détails clés sur les petits écrans.
Pour résoudre ce problème, j'ai méticuleusement calibré le positionnement et l'échelle des arrière-plans pour chaque point de rupture (breakpoint). Au lieu d'un recadrage automatique, j'ai ajusté l'alignement des illustrations pour garantir que Gabi et les paysages emblématiques restent le point focal, que ce soit sur un écran large ou un smartphone.
Technical Architecture
L'Approche "Headless-Lite" Le client avait besoin de fonctionnalités e-commerce mais souhaitait éviter les frais mensuels élevés et les templates rigides d'une boutique Shopify classique. J'ai conçu une solution hybride sur mesure :
- Build (Conception) : J'ai développé le frontend sur Webflow pour une liberté de design totale.
- Host (Hébergement) : J'ai exporté le code pour l'auto-héberger. Cette stratégie a éliminé les frais de plateforme récurrents, offrant une solution très économique sans sacrifier la qualité.
- Commerce : J'ai intégré les Shopify Buy Buttons. Cela permet d'injecter un système de paiement sécurisé de classe mondiale directement dans le design personnalisé, offrant ainsi le meilleur des deux mondes.
Performance
Visuels Riches, Code Léger Les sites riches en illustrations souffrent souvent de temps de chargement lents. Grâce à une optimisation agressive des fichiers (assets) et à un export HTML/CSS propre, j'ai obtenu des scores quasi parfaits sur Google PageSpeed Insights.
Cela prouve qu'il n'est pas nécessaire de sacrifier la créativité pour la performance. Le site est accessible, optimisé pour le SEO et se charge instantanément.
