De l'intérêt des wireframes : définitions, synonymes.... et drupal !

Vendredi 14 Janvier 2011

C'est quand même une habitude, pour nous « agences », d'utiliser un jargon incompréhensible pour toute personne non familière des relations agences / clients. Sans s'en rendre compte, nous utilisons des termes et expressions qui n'existent que dans la profession.

Certaines agences utilisent même l'autodérision à ce propos comme message de communication. Personnellement, c'est le degré d'ouverture des yeux ou de la bouche de mon interlocuteur qui me ramène à la réalité...

Le dernier en date : un wireframe. Un quoi ? Un wireframe ou encore maquette fil de fer, maquette ergonomique, zoning (ou presque, le zoning est un peu moins précis), etc.

Alors, de là, l'envie d'expliquer cette étape indispensable d'un projet web est venue... la découverte d'un module Drupal n'y est peut-être aussi pas complètement étrangère !

Alors qu'est ce qu'un wireframe ?

C'est une maquette, ou plutôt un ensemble de maquettes représentant le contenu des pages d'un site internet et les interactions entre ces pages. La création d'un wireframe permet de valider notamment la bonne compréhension des souhaits et besoin des clients avant de faire intervenir le graphiste et les développeurs. Le wireframe est en général réalisé par le chef de projet ou, mieux, un ergonome.
Il existe de nombreux logiciels facilitant la création de ces maquettes. Un bon logiciel de wireframe permet de :

  • Faire des liens et interactions entre les maquettes
  • Exporter dans un format transmissible au client : le .html est bien mais pas obligatoire, un bon .pdf peut aussi tout à fait convenir.

À l'agence nous utilisons par exemple Balsamic Mockup

 

exemple wireframe balsamic mockup

Quelques avantages de ce logiciel à noter

  • Simple à la prise en main
  • Assez convivial et apprécié pour son rendu « fait main »
  • Compatible tout système d'exploitation
  • Plusieurs formats d'export possible (.png, .pdf)

L'intérêt d'un wireframe dans le processus de création d'un site web

  • Validation des principes de navigation et des choix fonctionnels avec le client.
  • Simplification du travail de design : le graphiste peut ainsi se concentrer uniquement sur l'habillage graphique et la définition de l'ensemble des styles du site.
  • Aide à l'envoi en production : Si le client peut visualiser son site avant son développement, il en est de même pour le développeur qui visualise ainsi le projet dans sa globalité. Des maquettes ergonomiques, un document de production et hop ! Le tour est joué.
  • Le projet peut ainsi avancer étape par étape, en totale collaboration avec le client.

Un module Drupal pour les wireframes ?

Il y a quelques semaines, bien avant la sortie de Drupal 7, quand le sujet d'article des wireframes a commencé à m'effleurer l'esprit, j'étais tombé sur ça : module Drupal wireframe_me

Le test effectif de ce module fera l'objet d'un prochain article dans les semaines à venir. En attendant on se contentera des promesses faites sur la page du module.
http://drupal.org/project/wireframe_me

Et vous ? Avez-vous eu l'occasion de tester ce module ? Quelles sont vos conclusions ?