← Hub Phases · 01 Wireframes 02 Design System 03 Prototype 04 Documentation
Phase 01 · Wireframes basse fidélité

Wireframes

Le squelette des écrans clés avant tout habillage : structure, hiérarchie, parcours. 11 écrans couvrant desktop et mobile. Aucune couleur de marque hormis le rouge des actions, pour montrer où se posent les décisions. Esprit Tommy heritage : grilles nettes, blocs francs, navigation claire.

bloc / conteneur zone image action principale (rouge)
01

Accueil

Desktop · 1440
MENU
Découvrir la collection →
H1 éditorial + CTA primaire
Univers · 3 cartes
Essentiels · grille 4
02

Collection

Desktop · filtres
Barre de filtres collante + tri
Charger plus →
03

Fiche produit

Desktop · achat
Galerie + miniatures
Monogrammage (offert)
Ajouter au panier →
Accordéons · détails, matière, livraison
04

Panier

Tiroir latéral
Passer commande →
Tiroir · récap + CTA
État vide : message + bouton « Découvrir »
05

Checkout

Tunnel · stepper
Adresse
Mode de livraison (radios)
Paiement (plié)
Confirmer →
Récap collant
06

Confirmation

Succès · suivi
Récapitulatif commande
Suivi de commande · 4 étapes
07

Espace compte

Tableau de bord
Menu latéral
Bonjour + statut fidélité
Commande + suivi (traçabilité)
08

L'Atelier

Compléments
6 univers de compléments
Pyramide produit · le polo au sommet
Composer mon coffret →
Coffret signature
09

Magazine

Journal + Article
Index · à la une + grille
Lecture longue · dropcap, citation
10

Back-office Admin

Console · application séparée
Nav 11 modules
4 KPI + sparklines
Graphe ventes
Commandes / stock
11

Mobile

6 écrans · responsive
Découvrir →
Accueil · nav réduite
Collection · filtre + grille 2 col
Ajouter →
Fiche · CTA d'achat fixe en bas
Passer commande →
Panier plein écran
Confirmer →
Checkout · stepper empilé
Menu plein écran (tiroir)