Le concept

Le Wireframe en Web design consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web. Il peut être réalisé par une personne non technique (client, graphiste, ...).
Souvent en noir et blanc, seuls la dimension, l'emplacement et la nature des différentes zones importe. Ce n'est pas le design lui-même ! Le wireframe n'apporte pas de notions de couleurs, d'harmonie, ni de détail des éléments. Si couleurs et images il y a, elles ne doivent être utiliser que pour améliorer la lisibilité et la compréhension du schéma, et ne correspondent pas aux couleurs du site définitif.
A la base, la technique du Wireframe consiste à griffonner ses idées au crayon de papier, sur une feuille.
Depuis, des logiciels existent (voir la suite), et permettent de réaliser aisément ces schémas, et la plupart permettent également de définir les enchainements entre les pages.

Les cas d'utilisation

Equipe projet

Dans le cas d'un projet, commencer un site par un Wireframe permet de définir l'aspect global du site, des pages, de voir comment on peu positionner les différents éléments nécessaires. Si on est plusieurs, cela aide à exprimer ces idées pour pouvoir en discuter. Seul, c'est utile aussi pour mettre à plat ses idées, avant de se lancer tête baissée dans le design proprement dit, et se rendre compte qu'il manque tel ou tel élément et qu'il faut revoir l'agencement de la page. Manipuler un Wireframe est bien plus aisé que de manipuler les bloc HTML <div> ou le CSS ! Commencer par le Wireframe engendre un réel gain de temps pour le développement du design.

Client

Comme le remarque LeGizz dans son article WireFrame à toutes les sauces, le Wireframe permet également de discuter aisément avec un client. On peut ainsi rapidement et facilement présenter quelque chose, ssans avoir à réaliser une nouvelle maquette à chaque petit changement. Le client peut ainsi discuter de l'aspect global. Il ne risque pas de s'attacher aux détails comme il pourrait le faire sur une maquette classique. Il ne risque pas non plus de vouloir copier un concurrent comme il pourrait le faire si on lui présente un site existant (même flouté).

Les outils

Roots

Les plus simples des outils pour réaliser un Wireframe sont une feuille, une gomme, et un crayon de papier. Sans blague !
Pour perfectionner, vous pouvez ajouter plusieurs feuilles, et des ciseaux. Vous pouvez ainsi positionner les éléments (des rectangles de papier) sur votre page Web virtuelle (une feuille).

Il existe cependant une multitude d'outils informatiques, plus ou moins perfectionnés, permettant le travail collaboratif ou non, en-ligne ou hors-ligne...

Informatique

Voici deux sites qui en contiennent une liste :

Personnellement, j'utilise Balsamiq Mockups (http://www.balsamiq.com/products/mockups). Cette application développée en Adobe Air (et donc compatible avec toutes les plateformes classiques telles Linux, Windows et Mac), permet de réaliser très simplement ces Wireframes, grâce à une bibliothèque d'objet restreinte, mais suffisante pour ce genre de schémas.
Voici un exemple réalisé avec ce logiciel, pour un projet en cours (dont je ne manquerai pas de vous parler), qui illustrera en même temps ce que peut être un Wireframe :
Wireframe - Balsamiq Mockups

(Cliquez pour agrandir)

Cet outil est cependant payant (79$, tout de même). Mais vous pouvez le tester gratuitement. L'enregistrement est alors désactivé. Mais vous avez accès à l'export et à l'import de vos Wireframes. Du coup, vous pouvez le tester réellement sur un projet, avant de vous décider à payer la version complète. Amis blogueurs, sachez que vous pouvez avoir une version gratuite ! Plus d'info sur la page de téléchargement du produit.

Pour poursuivre

A noter que rien n'empêche d'utiliser cette technique pour développer des interfaces autres que Web. Balsamiq Mockups intègre d'ailleurs des éléments pour iPhone, et tous les éléments permettant de dessiner une interface Desktop sont présents.

A lire :