Maquette de site web : voir le projet avant de payer

La correction la plus coûteuse sur un site est celle que l’on signale seulement après la mise en ligne. Déplacer une section ou ajouter une page sur la maquette prend quelques instants, alors que dans le code terminé, cela peut demander plusieurs heures. C’est pourquoi la maquette de site web est le moment le moins cher pour changer d’avis.

Dans cet article, je vous montre comment voir votre site avant de payer sa réalisation : la différence entre une esquisse, une maquette et un prototype, ce qu’il vaut la peine de recevoir à chaque étape, ce qu’il ne faut pas juger et comment rédiger vos remarques pour que le prestataire les comprenne du premier coup. Vous trouverez aussi une liste de 10 questions à vous poser en examinant le projet.

Esquisse, maquette, prototype et créateur : quatre façons de prévisualiser un site

Ces termes sont parfois employés indifféremment ; au début de la collaboration, demandez donc ce que vous allez recevoir exactement. Les étapes se distinguent par leur niveau de détail et par ce que l’on peut y évaluer.

Tous les projets n’ont pas besoin de toutes les étapes. Chez moi, la maquette et le design graphique sont réalisés ensemble dans Figma, directement en versions ordinateur et téléphone ; vous voyez donc le site avant que la moindre ligne de code n’existe. Un prototype cliquable est surtout utile lorsque le site comporte autre chose que de simples pages : un formulaire en plusieurs étapes, un calculateur ou des réservations. Pour un site vitrine simple, une bonne maquette suffit en général.

Ce que vous devez avoir reçu avant de valider le projet

Une maquette présentée une seule fois en réunion, sans lien, ne suffit pas. Avant de valider, il vaut mieux disposer des éléments suivants :

• un lien vers le projet, que vous pouvez ouvrir vous-même, à tout moment, y compris sur téléphone ;
• la version téléphone de chaque page importante, et pas seulement de la page d’accueil ;
• la liste des pages, avec une courte description du contenu de chacune ;
• l’indication de l’origine des textes et des photos : fournis par vous, par le prestataire ou issus d’une banque d’images ;
• le nombre de tours de corrections inscrit dans l’offre ;
• en cas de refonte : la liste des anciennes adresses et l’indication de leur destination après le changement. Sinon, les pages qui apportent aujourd’hui du trafic depuis Google risquent tout simplement de disparaître.

Demandez aussi ce qu’il adviendra du projet si vous n’allez pas plus loin après l’étape de la maquette : recevrez-vous le fichier et le droit de l’utiliser ? C’est une question de contrat, pas de promesse orale. Il est préférable que le paiement soit échelonné par étapes, la validation de la maquette en constituant une. Les autres points à examiner dans une offre sont décrits dans l’article Combien coûte un site web en 2026.

Ce qu’il ne faut pas juger sur une maquette

Certains éléments d’une maquette ne sont que du remplissage. Si vous vous y attardez, vous gaspillerez un tour de corrections sur des choses qui changeront de toute façon.

• Le texte « lorem ipsum ». C’est un texte de remplissage en pseudo-latin, qui montre seulement la place que le contenu occupera. Jugez la longueur et la mise en page, pas le sens. Si votre vrai texte doit être trois fois plus long, dites-le tout de suite, car cela modifiera la disposition des sections.
• Les photos issues de banques d’images. Elles sont souvent placées sur la maquette à titre d’essai seulement. Sur des services comme Adobe Stock, l’aperçu porte un filigrane qui ne disparaît qu’après l’achat de la licence. Déterminez si le site utilisera vos propres photos de réalisations ou des photos achetées, et qui paie les licences.
• Les chiffres et les avis d’exemple. « 15 ans d’expérience » ou « 500 clients satisfaits » sur une maquette ne sont généralement que du remplissage. Veillez à ce que vos vraies données les remplacent avant la publication.
• La nuance exacte d’une couleur. Chaque écran et chaque téléphone affiche les couleurs un peu différemment. Si vous avez des couleurs d’entreprise, communiquez leurs codes plutôt que de juger « à l’œil ».

