Une page d’offres conçue pour arbitrer vite, sans pression inutile.
La page doit faire trois choses: clarifier la différence entre les deux packs, permettre une comparaison rapide et rassurer sur la méthode avant le clic.
Le design repose sur deux cartes majeures, un comparatif pleine largeur et un rappel net des règles d’achat, de livraison et de contact.
Ordre recommandé du parcours
L’utilisateur doit comprendre le périmètre avant même de lire les détails. La structure privilégie donc la séparation des usages avant la profondeur de contenu.
Deux cartes majeures, rien de plus
Chaque carte doit porter la promesse, le prix, les inclusions et une action. Pas de troisième offre parasite, pas de surcharge d’arguments.
Pack Franchisé
Un pack pour décider avant signature, avec un cadre de lecture simple, concret et exploitable.
- Checklist avant signature organisée par thèmes clés.
- Trame de questions à poser avant de s'engager.
- Cadre simple pour comparer plusieurs réseaux.
- Repères de lecture sur les signaux faibles et angles morts.
Pack Franchiseur
Un socle pour présenter le réseau proprement, cadrer les documents et éviter un chantier trop tôt avec plusieurs prestataires.
- Structure de DIP et ordre logique des informations à fournir.
- Base de contrat de franchise à faire valider ensuite si besoin.
- Trame de manuel opératoire pour rendre le concept duplicable.
- Base de business plan franchise et repères commerciaux.
Un comparatif pleine largeur pour décider sans relire toute la page
Le tableau n’est pas décoratif. Il sert à comparer la logique des blocs et à vérifier que la page conserve sa lisibilité sur desktop comme sur mobile.
| Bloc | Objectif | Layout | Composants |
|---|---|---|---|
| Hero | Poser la promesse et séparer immédiatement les deux parcours. | 7/5 colonnes | Navbar, H1, lead, badges, CTA |
| Cartes d’offres | Permettre une lecture rapide du périmètre et du prix. | 2 colonnes égales | Cards, listes, boutons |
| Comparatif | Aider à arbitrer sans lire l’ensemble des paragraphes. | Table pleine largeur | Tableau, tags, lignes d’aide |
| Rassurance | Traiter livraison, confidentialité et contact humain. | 2 colonnes | Cards info, body small, CTA secondaire |
Spécification section par section de /offres
Chaque section ci-dessous précise le layout, les composants utilisés, les espacements et le comportement mobile attendu.
Hero page /offres
Grille 12 colonnes avec promesse à gauche et note d’usage à droite.
96 px avant la grille d’offres, 32 px entre texte et aside.
Aside bascule sous le titre, pas de colonnes concurrentes.
Grille d’offres
Deux cartes majeures de largeur égale en desktop.
24 px entre cartes, 32 px internes, badges prix visibles en tête.
Cartes empilées, ordre Franchisé puis Franchiseur, CTA largeur pleine.
Tableau comparatif
Tableau pleine largeur sous les cartes pour arbitrage rapide.
32 px au-dessus du tableau, 20 px de padding interne.
Scroll horizontal assumé avec libellés courts et lignes stables.
Rassurance & conversion
Deux colonnes: règles d’achat à gauche, note de contact à droite.
80 px avant footer, gap 24 px entre colonnes.
Empilement simple, note de contact en dernier.
Le bloc final doit confirmer la méthode, pas ajouter du bruit
La conversion repose sur trois éléments: clarté du périmètre, lisibilité du prix et présence d’un contact humain si le besoin dépasse la trame standard.
Espacements recommandés
- 96 px entre hero et grille des offres sur desktop.
- 24 px entre les cartes et 32 px de padding interne.
- 64 px minimum avant le footer pour laisser respirer la décision.
Comportement mobile
- Cartes empilées, CTA pleine largeur, badges prix visibles immédiatement.
- Tableau en scroll horizontal assumé, jamais compressé en colonnes étroites.
- Bloc rassurance conservé en dernier, sous forme de deux cartes simples.