Quel logiciel pour le web design ? Maquetter une interface

Pour maquetter une interface, un logiciel web design comme Figma, Penpot ou Sketch couvre les trois étapes du métier : le wireframe qui place les blocs, la maquette qui fixe le rendu, le prototype qui simule la navigation. Votre choix tient ensuite à trois critères : votre système, le travail à plusieurs et la remise des fichiers au développeur.

Wireframe, maquette, prototype : trois niveaux de détail

Le vocabulaire change d’une équipe à l’autre, la progression reste la même : du plus schématique au plus réaliste, souvent dans un seul fichier.

Le wireframe fixe la structure

Wikipédia définit le wireframe, ou maquette fonctionnelle, comme un schéma qui délimite les zones et les composants d’une interface pendant sa conception. Pas de couleur, pas de photo : des rectangles gris, des libellés provisoires, la hiérarchie des blocs. L’intérêt ? Discuter de l’ordre des informations sans que le débat dérive vers la teinte d’un bouton.

Une feuille et un crayon conviennent pour un premier jet. Le logiciel prend le relais au moment de partager, de commenter et de faire évoluer le schéma.

La maquette graphique donne le rendu

La maquette, dite haute fidélité, habille le wireframe : typographies, couleurs, images, icônes, espacements réels. Voilà la réponse à la question « c’est quoi la maquette d’un site web ? » : une image fidèle de chaque page type, déclinée pour l’ordinateur et pour le téléphone. Vous validez sur pièce, avant toute intégration.

Raisonnez en gabarits plutôt qu’en pages : accueil, liste, fiche, article, contact. Ce sont eux que le designer dessine en détail.

Le prototype simule la navigation

Le prototype relie les écrans : un clic sur le menu ouvre le panneau, le bouton de réservation mène au formulaire. La page Wikipédia consacrée au wireframe précise qu’il devient prototype dès que des liens cliquables relient les écrans pour tester l’utilisabilité. Ce prototype cliquable sert à valider un parcours avec de vrais utilisateurs, pas à livrer du code.

Figma, Penpot, Sketch, Framer : quel logiciel web design pour quel usage

Quatre noms reviennent dans les équipes qui conçoivent des interfaces. Tous dessinent des écrans, gèrent des composants et produisent des prototypes ; ils diffèrent par leur modèle, leur licence et leur rapport à la mise en ligne.

Figma, le travail à plusieurs dans le navigateur

Figma fonctionne dans le navigateur, avec une application de bureau en complément. Plusieurs personnes modifient le même fichier en même temps, et les intervenants extérieurs commentent directement l’écran concerné. Sur sa page de tarifs, consultée le 14 octobre 2026, l’éditeur présente quatre formules, dont une offre Starter gratuite à l’accès limité. Figma Sites, signalé en bêta à la même date, publie un site responsive à partir d’un fichier de design.

Penpot, l’alternative open source

Penpot, édité par la société Kaleidos, est publié sous licence MPL 2.0. Cette alternative open source tourne dans le navigateur ou s’installe sur vos propres serveurs, un argument pour une structure qui veut garder ses fichiers chez elle. Elle s’appuie sur des standards ouverts, SVG, CSS, HTML et JSON. Sa page de tarifs, relue le 14 octobre 2026, décrit une première formule gratuite et complète.

Sketch, l’éditeur natif du Mac

Sketch reste une application macOS : sa version actuelle demande macOS Sequoia (15.0) ou plus récent, selon le site de la société indépendante Sketch B.V. Le travail d’équipe passe par un espace web où les développeurs inspectent les fichiers et téléchargent les ressources depuis n’importe quel navigateur. Dans une équipe mixte, le dessin reste réservé aux postes Apple.

Framer, du canevas à la page publiée

Framer mêle design et publication : hébergement, CMS et réglages de référencement sont intégrés, selon l’éditeur, qui propose aussi un démarrage gratuit. La frontière avec les constructeurs de sites s’estompe ici. Si votre but est de publier sans développeur plutôt que de produire une maquette, les outils no-code qui mettent un site en ligne font l’objet d’un comparatif à part.

Adobe XD, à réserver aux anciens fichiers

Adobe indique sur la page de son produit, relue le 14 octobre 2026, que XD est en mode maintenance. Après l’abandon du rachat de Figma, le 18 décembre 2023, l’éditeur a fait savoir qu’il n’investirait plus dans l’outil, rapporte Wikipédia. Si vos maquettes y dorment encore, exportez les écrans validés et les ressources, relevez couleurs et typographies, puis reconstruisez les composants dans l’outil retenu.

Croquis, retouche, animation : les outils d’appoint

Trois familles d’outils accompagnent le logiciel principal :

• Balsamiq produit des wireframes basse fidélité au style crayonné, volontairement sommaires pour garder la discussion sur la structure.
• GIMP retouche et recadre les photos, Inkscape dessine icônes et illustrations au format SVG : deux logiciels libres disponibles sous Windows, macOS et Linux, qui répondent à la question du graphisme gratuit.
• Google Web Designer produit vidéos, images et créations HTML5 lisibles sur tous les appareils, et Google le réserve à un usage professionnel.

Ces programmes complètent l’outil de maquettage sans le remplacer : la photo retouchée ou l’icône vectorielle finit importée dans le fichier de design.

Composants et système de design : le vrai gain de temps

Un bouton dessiné une fois, réutilisé partout : voilà le principe du composant. Modifiez sa couleur dans la bibliothèque, chaque occurrence suit, et les variantes gèrent les états sans dupliquer le dessin.

