Le Pouvoir des Fleurs

Design & front-endÉtude de cas

Un site vitrine floral, chaleureux et responsive pour présenter des créations, des services sur mesure et les informations utiles de la boutique.

Projet suivant →
« [Citation d’un client ou d’une collègue] »
[Prénom Nom], [rôle, entreprise]
Version ordinateur du projet Le Pouvoir des Fleurs
01

Le contexte

Le projet explore la présence numérique d’une fleuriste artisanale et d’un commerce de proximité.

L’enjeu était de mettre l’image au premier plan tout en conservant un catalogue filtrable, une personnalisation compréhensible et un contact immédiat.

02

Mon rôle

J’ai réalisé ce prototype de A à Z : direction artistique, UX/UI, organisation du contenu et développement des interactions en HTML, CSS et JavaScript.

Direction artistiqueUX/UIHTMLCSSJavaScriptResponsive
03

Le processus, étape par étape

1. Comprendre

Identifier les intentions d’achat, les occasions et les informations attendues avant une visite en boutique.

2. Structurer

Organiser la page autour du catalogue, du sur-mesure, des événements et du contact.

3. Dessiner

Créer une ambiance végétale douce où la photographie guide le parcours sans masquer les prix ni les actions.

4. Coder & tester

Intégrer les filtres, le carrousel, le menu mobile et vérifier l’absence de débordement sur petits écrans.

04

Les choix visuels

Des teintes végétales, des fonds clairs et des photographies généreuses installent une sensation artisanale et fraîche.

La palette
#355C4D
#E8B7C8
#FFF8F1
#D8A84E
La typographieAa

Une typographie élégante pour les titres, équilibrée par une sans-sérif simple pour le catalogue et les informations pratiques.

Les composants

Catalogue filtrable, cartes produit, carrousel événementiel, personnalisation, horaires, carte et contact.

05

Sous le capot

Le site one-page utilise une structure HTML sémantique, du CSS responsive et du JavaScript vanilla pour rester léger et facile à maintenir.

L'architecture
occasion → filtre → création
                    ↓
         sur-mesure / contact
06

Là où ça a coincé

Le mur 1

Donner beaucoup de place aux images sans rendre le catalogue lent ou difficile à lire.

Ma solution

Grille stable, textes courts, filtres visibles et formats d’image adaptés à leur emplacement.

Le mur 2

Adapter catégories et carrousel à une largeur mobile très réduite.

Ma solution

Défilement horizontal contrôlé, cartes redimensionnées et zones tactiles confortables.

07

Le résultat

1page complète
8filtres
100%responsive

Le prototype montre une présence de marque complète et légère, capable de valoriser les créations tout en facilitant le passage au contact.

08

Ce que j’en retiens

Ce projet m’a permis de travailler une interface sensible mais commerciale, où l’image attire et où l’information utile conclut le parcours.

Envie du même genre de projet ?