Du zoning au mockup, itinéraire d’une maquette web

en passant par le moodboard, le wireframe, les style tiles et le prototype

28 juin 2013,
par Romy Têtue

Mots-clefs associés à cet article :

Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [**] à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [**] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses.

sketch / croquis
La première chose que l’on fait, c’est de jeter des idées sur papier, sous la forme de croquis.
Outils : papier et crayons, Sneakpeekit, InterfaceSketch

Le sketch est trop peu utilisé : vous êtes peu nombreux à crayonner régulièrement et près de la moitié [**] à ne jamais faire de croquis ! C’est pourtant une façon d’organiser sa pensée, que l’on soit designer ou développeur. Quitter l’écran permet aussi de mieux réfléchir.

Conception ergonomique

zoning
Le zoning, comme son nom l’indique, sert à identifier les principales zones. Ce schéma en noir et blanc permet de lister les contenus, pour ne pas en oublier et à commencer à hiérarchiser l’information dans la page, par la proportion des blocs ou des nuances de gris. Il donne une vue macro.
Outils : papier et crayons, LibreOffice, Wireframe.cc [*], Cacoo, etc.
wireframe / maquette filaire
Il complète le zoning réalisé précédemment, en rentrant dans le détail de chaque bloc, avec du vrai-faux contenu. C’est un dessin informatif, monochrome, qui peut servir de base aux spécifications.
Lire : Zoning vs. Wireframes, par Sylvie Daumal
Outils : papier et crayons, Balsamiq, Pencil, Moqups [*], MockFlow, Mockingbird, iPlotz, etc.
prototype
Ce sont des pages fonctionnelles, qui se consultent donc dans le navigateur, avec des liens cliquables et des interactions. Le prototype peut servir à effectuer des tests d’utilisabilité.
Outils : HTML/CSS/JS, Axure, Jetstrap, Dummy, etc.

Maintenant que nous avons défini ces objets, voici comment ils pourraient s’enchaîner, en une succession de livrables :

Zoning, wireframe et prototype

Ils sont en noir et blanc ou en nuances gris, en tout cas extrêmement sobres, pour ne pas présumer de la mise en forme et concentrer l’attention sur le fond. Vous êtes de plus en plus nombreux à les utiliser (+ de la moitié d’entre vous les utilisent, souvent ou parfois [**]) et c’est tant mieux. Faciles à réaliser et modifier, zoning et wireframes donnent une bonne vision du site à concevoir et des cas d’utilisation qu’il faudra développer par la suite.

Habillage graphique

moodboard / planche d’inspiration
C’est une planche d’inspiration créative, où on épingle en vrac toutes les idées, au fur et à mesure qu’elles se manifestent.
Outils : panneau d’affichage, Keynote, PowerPoint, etc.
style tiles / planches de style
Plusieurs planches d’échantillons de typo, titraille et palette de couleur, guère plus. Elles permettent de choisir une piste entre différents styles, en prémisse de la charte graphique.
Lire : Les « Style Tiles », un nouvel outil pour le webdesigner ?, par Marie Alhomme, Le train de 13h37
Outils : Photoshop, The Gimp, StyleTil.es
mockup / maquette graphique
Prévisualisation haute fidélité du rendu graphique. Il permet de valider l’apparence graphique des pages du site.
Outils : Photoshop, The Gimp, Photoshop Etiquette Manifesto

Et voici comment ils pourraient s’enchaîner :

Moodboard, style tiles et mockup

Les étapes de réflexion créa sont souvent trop peu formalisées. Moodboard et style tiles sont trop peu utilisés (respectivement 70 % et 80 % d’entre vous ne les utilisent jamais [**]). Tout repose donc sur le mock-up et lui seul, qui est un goulot d’étranglement. Il pourrait pourtant être déchargé : police et palette peuvent être choisies plus tôt, indépendamment de la composition de la page.

Workflow idéal de conception

Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !

Du zoning au mockup

  1. Dans un premier temps, le zoning et le moodboard permettent d’amorcer le travail, en collectant l’inspiration et dégrossissant ;
  2. Validation par le commanditaire : une première validation peut se faire sur wireframe et style tile, conjointement ou indépendamment ;
  3. Tester avant production.

Suivre un tel processus de conception a pour avantages de :

  • améliorer la communication avec le commanditaire et au sein de l’équipe, en donnant un aperçu de chaque étape ; se prémunir du flou artistique, en rendant ainsi tangible ce qui est souvent abstrait ;
  • impliquer le commanditaire en amont et corriger le tir au plus tôt, avant la production ;
  • progresser en parallèle, en séparant ergonomie, fonctionnalités et apparence graphique ; accélérer les phases suivantes ;
  • ne plus faire l’erreur de penser l’apparence graphique avant les fonctionnalités ; réduire d’autant les surcoûts de développement.

Cependant il n’est pas indispensable, ni même souhaitable, de suivre scrupuleusement chacune des étapes ici présentées. Ce process est à adopter avec souplesse et interprétation, en modulant en fonction des projets, des équipes et des habitudes de travail.

Il est possible, par exemple, de :