Un cran plus loin se trouve le système de design, qui rassemble composants, styles de texte, palette, grilles et règles d’usage dans une bibliothèque commune au projet. Pour une petite entreprise, quelques boutons, champs et cartes bien construits gardent déjà un site cohérent.

Dernier étage, les jetons de design traduisent ces choix en valeurs nommées : couleur principale, espacement moyen, rayon des angles. Le Design Tokens Community Group, groupe communautaire hébergé par le W3C, a publié le 28 octobre 2025 la première version stable de sa spécification, numérotée 2025.10, sans qu’elle soit une norme officielle du W3C. Son annonce cite Penpot, Figma, Sketch et Framer parmi les outils qui la prennent en charge ou l’intègrent. Ce format commun facilite le passage d’un logiciel à l’autre, puis vers le code.

Prototyper et tester avant la première ligne de code

Un prototype ne sert à rien s’il reste dans le fichier du designer. Faites-le manipuler par des personnes qui ressemblent à vos clients, sur leur téléphone, avec une mission simple : trouver un horaire, demander un devis, réserver un créneau.

Inutile de recruter un panel. Jakob Nielsen, du Nielsen Norman Group, recommande depuis un article de mars 2000 trois petites sessions de cinq personnes plutôt qu’une seule de quinze. La première révèle l’essentiel des blocages, les suivantes vérifient les corrections.

Profitez de cette étape pour contrôler l’accessibilité, moins coûteuse à corriger sur une maquette que sur un site en ligne. Les règles WCAG 2.2 du W3C fixent un contraste minimal de 4,5:1 entre un texte courant et son fond, et de 3:1 pour un texte de grande taille (niveau AA, critère 1.4.3).

Quand les retours pointent une page confuse, les méthodes pour épurer un écran trop chargé aident à trancher.

Du fichier au code : le passage de relais

Une maquette n’a de valeur que si le développeur la reproduit fidèlement, d’où le soin à apporter au passage de relais, que les équipes appellent handoff. Il regroupe trois gestes :

1. Inspecter : mesures, espacements, polices, couleurs et extraits de code générés à partir de chaque calque.
2. Exporter : icônes en SVG, images aux bonnes dimensions, jetons de design au format commun.
3. Suivre : savoir quel écran est prêt et lequel a changé depuis la dernière livraison.

Le mode développeur de Figma, lancé en juin 2023, fournit des extraits de code CSS, iOS et Android, une comparaison des versions et un statut indiquant qu’un écran est prêt ; d’après la page de tarifs consultée le 14 octobre 2026, il relève des formules payantes. Penpot propose un mode d’inspection qui expose le code correspondant au design. Sketch met des outils de remise gratuits à disposition dans le navigateur.

Nommez les calques, regroupez les écrans par parcours et annotez ce que l’image ne montre pas : message d’erreur, état vide, effet au survol. Un développeur qui devine invente.

Système, équipe, formats : les critères qui orientent le choix

Le choix d’un logiciel de maquettage se fait sur votre contexte, pas sur la notoriété d’un nom :

• Votre système : Sketch exige un Mac, Figma et Penpot tournent dans un navigateur, sur n’importe quel poste.
• Le travail à plusieurs : édition simultanée, commentaires des clients, droits de lecture.
• Les formats : export SVG et PNG, format de fichier ouvert, prise en charge des jetons de design, pour ne pas enfermer vos maquettes.
• L’hébergement des fichiers : nuage de l’éditeur, ou serveur interne avec Penpot.
• La suite du projet : intégration par un développeur, ou publication directe depuis l’outil, comme le proposent Framer et Figma Sites.

Avant de trancher, écrivez ce que la maquette doit couvrir : gabarits, versions mobiles, interactions à prototyper. La trame d’un cahier des charges web aide à lister ces écrans sans oubli.

Prochaine étape : retenez deux outils compatibles avec votre système, reproduisez la même page d’accueil dans chacun en une demi-journée, puis faites-la commenter par un collègue. Gardez celui où les retours circulent sans friction.

Maquettage d’interface : vos questions courantes

Qui réalise le wireframe d’un site internet ?

Le wireframe revient en général à la personne chargée de l’expérience utilisateur, ou au chef de projet qui a construit l’arborescence. Dans une équipe réduite, le web designer l’enchaîne avec la maquette graphique. Le commanditaire gagne pourtant à s’y impliquer : c’est le moment où l’ordre des informations se décide, avant toute question de couleur. Un croquis sur papier apporté en réunion fait avancer la discussion plus vite qu’une longue description orale.

Un logiciel gratuit convient-il pour maquetter un site professionnel ?

Dans bien des cas, oui. Penpot décrit sa première formule comme gratuite et complète, et Figma propose une offre Starter gratuite à l’accès limité, d’après leurs pages de tarifs relues le 14 octobre 2026. Les restrictions portent surtout sur le travail d’équipe, comme le mode développeur chez Figma. Pour un projet mené seul ou à deux, wireframes, maquettes et prototypes restent à votre portée. Lisez les conditions avant de bâtir toute votre bibliothèque de composants.

Faut-il savoir coder pour se servir d’un outil de design d’interface ?

Non. Ces logiciels se manipulent à la souris : formes, textes, images, liens entre écrans. Connaître les bases du web aide pourtant à dessiner des maquettes réalistes : une grille qui se réorganise sur mobile, des marges régulières, des polices utilisables en ligne. Les extraits de code des modes d’inspection guident le développeur, sans constituer un site prêt à publier. Pour mettre en ligne sans coder, un constructeur de site prend le relais.