Sur une maquette, évaluez plutôt l’ordre des contenus, la lisibilité, le fait de comprendre d’emblée l’activité de l’entreprise et la facilité avec laquelle on peut la contacter.

Vérifiez la maquette sur téléphone, pas seulement sur ordinateur

On regarde généralement une maquette sur un grand écran. Vos clients, eux, verront souvent le site sur un téléphone : pendant une pause au travail, dans une file d’attente ou sur un chantier.

Google regarde lui aussi avant tout la version mobile. Dans sa documentation pour les propriétaires de sites, Google indique qu’il utilise la version mobile d’un site pour l’indexation et le classement. Un contenu absent de la version téléphone n’est pas pris en compte lors de l’indexation.

Comment vérifier la maquette sur téléphone :

1. Demandez le lien vers la version mobile ou vers le prototype. Un lien de prototype Figma s’ouvre dans le navigateur du téléphone, mais c’est plus pratique dans l’application Figma pour iOS et Android (l’application nécessite un compte).
2. Examinez le projet à sa taille réelle, le téléphone dans une seule main. Sur un écran d’ordinateur, tout paraît plus grand et plus lisible.
3. Vérifiez le premier écran : voit-on, sans faire défiler, ce que fait votre entreprise ainsi qu’un bouton pour appeler ?
4. Suivez le parcours du client : du menu à un service, puis du service au formulaire. Comptez les clics.

Chez moi, le projet comprend une version ordinateur et une version téléphone, et je teste le site terminé sur de vrais téléphones avant sa mise en ligne.

10 questions à se poser en examinant la maquette

Imprimez cette liste ou ouvrez-la à côté du projet. Pour chaque question, notez la réponse en une phrase.

1. Au bout de quelques secondes sur la page d’accueil, est-ce que je sais ce que fait l’entreprise, et dans quelle ville ou région ?
2. Le numéro de téléphone ou un bouton de contact est-il visible sur le premier écran du téléphone ?
3. Chaque page a-t-elle un bouton principal qui indique quoi faire ensuite ?
4. Tous les services que je veux vendre sont-ils présents, du plus important au moins important ?
5. Que verra une personne qui arrive de Google directement sur la page d’un service, sans passer par la page d’accueil ?
6. Où sont les preuves : avis, photos de réalisations, certificats, garantie ?
7. Comment fonctionne le menu sur téléphone, et combien de clics séparent le client du formulaire ?
8. Le formulaire ne demande-t-il que ce dont j’ai réellement besoin pour établir un devis, et que verra le client après l’avoir envoyé ?
9. Qui préparera les textes et les photos, dans quel délai et pour quel prix ?
10. Que manque-t-il encore sur la maquette : pied de page, politique de confidentialité, bandeau de cookies, messages d’erreur du formulaire, page 404 ?

Les questions 1 à 3 sont les plus importantes. Si vous répondez « je ne sais pas » à l’une d’elles, vous tenez votre première remarque pour le prestataire.

Comment rédiger vos remarques pour que le prestataire les comprenne

« Ça ne me plaît pas » est la remarque la plus fréquente et la moins utile. Le prestataire ne sait pas quoi modifier, il devine, et vous recevez une nouvelle version qui ne convient pas non plus. Une bonne remarque comporte quatre parties : où, ce qui est là actuellement, ce qui doit être là et pourquoi. Un modèle à copier :

• Où : Offre, version téléphone, section des tarifs.
• Actuellement : trois formules côte à côte, les prix sont difficiles à lire.
• Souhaité : les formules l’une sous l’autre, la formule intermédiaire en haut.
• Pourquoi : les clients nous interrogent le plus souvent sur la formule intermédiaire.

Quelques exemples du type « au lieu de X, écrivez Y » :

• Au lieu de « le titre est faible », écrivez : « Le titre parle de qualité, alors que les clients nous interrogent surtout sur le délai. Je propose : “Salles de bains clés en main en 6 semaines, Cracovie et alentours”. »
• Au lieu de « faites quelque chose de plus moderne », écrivez : « J’aime le site [lien] : de grandes photos de réalisations et peu de texte sur le premier écran. Pouvons-nous organiser ainsi la page d’accueil ? »
• Au lieu de « la couleur ne va pas », écrivez : « Le bouton se fond dans la photo d’arrière-plan. Je vous demande d’utiliser l’orange de notre logo ou un contraste plus fort. »
• Au lieu de « montez ça plus haut », écrivez : « Sur téléphone, le numéro de téléphone doit être visible sans faire défiler. »