Vos commentaires

  • Le 29 juin 2013 à 09:43, par RastaPopoulos En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Yeaaah encore un article synthétique, court mais de bon goût, qui résume l’état actuel (2013) de manière efficace. Merci !

  • Le 1er juillet 2013 à 18:01, par David Lafon En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Merci Romy pour cet excellent article. Il va me permettre de mieux faire comprendre les nuances à l’interne :-)

  • Le 1er juillet 2013 à 19:30, par Christophe_Cl En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    +1 pour cet article :) Note : nous utilisons également Balsamiq pour « wireframer » + prototyper et tenter des premiers tests utilisateurs !

  • Le 2 juillet 2013 à 15:57, par Luc En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Merci pour la retranscription ! J’ai pas encore fait le CR de ta conf mais j’aurai pas grand chose à faire, pratiquement qu’à renvoyer vers cette page. :-p
    J’y reviendrai plus en détail dans mon CR mais je te félicite déjà ici, j’ai adoré ta présentation !

  • Le 5 juillet 2013 à 17:33, par JulienJ En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Super article !
    J’aurais bien aimé pouvoir, en plus, zoomer sur les images.

  • Le 15 juillet 2013 à 13:59, par Aurélie En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Bonjour,

    j’avais gardé votre site dans mes favoris, mais lorsque je vois cet article, je suis assez déçue. Déçue car vous annoncez « vous n’êtes que x% à faire ceci » alors que la population de ce sondage n’est que de 50 personnes... Et il y a des incohérences, vous parlez de l’importance du vocabulaire pour se faire comprendre, mais vous dites que production et développement sont la même chose (vers la 11e minute) et vous mélangez développement et HTML...
    Déçue aussi car cette vidéo présente une conférence de la kiwiparty, et j’ai l’impression d’avoir assisté à un cours... Je suis désolée si mon commentaire n’est pas productif, mais je trouve qu’un sondage doit se baser sur un nombre de personne plus important, surtout qu’il y a moyen de trouver des sondés dans ce domaine...

  • Le 16 juillet 2013 à 10:38, par Romy Têtue En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    @Aurélie : Sans doute disposez-vous de meilleures ressources sur le sujet ? N’hésitez pas à nous les partager, cela complétera mes recherches, dont cette présentation fait la synthèse (avec moultes liens vers celles-ci). Les 50 réponses (aujourd’hui 80) de professionnels au sondage ne sont pas négligeables. Quelle meilleure source statistique connaissez-vous ?

    Quand au vocabulaire… Le HTML est un langage incontournable du développement web, en particulier front, et produire un site consiste, entre autres, à le développer — à ne pas confondre avec la phase d’exploitation inaugurée par sa mise en ligne. Oui, le vocabulaire que nous utilisons dans nos métiers souffre d’imprécision car utilisé différemment selon les équipes. Je ne traitais ici que du vocabulaire de la conception.

  • Le 13 février 2014 à 10:33, par Cyril En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Hello Romy,
    Enfin une explication claire, comme j’en cherchais depuis longtemps, qui permet d’aborder la question du design avant fabrication de manière plus sereine, tant avec les commanditaires qu’avec les prestataires. Merci ;-)

  • Le 15 mars 2014 à 11:27, par lusancay En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Bonjour, je viens de tomber sur votre article, très clair. Je suis juste un peu perdu sur la définition que vous faites du mockup, pour vous c’est une maquette graphique. Beaucoup d’articles sur le web en donnent une autres définition notamment un article d’alascréations :
    http://www.alsacreations.com/article/lire/1183-mockup-rough-maquette-zoning.html
    Parlant moi-même de mockup en agence web, j’aimerai être certain de sa définition
    Merci :)

  • Le 24 mai 2014 à 20:32, par Guillaume En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Encore une fois, les explications sont claires et bien documentées !
    Bravo Romy :)

  • Le 8 juillet 2014 à 11:56, par Cédric En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    L’article parfait pour pouvoir faire un appel d’offre WEB.
    Merci Romy.

  • Le 30 juillet 2014 à 09:24, par biou En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Merci pour l’article, je trouve l’idée d’aligner les livrables de structure d’interface et de design graphique intéressante.

    Juste une petite question en passant, est-ce que le schéma de navigation (dans une logique d’architecture de l’information telle que décrite chez ergolab) ne devrait pas aussi faire partie de ce process ? ou a minima des livrables que tu listes ici ?
    De même dans certains cas (appli web, intranet), on pourrait avoir besoin de lister les différents personas et les liens entre les personas et les fonctionnalités (droits d’accès).

    Qu’en penses-tu ?

  • Le 19 octobre 2014 à 21:03, par Romy Têtue En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    @biou : oups, je n’avais pas vu ton message ! Mais oui, tu as raison, le process ci-dessus décrit pourrait être complété d’étapes préalables définissant l’architecture de l’information du site (card sorting, arbo, etc.) mais aussi d’étapes parallèles de développement.

    Tu as d’ailleurs complété ce schéma de façon très intéressante lors de ton intervention à Paris Web 2014 : Le futur de l’industrialisation du web : l’ingénierie dirigée par les modèles, merci !

  • Le 20 novembre 2014 à 09:00, par OnlyCom En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Tout est dit clairement et simplement. Merci de nous avoir partager cela car cela m’a beaucoup aidé à enrichir mes vocabulaires.

  • Le 25 février 2015 à 21:51, par Bob En réponse à : Du zoning au mockup, itinéraire d’une maquette web

    Interessant, moi j’utilise avec mes clients :
    - à la place de « zoning », je parle de « premier jet »
    - à la place de « wireframe », je parle de « mockup », car wireframe est aussi inclut dans la definition de Mockup
    - à la place de « prototype », je parle de « MVP »
    - à la place de « mockup », je parle de « Maquette graphique »
    - à la place de « moodboard » et « style tiles », je parle seulement de « source d’inspiration ».

    Et j’exécute, jamais en parallèle, toujours dans l’ordre suivant (selon votre terminologie) : moodboard > zoning > wireframe > style tiles > mockup > prototype. Le wireframe est clef pour la réussite du projet, le reste c’est du gâteau.

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