Structure et wireframes
Pourquoi : Le contenu vient avant le design. Décidez ce qui va où avant de décider à quoi cela ressemble. Les wireframes en gris uni invitent à critiquer la structure ; dès que quelque chose a l'air terminé, les gens ne commentent que les couleurs. Les constructeurs de sites IA qui produisent de bons résultats (Relume, Google Stitch) suivent également le chemin sitemap → wireframe → style, pour la même raison.
Besoins : 01-facts/facts.md, 01-facts/inventory.md (refontes), 02-personas/personas.md, 03-brand/brand.md.
Produit : 04-structure/sitemap.md (arborescence des pages, navigation, règles d'URL, redirections, ordre des messages), 04-structure/wireframes/r<round>/*.html.
Cette étape comporte deux parties avec une revue chacune, car la structure et les wireframes sont trop lourds pour une seule itération : la partie 1 règle l'arborescence des pages, la partie 2 présente les wireframes.
1. Arborescence des pages
Partez des questions des personas, pas de l'ancien site ni de l'organigramme. Chaque page répond à une question principale pour un persona principal.
Dans sitemap.md, pour chaque page : URL, titre, question principale, persona principal, action principale, statut (lancement / ultérieur). Ensuite :
- Navigation : éléments de premier niveau (visez 5–7), ce qui va dans le pied de page, si un méga-menu est nécessaire.
- Règles d'URL : préfixe de langue, slash final ou non, minuscules, mots pas d'ID.
- Redirections : ancienne URL → nouvelle URL pour chaque page marquée dans l'inventaire.
- Périmètre de lancement : le plus petit ensemble de pages qui répond aux questions du persona principal. Les sections vides (« Blog – à venir ») restent en dehors.
Gardez-le aussi petit que l'offre le permet. Chaque page doit être écrite, conçue et maintenue.
Revue, partie 1 (review/04-structure-r1.html) : arborescence des pages, navigation, règles d'URL, redirections, périmètre de lancement. Stop : attendez les décisions avant de construire les wireframes.
2. Ordre des messages par page clé
Écrivez-le dans sitemap.md, un bloc par page. Pour la page d'accueil et chaque type de page (produit, tarifs, à propos, contact, article, …) : listez les sections de haut en bas. Pour chaque section : la question du visiteur à ce stade, la réponse en une ligne, la preuve issue de facts.md, et ce qui mène à la section suivante. Le premier écran énonce la promesse et l'action principale.
3. Wireframes
Construisez un wireframe HTML par type de page clé, d'abord en mobile, également vérifié à la largeur desktop. Dans le premier tour de wireframes, montrez au maximum quatre : la page d'accueil et les trois types de pages les plus importants. Les autres types suivent dans le tour suivant. Enregistrez chaque tour dans son propre dossier (wireframes/r2/, …) et partagez une feuille de style.
- Uniquement des gris, une police système, des boîtes avec une croix pour les images, pas de couleurs de marque, pas d'ensembles d'icônes, pas d'ombres.
- Contenu rédactionnel réel issu de
brand.mdetfacts.md, jamais de lorem ipsum. Les titres peuvent encore être approximatifs ; marquez-lesdraft. - Longueurs réelles : si une liste aura 12 éléments, montrez-en 12.
- Étiquetez chaque section avec la question à laquelle elle répond, en petit texte gris au-dessus.
- Rendez et examinez chaque wireframe à 390 px et 1440 px avant de le montrer.
Revue, partie 2
Montrez l'ordre des messages et les wireframes sous forme de captures d'écran côte à côte (mobile et desktop), chacune liée à son fichier HTML. Décisions typiques : ordre des sections par page, types de pages manquants ou redondants, ce que le premier écran doit contenir.
Terminé lorsque l'arborescence des pages, la navigation, les règles d'URL, les redirections et l'ordre des sections des pages clés sont décidés. Le contenu rédactionnel est affiné à l'étape 8 ; les détails de mise en page peuvent changer à l'étape 9.