Les esquisses et maquettes en web

Du « zoning » au « mock-up » en passant par le « wireframe » quelles sont les différentes étapes de réalisation des esquisses et maquettes d’un site internet.

Il est facile de se perdre rapidement dans le vocabulaire nouveau de la conception Web. Certains d’entre nous ont des significations différentes pour les termes « zoning » et « mock-up » quand d’autres les considèrent comme des synonymes de « wireframe ». Commençons donc par une définition de chacun d’eux :

  • sketch / croquis
    C’est la première étape, c’est là que l’on jette les idées sur le papier sous la forme de petits croquis
    Outils : papier et crayons, Sneakpeekit, InterfaceSketch

 

Conception ergonomique

  • exemple zoning

    exemple zoning

    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, PencilLibreOffice, Cacoo.

  • exemple wireframe

    exemple wireframe

    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.
    Outils : papier et crayons, Balsamiq, Pencil, Moqups, MockFlow, Mockingbird, iPlotz.

  • 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,

     
    Bon maintenant que ces différents éléments sont définis vous comprenez bien l’ordre dans lesquels ils seront livrés. 1 – le zoning ; 2 – le wireframe / maquette filaire ; 3 – le prototype. Ces esquisses sont en noir et blanc ou  en nuance de gris afin de consacrer l’attention sur le fond. Faciles à réaliser et modifier, le zoning et le wireframes donnent une bonne vision du site et des cas d’utilisation qu’il faudra développer par la suite.

 

Habillage graphique

moodboard exemple

moodboard exemple

  • 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, Pinterest, 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
    Outils : Photoshop, The Gimp, StyleTil.es
  • mock-up / 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

Bon maintenant que ces différents éléments sont définis vous comprenez bien l’ordre dans lesquels ils seront livré. 1 – le Moodboard ; 2 – le style tiles ; 3 – le mock-up.  Les étapes de réflexion créative sont souvent trop peu formalisées. Moodboard et style tiles sont trop peu utilisés. 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

Dans un monde idéal vous présenteriez les esquisses et maquettes dans l’ordre suivant :

    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 la production final en présentant le prototype et le mockup/maquette graphique.

Suivre un tel processus de conception a pour avantage 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 processus 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 ;
  • travailler zoning et moodboard en parallèle, en préparation de la maquette graphique ;
  • dessiner toutes les pages en wireframe, pour les habiller graphiquement ensuite ;
  • réaliser le mockup directement dans le navigateur ;
  • travailler zoning et wireframe directement dans le navigateur, en se passant de Photoshop ;
  • réaliser un prototype haute fidélité, avec rendu graphique ;
  • etc.

Source et références : Romy Duhem-Verdière