Trois règles qui économisent des tours de corrections :

• Une seule liste par tour. Rassemblez les remarques de toutes les personnes de l’entreprise et envoyez-les ensemble, numérotées. Dix e-mails contenant chacun une seule remarque, c’est le plus sûr moyen de provoquer des erreurs.
• Une remarque rattachée à un endroit précis. Dans Figma sur ordinateur, vous activez le mode commentaire (touche C) et vous cliquez à l’endroit concerné. Sans Figma, une capture d’écran avec une flèche suffit.
• Les « il faut » séparés des « ce serait bien ». Le prestataire sait alors ce qui conditionne la validation et ce qui n’est qu’une suggestion.

Combien de corrections est-il normal d’avoir ? Plus important que le nombre lui-même : qu’il figure dans l’offre et que l’on sache clairement ce qu’est un tour, à savoir une seule liste de remarques regroupées, et non chaque message pris séparément. Chez moi, deux tours de corrections sont inclus dans le prix du design. Les petites modifications après validation sont normales, mais une nouvelle mise en page ou une nouvelle page, alors que le site est déjà en code, représente en général un travail supplémentaire facturé à part.

Un brouillon gratuit dans le créateur, avant de commander quoi que ce soit

Si vous avez du mal à vous représenter un site à partir de rectangles gris, commencez par quelque chose de concret. Dans mon créateur de sites gratuit, vous remplissez un formulaire en 2 à 3 minutes, puis l’IA (Google Gemini) rédige en une quinzaine de secondes un site de quatre pages : accueil, offre, présentation de l’entreprise et contact. Vous ajoutez votre logo, vos photos, la couleur de votre entreprise et une police, et vous choisissez un fond clair ou sombre.

Vous retouchez les textes dans le navigateur : vous cliquez sur une phrase et vous écrivez. Le créateur surligne les phrases contenant des chiffres ou des promesses pour que vous les vérifiiez, et le bouton « Napisz inaczej » (« Réécrire ») rédige la section à nouveau (jusqu’à 3 fois par site). Le brouillon est conservé 7 jours après la dernière modification, mais pas plus de 30 jours. Le créateur et les fichiers sont gratuits, sans abonnement. La seule condition est la mention « Wykonanie: RobimyWeb » (« Réalisation : RobimyWeb ») en pied de page ; vous ne payez que le nom de domaine et l’hébergement.

Un tel brouillon est utile de deux façons. Si un site simple vous suffit, vous l’avez tout de suite. Sinon, vous savez déjà de quelles pages, de quels textes et de quelles photos vous avez besoin, et la discussion sur un projet sur mesure avance plus vite. N’oubliez pas que le site téléchargé n’a pas de back-office pour le modifier, et qu’une boutique, des réservations, un calculateur de devis ou de nombreuses pages dédiées aux services et aux villes relèvent déjà d’un site sur mesure. Je décris le créateur pas à pas dans l’article Site web gratuit pour entreprise.

En résumé

La maquette est le moment le moins cher pour changer d’avis. Demandez un lien avec la version téléphone, ne jugez ni le texte de remplissage ni les photos de banque d’images, parcourez les 10 questions et rédigez vos remarques selon le modèle : où, actuellement, souhaité, pourquoi.

Si vous prévoyez un nouveau site, avec le Site vitrine clés en main (à partir de 4 900 PLN HT), vous recevez un design Figma pour ordinateur et téléphone ainsi que deux tours de corrections avant que j’écrive la première ligne de code. Si vous souhaitez rafraîchir un ancien site, consultez la refonte de site (à partir de 2 900 PLN HT). Écrivez-moi : vous recevrez votre devis sous 24 heures, et les nouveaux clients bénéficient de 20 % de remise sur la première commande.