Le vocabulaire anglophone de la conception web peut être compliqué à appréhender pour les non-initiés. Mockup et Zoning peuvent par exemple avoir une signification différente selon les personnes, il est parfois même utilisé comme un synonyme de Wireframe.
Essayons de définir clairement ces termes barbares au premier abord en commençant par le sketch.
On parle de sketch pour désigner un croquis sur papier réalisé à l’aide de simples crayons. Beaucoup de designer ne quittent jamais l’écran à tort, un croquis permet d’organiser sa pensée de façon différente et de mieux réfléchir.
Featured articles
Sketch et InVision, deux applications de maquettage en ligne
Pour information, Sketch est aussi un excellent outil de prototypage ou de maquettage tout comme l’application Invision. Voir cet article : InVision, outil maquettage en ligne, de la maquette à l’intégration
Conception ergonomique
Le zoning est un schéma en noir et blanc permettant d’identifier les différentes zones et de lister les contenus. L’objectif est de ne rien oublier en hiérarchisant l’information de la page et la proportion des blocs notamment.
Le wireframe (ou maquettage filaire) est la suite logique du zoning, entrant dans le détail de chaque bloc en y plaçant du contenu. C’est un dessin informatif pouvant servir de base aux spécifications.
Arrive enfin le prototype encore plus proche de la version finale. Consultable depuis un navigateur, il propose des pages fonctionnelles avec interactions et liens. Il permet de réaliser des tests d’utilisabilité.
Voici comment pourraient s’enchainer les livrables.
Ces objets mettant davantage l’accent sur le fond que sur la forme, ils sont conçus en noir et blanc.
Habillage graphique
Le moodboard une planche d’inspiration créative où les idées sont épinglées à mesure qu’elles arrivent.
Prémisse de la charte graphique, le style tiles regroupe quelques planches de couleurs et typo afin de suivre une première piste entre différents styles.
Le mockup (ou maquette graphique) est la prévisualisation de ce que sera le futur site. C’est un rendu de haute précision, l’une des dernières étapes du projet de conception.
Moodboard et style tiles sont en pratique trop peu utilisés, une grande partie de la conception graphique repose aujourd’hui sur le mockup.
Le workflow de conception parfait
Dans l’idéal, le zoning et le moodboard sont réalisés en parallèle pour dégrossir le travail. Une première validation par le commanditaire peut ensuite avoir lieu sur wireframe et / ou style tiles. Les tests pré-production terminent le processus de conception.
Procéder de la sorte permet d’impliquer le commanditaire en amont en lui offrant un aperçu du projet à chaque étape, changer l’orientation du projet est alors possible avant la production. Cette progression en parallèle séparant ergonomie et fonctionnalités offre également l’avantage d’accélérer les phases suivantes.
Ce workflow idéal n’est pas à suivre à la lettre mais doit être adapté aux projets et équipes de travail. Il constitue en quelque sorte le fil rouge de la conception du site.
Vous souhaitez aller plus loin? Nous vous recommandons la lecture de cet article sur le maquettage d’interface de l’agence UX Usabilis. Il vous offrira les informations complémentaires dont vous pourriez avez besoin pour mieux comprendre le maquettage.
Join the discussion