Wireframe : faire un croquis avant de se lancer dans le design

18.08.2009
|
0 Commentaires
||

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 » 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 » http://legizz.com/wireframe-a-toutes-les-sauces.html , le Wireframe permet également de discuter aisément avec un client. On peut ainsi rapidement et facilement présenter quelque chose, sans 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

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…

Voici deux sites qui en contiennent une liste :

Personnellement, j’utilise Balsamiq 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 :

Mockup

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 :

.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *