9:41
Concept de page produit Projet personnel 2026
Prototype de page produit imaginé pour mettre en valeur La Bazcule, une bière de la microbrasserie percheronne La Baz.
RôleDéveloppeur frontend
Durée3 jours
ÉquipeSolo
Stack principale
- CSS 3
- HTML 5
- JavaScript
Projet Iron
La complexité ressentie d’un projet influence le grade qui lui est attribué. Cette évaluation reste volontairement personnelle : elle ne repose pas sur une grille de critères stricte, mais sur les défis rencontrés et les apprentissages réalisés. Les projets Iron sont les moins complexes ; Copper, Silver et Gold marquent une progression, jusqu’aux projets Diamond, les plus complexes et les plus aboutis.
La problématique
Faire ressentir une identité sans perdre l’information
La Baz possède un univers graphique expressif, porté par les illustrations de ses étiquettes. Le défi était d’imaginer une page capable de prolonger cette personnalité sur le web sans transformer la consultation en affiche décorative.
La page devait donner envie de découvrir La Bazcule tout en permettant de repérer rapidement son style, son degré d’alcool, son amertume et les informations utiles à sa dégustation.
Approche et arbitrages
Séparer la découverte visuelle de la lecture détaillée
J’ai choisi une composition en deux temps : une mise en scène forte de la bouteille et de son illustration, puis un panneau d’informations plus calme et structuré. Ce contraste permet au produit d’attirer le regard sans concurrencer les données essentielles.
Les contenus sont répartis entre deux onglets. « Général » répond immédiatement aux questions pratiques ; « Saveurs » propose une exploration plus sensorielle avec un radar animé.
Difficultés rencontrées
Conserver la cohérence lorsque l’écran et les interactions changent
Le principal enjeu n’était pas d’ajouter des effets, mais de faire fonctionner la même intention sur ordinateur, tablette et mobile. La mise en scène devait se recomposer, le carrousel devenir tactile et la quantité d’informations rester confortable.
Le radar ajoutait une autre difficulté : construire les axes, les formes, les libellés et l’animation à partir de données tout en conservant un résultat lisible. Les onglets devaient également fonctionner à la souris comme au clavier.
Solutions réalisées
Des interactions natives, ciblées et accessibles
La page repose sur HTML, CSS et JavaScript natif. La navigation s’adapte au format mobile, les produits secondaires deviennent un carrousel utilisable au toucher et les onglets suivent les comportements clavier attendus.
Le radar est entièrement généré en SVG par JavaScript. Lors de l’ouverture de l’onglet « Saveurs », chaque valeur progresse depuis le centre jusqu’à son niveau final, avec une vitesse commune pour préserver la lecture du mouvement.
Résultats et recul
Un prototype autonome qui démontre une intention complète
Le résultat est une page produit responsive, immédiatement exécutable dans un navigateur et sans dépendance externe. Elle réunit identité visuelle, hiérarchie éditoriale, interactions et premières exigences d’accessibilité dans un périmètre volontairement simple.
Avec davantage de temps, je confronterais les choix d’information à de vrais utilisateurs, je formaliserais les tests des interactions et je rendrais les données produit administrables. Le projet resterait ainsi fidèle à son identité tout en devenant plus robuste et réutilisable.