Du zoning au mockup

28 juin 2013,
par Romy Têtue

Mots-clefs associés à cet article :

Du zoning au mockup, itinéraire d’une maquette web, en passant par le moodboard, le wireframe, les style tiles et le prototype…

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, le mockup 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

Dans un premier temps, le zoning et le moodboard permettent d’amorcer le travail, en collectant l’inspiration et dégrossissant ;
Validation par le commanditaire : une première validation peut se faire sur wireframe et style tile, conjointement ou indépendamment ;
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 :

passer directement du zoning au mockup, comme pour l’extranet assurés Thélem assurances, par l’agence LunaWeb
travailler zoning et moodboard en parallèle, en préparation de la maquette graphique, comme pour le design d’Indigio [*], par Dean Burney
dessiner toutes les pages en wireframe, pour les habiller graphiquement ensuite, comme pour la refonte de Mattrunks [*]
réaliser le mockup directement dans le navigateur : Make Your Mockup in Markup
travailler zoning et wireframe directement dans le navigateur, en se passant de Photoshop, comme pour la validation du responsive AAHomecare
réaliser un prototype haute fidélité, avec rendu graphique, comme pour Codex Books
etc.

Vos commentaires

1. 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 !
2. 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 :-)
3. 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 !
4. 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 !
5. 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.
6. 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...
7. 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.
8. 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 ;-)
9. 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 :)
10. 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 :)
11. 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.
12. 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 ?
13. 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 !
14. 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.
15. 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.
16. Le 25 août 2017 à 10:57, par Jean En réponse à : Du zoning au mockup, itinéraire d’une maquette web

Merci d’avoir expliqué cela très clairement, car il est parfois difficile de parler le même langage.