{
    "id": 760,
    "type": "post",
    "title": "Outil de maquette de site web : Lequel utiliser gratuitement ?",
    "slug": "outil-maquette-site-web",
    "url": "https://www.matosordi.com/outil-maquette-site-web.html",
    "description": "Fil de fer, maquette graphique et prototype cliquable ne servent pas au même moment ; Figma, Penpot ou même le papier suffisent pour démarrer.",
    "chapo": "Fil de fer, maquette graphique et prototype cliquable ne servent pas au même moment ; Figma, Penpot ou même le papier suffisent pour démarrer.",
    "date_published": "2022-09-02T12:26:20+02:00",
    "date_modified": "2026-09-26T11:34:11+02:00",
    "language": "fr-FR",
    "translations": null,
    "categories": [
        {
            "name": "Web",
            "url": "https://www.matosordi.com/web/"
        }
    ],
    "tags": [],
    "word_count": 543,
    "reading_time_min": 3,
    "image": "https://www.matosordi.com/wp-content/uploads/2022/09/ga0821599bb9ace2d42e10d6dadc972729892a6f593128e533ce61c7e52d7d9c1193fd9a06c130ef078a8390c396e422aaf33f668713bcb74be860717b0495ea4_640.jpg",
    "image_alt": "Outil de maquette de site web : Lequel utiliser gratuitement ?",
    "author": {
        "name": "Matos Ordi",
        "url": "https://www.matosordi.com/author/matos-ordi/",
        "bio": "La rédaction de Matos Ordi. Chaque article est vérifié avant publication, et corrigé quand une information change.",
        "avatar": "https://www.matosordi.com/uploads/auteurs/matos-ordi-robot.webp"
    },
    "content_markdown": "Avant de coder un site, il faut le montrer au client. C'est là que trois types d'outils entrent en jeu, et ils ne servent pas au même moment du projet : la maquette fil de fer, la maquette graphique, et le prototype cliquable.\n\n## Maquette fil de fer, maquette graphique, prototype : la différence\n\nLa maquette fil de fer (ou wireframe) pose la structure d'une page sans couleur ni typographie définitive : où va le menu, où va le bloc de contenu principal, où se place le bouton d'action. Elle sert à valider l'organisation avant de perdre du temps sur l'esthétique.\n\nLa maquette graphique reprend cette structure et lui donne un rendu visuel complet : couleurs, polices, images, icônes. C'est ce que le client voit habituellement comme « le design du site », mais elle reste une image fixe, pas un site fonctionnel.\n\nLe prototype cliquable relie plusieurs maquettes graphiques entre elles pour simuler la navigation : cliquer sur un bouton fait passer d'un écran à l'autre, comme sur le futur site. C'est l'étape la plus proche du produit final avant le développement réel, et souvent celle qui permet de repérer les problèmes d'ergonomie.\n\n  **Pourquoi ne pas sauter directement à la maquette graphique**\n\nCommencer par le fil de fer évite de refaire tout le design si la structure de la page ne convient pas. Un client qui découvre en premier les couleurs a du mal à juger l'organisation du contenu, il commente le visuel plutôt que la structure.\n\n## Des outils gratuits ou avec une offre gratuite\n\nPlusieurs outils permettent de créer ces maquettes sans payer, au moins pour démarrer. Figma propose une offre gratuite suffisante pour un projet individuel ou une petite équipe, avec fil de fer, maquette graphique et prototype cliquable dans un même outil. Penpot est un outil libre et gratuit, une alternative intéressante quand on veut éviter de dépendre d'un service propriétaire. D'autres outils comme Adobe XD, InVision, Marvel ou Framer offrent aussi des versions gratuites ou des essais, chacun avec ses habitudes d'interface.\n\n  **Le papier reste un outil de maquette valable**\n\nPour un premier jet de structure, dessiner les écrans à la main sur papier permet d'itérer très vite avec un client, sans même ouvrir un logiciel. C'est souvent l'étape zéro avant de passer au fil de fer numérique.\n\n## Comment choisir son outil\n\nLe meilleur outil est souvent celui que l'équipe de conception maîtrise déjà, ou celui que le client peut consulter facilement sans installer de logiciel. Comme la plupart de ces outils proposent une offre gratuite, tester deux ou trois solutions sur un petit projet avant de choisir reste la meilleure méthode : chacun a ses raccourcis, sa bibliothèque de composants et sa façon de gérer la collaboration en temps réel.\n\n  **Impliquer le client tôt dans le choix de l'outil**\n\nUn client qui peut ouvrir le lien du prototype sans créer de compte donne des retours plus vite qu'un client qui doit d'abord s'inscrire sur un outil qu'il ne connaît pas.\n\nUn point à vérifier avant de s'engager sur un outil pour un projet long : la facilité à exporter ou migrer les maquettes si l'équipe change d'outil en cours de route, et la possibilité pour le client de commenter directement sur les écrans sans créer de compte payant.",
    "content_html": "<p>Avant de coder un site, il faut le montrer au client. C'est là que trois types d'outils entrent en jeu, et ils ne servent pas au même moment du projet : la maquette fil de fer, la maquette graphique, et le prototype cliquable.</p>\n\n<h2>Maquette fil de fer, maquette graphique, prototype : la différence</h2>\n\n<p>La maquette fil de fer (ou wireframe) pose la structure d'une page sans couleur ni typographie définitive : où va le menu, où va le bloc de contenu principal, où se place le bouton d'action. Elle sert à valider l'organisation avant de perdre du temps sur l'esthétique.</p>\n\n<p>La maquette graphique reprend cette structure et lui donne un rendu visuel complet : couleurs, polices, images, icônes. C'est ce que le client voit habituellement comme « le design du site », mais elle reste une image fixe, pas un site fonctionnel.</p>\n\n<p>Le prototype cliquable relie plusieurs maquettes graphiques entre elles pour simuler la navigation : cliquer sur un bouton fait passer d'un écran à l'autre, comme sur le futur site. C'est l'étape la plus proche du produit final avant le développement réel, et souvent celle qui permet de repérer les problèmes d'ergonomie.</p>\n\n<aside class=\"bluf bluf-bleu\">\n<strong>Pourquoi ne pas sauter directement à la maquette graphique</strong>\n<p>Commencer par le fil de fer évite de refaire tout le design si la structure de la page ne convient pas. Un client qui découvre en premier les couleurs a du mal à juger l'organisation du contenu, il commente le visuel plutôt que la structure.</p>\n</aside>\n\n<h2>Des outils gratuits ou avec une offre gratuite</h2>\n\n<p>Plusieurs outils permettent de créer ces maquettes sans payer, au moins pour démarrer. Figma propose une offre gratuite suffisante pour un projet individuel ou une petite équipe, avec fil de fer, maquette graphique et prototype cliquable dans un même outil. Penpot est un outil libre et gratuit, une alternative intéressante quand on veut éviter de dépendre d'un service propriétaire. D'autres outils comme Adobe XD, InVision, Marvel ou Framer offrent aussi des versions gratuites ou des essais, chacun avec ses habitudes d'interface.</p>\n\n<aside class=\"bluf bluf-vert\">\n<strong>Le papier reste un outil de maquette valable</strong>\n<p>Pour un premier jet de structure, dessiner les écrans à la main sur papier permet d'itérer très vite avec un client, sans même ouvrir un logiciel. C'est souvent l'étape zéro avant de passer au fil de fer numérique.</p>\n</aside>\n\n<h2>Comment choisir son outil</h2>\n\n<p>Le meilleur outil est souvent celui que l'équipe de conception maîtrise déjà, ou celui que le client peut consulter facilement sans installer de logiciel. Comme la plupart de ces outils proposent une offre gratuite, tester deux ou trois solutions sur un petit projet avant de choisir reste la meilleure méthode : chacun a ses raccourcis, sa bibliothèque de composants et sa façon de gérer la collaboration en temps réel.</p>\n\n<aside class=\"bluf bluf-rose\">\n<strong>Impliquer le client tôt dans le choix de l'outil</strong>\n<p>Un client qui peut ouvrir le lien du prototype sans créer de compte donne des retours plus vite qu'un client qui doit d'abord s'inscrire sur un outil qu'il ne connaît pas.</p>\n</aside>\n\n<p>Un point à vérifier avant de s'engager sur un outil pour un projet long : la facilité à exporter ou migrer les maquettes si l'équipe change d'outil en cours de route, et la possibilité pour le client de commenter directement sur les écrans sans créer de compte payant.</p>",
    "alternates": {
        "html": "https://www.matosordi.com/outil-maquette-site-web.html",
        "markdown": "https://www.matosordi.com/outil-maquette-site-web.md",
        "json": "https://www.matosordi.com/api/post/outil-maquette-site-web.json"
    },
    "site": {
        "name": "Matos Ordi",
        "url": "https://www.matosordi.com/"
    },
    "license": "Reproduction autorisée avec lien vers la source."
}