Wireframe : le plan de votre site avant le design

Une feuille A4, un crayon, et un rectangle allongé qui figure l'écran d'un téléphone : c'est souvent ainsi que commence un site réussi. Le wireframe, ou maquette fil de fer, est ce croquis de chaque page qui place les informations dans l'ordre, avant toute couleur ou photo. Le dessiner vous-même, même maladroitement, évite de découvrir trop tard qu'il manque l'essentiel.

Un croquis de page, sans couleurs ni photos

Le wireframe représente une page sous forme de blocs : un rectangle pour le logo, un autre barré d'une croix pour une photo, des traits pour le texte, un cadre avec un mot pour chaque bouton. Il ne montre ni la police, ni les couleurs, ni les images définitives. Son seul objet est de répondre à deux questions : qu'y a-t-il sur cette page, et dans quel ordre ?

Ce dépouillement est volontaire. Devant une page en couleurs, on discute du vert ou de la photo d'accueil ; devant un croquis gris, on parle du contenu, de ce que le visiteur doit voir en premier et du chemin qui le mène à l'appel ou à la réservation. C'est précisément le terrain où votre connaissance des clients compte le plus.

Arborescence, wireframe, maquette : trois étapes distinctes

Ces trois documents se succèdent et se complètent. Une comparaison avec l'aménagement d'un local aide à les distinguer :

• L'arborescence correspond au plan des pièces : la liste des pages et leurs liens, du menu jusqu'au contact. Sa construction est détaillée dans l'article sur l'arborescence d'un site internet.
• Le wireframe place les meubles dans chaque pièce : les blocs de chaque page, leur ordre et leur importance.
• La maquette montre la pièce décorée : couleurs, typographies, photos, parfois sous forme de prototype cliquable.

Certains prestataires parlent aussi de zoning, une version plus sommaire encore, qui délimite seulement les grandes zones de la page. La planche d'inspiration, ou moodboard, rassemble quant à elle des références de style et ne dit rien de l'organisation du contenu. Sur un petit projet, le wireframe se limite souvent à la page d'accueil et à un modèle de page intérieure, que l'on décline ensuite.

Dessiner le vôtre sur papier

Les graphistes utilisent des logiciels de maquettage, mais une feuille et un crayon suffisent pour exprimer ce que vous voulez. Partez du téléphone, l'écran sur lequel beaucoup de vos clients vous découvriront : dessinez un rectangle haut et étroit, puis empilez les blocs de haut en bas.

Une méthode en quatre temps

1. Listez les informations que la page doit donner, en partant des questions de vos clients : qu'est-ce que c'est, où, combien, comment réserver.
2. Écrivez chaque information sur un petit papier repositionnable, puis classez ces papiers par ordre d'importance.
3. Recopiez-les dans le rectangle, en traçant un trait horizontal à hauteur du premier écran : c'est la ligne de flottaison, la limite de ce que l'on voit sans faire défiler.
4. Annotez : le texte réel des titres quand vous le connaissez, l'endroit où mène chaque bouton, la photo que vous imaginez.

Au-dessus de la ligne de flottaison doivent figurer votre nom, votre activité, votre ville et l'action principale, comme « Réserver une table » ou « Demander un devis ». Le reste se déroule dans l'ordre où le client se pose ses questions.

Un exemple pour une crêperie

La page d'accueil d'une crêperie pourrait s'organiser ainsi, de haut en bas : le logo et un bouton d'appel, une phrase qui situe le lieu et le style de cuisine, une photo de la salle, le bouton de réservation, trois galettes phares avec leur prix, les horaires, l'accès, quelques avis, puis le pied de page. Un artisan placerait plutôt ses prestations, des photos de chantiers et sa zone d'intervention.

Ce que le wireframe vous fait gagner

Un rectangle se gomme en deux secondes ; une maquette graphique peut demander plusieurs jours de reprise. En fixant le contenu avant le style, vous limitez les allers-retours coûteux, et vos remarques sur la maquette porteront sur les couleurs plutôt que sur l'organisation des pages.

Le croquis révèle aussi ce qui manque : une photo de l'équipe à prévoir, un texte sur les tarifs à écrire, une liste de communes à établir. Vous pouvez répartir ces tâches tôt, au lieu de bloquer le projet juste avant la mise en ligne. Enfin, il facilite le devis : un prestataire chiffre plus justement un projet dont il voit les pages et les fonctions, comme un formulaire, un agenda ou une galerie.

Les points à vérifier avant de valider

Que vous l'ayez dessiné ou que votre prestataire vous le présente, relisez chaque wireframe avec cette liste :

• sur mobile, le nom, l'activité, la ville et le bouton principal apparaissent avant la ligne de flottaison ;
• chaque page a une seule action principale, répétée en bas ;
• les informations pratiques sont présentes : téléphone, adresse ou zone, horaires, prix ou fourchettes ;
• l'ordre des blocs suit les questions des clients, l'histoire de l'entreprise venant plus bas si elle a sa place ;
• aucun bloc ne sert de simple décoration, comme un diaporama qui repousse l'essentiel vers le bas ;
• le pied de page prévoit les coordonnées et les liens légaux ;
• chaque bloc a un responsable de contenu : qui écrit, qui photographie ;
• le nombre de pages correspond à celui du devis.

Les textes provisoires apparaissent parfois sous forme de faux texte latin, le « lorem ipsum ». Demandez à les remplacer par les vrais titres dès que possible : la longueur réelle d'un titre change souvent l'équilibre d'une page. Pour l'étape suivante, la maquette graphique, suivez la méthode de l'article sur la validation d'une maquette de site.

Pour vous lancer

1. Ce soir, dessinez votre page d'accueil sur une feuille, en version téléphone, avec la ligne de flottaison.
2. Faites le test du client fidèle, puis ajustez l'ordre des blocs.
3. Photographiez vos croquis et joignez-les à votre demande : chez nous, un site de cinq pages coûte 950 € HT et chaque page de plus 60 € HT, un total que le configurateur de devis calcule pour vous.