Maquette de site web : la méthode en 5 étapes

Le site est livré, vous l'ouvrez, et quelque chose cloche : le menu n'est pas où vous l'imaginiez, la page d'accueil met en avant ce qui compte le moins, le bouton de contact se perd au milieu de la page. Corriger cela une fois le site développé oblige à reprendre du travail déjà fait. Sur une maquette, c'est déplacer un bloc à l'écran.

Une maquette de site web est une représentation visuelle et statique de votre futur site : elle montre où se placent le menu, les textes, les images et les boutons avant que la moindre ligne de code ne soit écrite. Elle sert à se mettre d'accord sur la structure, le contenu et le rendu. Elle ne permet pas de juger la vitesse de chargement ni les animations du site final. Que votre maquette de site internet prépare un site vitrine, une boutique ou une refonte, la démarche reste la même : voici le vocabulaire, les étapes, les outils et les pièges.

Zoning, wireframe, maquette graphique, prototype : ne pas tout confondre

Le mot « maquette » recouvre plusieurs niveaux de détail, et les mélanger est la première source de malentendus entre un client et son prestataire. On avance du plus simple au plus fidèle : des blocs d'abord, une structure ensuite, le design après, un parcours cliquable en dernier.

Créer une maquette de site web en 5 étapes

1. Partir du cahier des charges et de l'arborescence. Avant de dessiner, il faut savoir quelles pages existent et à quoi elles servent. Si ce n'est pas encore écrit, commencez par le cahier des charges, puis par l'arborescence du site : dessiner sans elles, c'est faire le même travail deux fois.
2. Réunir les vrais contenus. Un texte de remplissage (le fameux « lorem ipsum ») cache les problèmes : un titre trop long, une liste de services qui ne tient pas dans la colonne, une photo qui n'existe pas encore. Rassemblez vos textes, votre logo et vos images avant de commencer.
3. Dessiner la page d'accueil, puis quelques pages types. Inutile de maquetter chaque page : l'accueil, une page de service, un article et la page de contact donnent les gabarits que les autres pages reprendront. Pour savoir lesquelles créer, voir les pages indispensables d'un site pro.
4. Prévoir la version mobile. Une maquette pour ordinateur seule ne dit pas comment les blocs se replient sur un téléphone. Décidez l'ordre des blocs à petite largeur, en suivant la logique du mobile d'abord.
5. Poser l'identité graphique, puis faire valider. Couleurs, typographies et boutons viennent de la charte graphique. Regroupez ensuite les retours en un seul message par tour de validation, et demandez une validation écrite avant de lancer le développement : c'est elle qui sépare les corrections de maquette des demandes de changement.

Un conseil pour les sites où plusieurs personnes décident : désignez une seule personne qui tranche. Sans elle, chaque relecteur ajoute ses souhaits, la maquette s'alourdit, et le calendrier aussi.

Exemple de maquette d'accueil (illustratif)

Prenons un cabinet de kinésithérapie qui veut un site vitrine. Le zoning de la page d'accueil se lit de haut en bas : en-tête avec le logo, le menu et un bouton de prise de rendez-vous ; bandeau d'ouverture avec une promesse claire et le même bouton ; trois blocs présentant les spécialités ; une zone de réassurance (photos réelles du cabinet, coordonnées) ; les informations pratiques (adresse, horaires) ; enfin le pied de page. Chaque zone répond à une question du visiteur, dans l'ordre où il se la pose. Exemple à titre d'illustration : votre activité aura ses propres blocs.

Les erreurs qui coûtent cher

• Valider une maquette remplie de faux texte. Le rendu réel des vrais contenus peut tout changer.
• Soigner le design avant d'avoir validé la structure. Une maquette graphique très détaillée est pénible à modifier : validez d'abord le wireframe.
• Oublier le mobile. C'est là que les blocs trop chargés posent problème : les principes d'UX design valent aussi pour un petit écran.
• Multiplier les allers-retours dispersés. Des retours par téléphone, par e-mail et par message se contredisent : un seul canal, un seul document.
• Confondre maquette et site fini. Vitesse, animations et fonctionnement des formulaires se contrôlent après le développement, lors de la recette avant mise en ligne.

La maquette est-elle obligatoire sur WordPress ?

Non, mais son degré de détail dépend du projet. Pour une petite vitrine à la structure simple, un wireframe validé peut suffire avant de construire directement dans WordPress. Pour un site à plusieurs décideurs, une boutique ou une refonte, la maquette graphique évite les désaccords tardifs. Si vous partez d'un thème existant, la maquette doit tenir compte de ce que ce thème sait faire : voir comment choisir un thème WordPress. En cas de refonte, gardez sous les yeux la liste des pages qui apportent déjà du trafic, comme l'explique la méthode pour ne pas perdre son référencement.

Enfin, l'IA sait produire des propositions de mise en page en quelques instants. Elle aide à explorer des pistes, pas à décider à votre place : ce qu'elle fait bien et ce qu'elle rate se vérifie avant de l'intégrer à votre méthode.