Qu’est-ce qu’une maquette web ?

18 janvier 2013,
par Romy Têtue

Mots-clefs associés à cet article :

Sous ce terme se cachent trois sortes de maquettes à ne plus confondre : la maquette filaire (wireframe), celle graphique (mock-up) et la maquette HTML (intégration).

D’après Wikipédia, Une maquette est une représentation partielle d’un système ou d’un objet (réel et existant ou à concevoir) afin d’en tester et valider certains aspects (maquette virtuelle ou visuelle en 2 ou 3D) et/ou comportements (maquette fonctionnelle). L’on pense tout de suite aux modèles réduits d’avion et de bateau, aux esquisses d’architectes…

Dans le Web, c’est évidement autre chose. C’est moins tangible. Mais lorsqu’on vous pose la question, vous donnez des sens différents, allant du « zoning super épuré » au prototype HTML, en passant par la « proposition graphique statique (fichier image) prête à l’intégration ». Bref, « maquette web » veut tout et rien dire. Comment s’entendre quand, pour Samy, c’est seulement un zoning, tandis que pour Gaël, c’est carrément un proto HTML ?

Graphique ? fil de fer ? ou HTML ?

C’est que nous désignons plusieurs réalités différentes sous le même terme de « maquette ». Il convient de préciser. Nous avons donc :

Maquette filaireMaquette filaire (ou wireframe)
C’est du dessin, réalisé au crayon dans un calepin, ou plutôt avec un logiciel dédié. En général très sommaire, en noir et blanc, en « fil de fer ». La maquette filaire permet de déterminer les principaux blocs de contenu et leur hiérarchie informative. C’est quelque chose de non définitif, ébauche du projet final, à faire évoluer en fonction des retours du client précise MonsieurYu.
Maquette graphiqueMaquette graphique (ou mock-up)
C’est du graphisme, c’est l’habillage visuel, généralement un fichier PSD, donc statique. La maquette graphique est en quelque sorte une photo numérique ou une capture d’écran de votre futur site Internet. C’est une proposition graphique prête à l’intégration dit Sophie Drouvroy et statique insiste Sébastien Desbenoît.
Maquette HTMLMaquette HTML (ou intégration)
C’est du code, généralement un répertoire de fichiers HTML/CSS/JS et d’images, qu’on ne peut donc consulter que dans un navigateur. À la différence du prototype, elle n’est pas très interactive : en tant qu’intégrateur “maquette” est la page web montée. Page fictive / de démo / non-fonctionelle dit Yvain Liechti, montage dit plutôt Luc Poupard.

Mieux vaut donc employer le terme « maquette » avec un adjectif qualificatif (filaire, graphique…) qui évitera tout malentendu. À défaut, demandez à ce qu’on vous le précise.

Dans tous les cas, il s’agit d’un aperçu partiel et non fonctionnel, descriptif et/ou visuel, d’un site ou service web. À ne pas confondre avec le « template » ou le « prototype », qui sont eux fonctionnels.

Vos commentaires

  • Le 19 janvier 2013 à 14:56, par Rodleg En réponse à : Qu’est-ce qu’une maquette web ?

    Merci pour cet article, c’est vrai que le terme de maquette est employé pour définir certaines (si ce n’est pas toutes) étapes de conception d’un site. Comme tu le précise l’emploi d’un adjectif est nécessaire, pour ne pas dire indispensable .

    Juste si je peux me permettre, l’emploi du terme « mock-up » pour designer la maquette « graphique » (visuel final) me semble erroné.

    Personnellement je placerais 2 étapes et non pas une seule avant la réalisation graphique à proprement parler, à savoir :

    • Effectivement le crayonné « wireframe » (fait principalement sur papier voire dans un logiciel graphique)
    • mais également le zonnig en premier lieu (organisation structurelle des différentes sections), qui lui est réalisé soit dans un éditeur graphique (Photoshop) soit via un service en ligne.

    Pour ce qui est de mock-up je l’ai déjà entendu pour définir chacune de ces étapes mais pas vraiment pour représenter le design sorti de Photoshop.

    Évidement je n’ai pas la science infuse (loin de là ^^) alors si quelqu’un constate des erreurs (ou veut ajouter le mot « rough » :-/ ) dans ce que j’ai dit concernant le zoning, wireframe et mock-up je suis preneur de correction ;-)

    Rod

  • Le 21 janvier 2013 à 14:50, par Romy Têtue En réponse à : Qu’est-ce qu’une maquette web ?

    Oui, c’est pareil avec le terme « mock-up » qui signifie littéralement « maquette ». Mais le terme semble très utilisé en design et packaging où le rendu visuel prime : il s’agit de se donner un aperçu visuel très fidèle de ce que sera le produit final. Ce qui, transposé au Web, correspond davantage à l’étape de maquettage graphique.

  • Le 22 janvier 2013 à 11:09, par Rodleg En réponse à : Qu’est-ce qu’une maquette web ?

    Merci bien pour cette précision.

  • Le 14 février 2013 à 17:51, par Claudia En réponse à : Qu’est-ce qu’une maquette web ?

    Je pensais que la maquette était différente de l’affichage filaire et qu’elle était préférable dans une présentation client car elle fournit une vision plus concrète que l’affichage filaire qui est construit sans détails afin d’obtenir l’attention des clients sur la structure.

  • Le 19 février 2013 à 11:50, par Lisa En réponse à : Qu’est-ce qu’une maquette web ?

    je tiens à vous féliciter pour le travail formidable que vous effectuer à travers ce blog.

  • Le 28 février 2013 à 10:14, par Inkkreation En réponse à : Qu’est-ce qu’une maquette web ?

    Bonne introduction à la problématique du vocabulaire dans la création web.

    L’exemple du terme « maquette » est une très bonne illustration du phénomène.

    Entre la maquette papier de premier jet lors d’un RDV ou réunion, l’image mise en forme que vous désignez par : Maquette graphique, la page internet non interactive, sa version avec interaction de base (navigation, effets, ...), et sans oublier les maquettes de type « layout d’animation » pour les effets visuels ou les animations, il est important comme vous le dites de bien définir les termes utilisés pour éviter les incompréhension.

    Bravo !

  • Le 23 mars 2014 à 19:26, par Bertrand En réponse à : Qu’est-ce qu’une maquette web ?

    C’est vrai que la signification du terme « maquette » peut vraiment avoir plusieurs sens.
    Lors de la création de mon site internet, j’ai demandé à mon prestataire la création d’une maquette, et j’entendais par là « maquette graphique », et c’est alors qu’il m’a expliqué toutes les déclinaisons que cela pouvait signifier !

    Merci en tout cas pour toutes les précisions.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom