Web Design Wireframe Guide

1. Objectif de la page

• →Action unique attendue :
• →Question à laquelle la page répond :
• →Preuve la plus forte à mettre en avant :

2. Structure recommandée (page d'offre)

[Header : logo · navigation · CTA]
[Hero : titre 6 mots · sous-titre 2 lignes · CTA · visuel plein cadre]
[Bandeau de confiance : logos ou 3 chiffres]
[Problème : 3 douleurs listées]
[Solution : méthode en 3 étapes]
[Preuve : cas client avec chiffres]
[Offre : ce qui est inclus, prix]
[FAQ : 5 objections]
[CTA final]
[Footer : mentions · contact · liens]

3. Hiérarchie visuelle

• →Un seul H1 par page.
• →Trois niveaux de taille de texte maximum.
• →Contraste réservé à l'essentiel : si tout est mis en avant, rien ne l'est.
• →L'appel à l'action est l'élément le plus contrasté de l'écran.

4. Grille et espacement

| Élément | Valeur | | --- | --- | | Largeur de contenu | 1200 px max | | Colonnes | 12, gouttière 24 px | | Espacement vertical de section | 96 px desktop / 56 px mobile | | Unité d'espacement | multiples de 8 px | | Rayon des cartes | 24 px |

5. Composants réutilisables

• →Bouton primaire / secondaire / lien
• →Carte de contenu (image, titre, texte, lien)
• →Bloc statistique
• →Témoignage
• →Accordéon FAQ
• →Formulaire (3 champs maximum)

6. Responsive

| Point de rupture | Adaptations | | --- | --- | | < 640 px | Une colonne, navigation en menu, CTA fixe en bas | | 640-1024 px | Deux colonnes, images réduites | | > 1024 px | Mise en page complète |

Concevez le mobile d'abord : c'est là que se trouvent plus de 70% des visiteurs.

7. Accessibilité

• →[ ] Contraste texte / fond ≥ 4,5:1
• →[ ] Zones cliquables ≥ 44 px
• →[ ] Navigation au clavier possible
• →[ ] Textes alternatifs sur les images porteuses de sens
• →[ ] Libellés de formulaire visibles (pas seulement des placeholders)
• →[ ] Aucune information transmise par la couleur seule

8. Performance

• →[ ] Images en WebP, dimensionnées à l'affichage réel
• →[ ] Image du hero préchargée, le reste en chargement différé
• →[ ] Deux polices maximum, en woff2
• →[ ] LCP < 2,5 s, CLS < 0,1
• →[ ] Aucun script tiers non indispensable

9. Validation du wireframe

• →[ ] L'action principale est visible sans défilement
• →[ ] Chaque section a une raison d'exister
• →[ ] Le parcours tient en 2 clics
• →[ ] Les textes réels ont été intégrés (pas de faux texte)