Qu’est ce qu’un wireframe? Et à quoi cela sert-il?

Une récente expérience m’a fait réaliser à quel point il est important pour le client de comprendre ce qu’est un wireframe.

Prenons l’exemple d’une maison. Vous voulez la construire, il vous faut donc un terrain, un architecte, un entrepreneur… Ces corps de métiers vous semblent nécessaires et vous avez raison! Et bien un site Web a lui aussi besoin d’acteurs que nous appelons respectivement l’hébergement, la conception et la production.

Avoir besoin d’une présence sur le Web est une chose, apporter un contenu nécessaire et utile à sa cible en est une autre. C’est en cela qu’un concepteur exprime son savoir faire. Il va étudier vos besoins, ceux de votre cible, le marché sur lequel vous souhaitez vous positionner, vos concurrents présent et futur mais aussi votre activité. De son travail sortira des prémisses d’interfaces et c’est à ce moment là que nous entrons dans les wireframes.

Voici un exemple de wireframe réalisé pour l’article.

Les wireframes permettent d’effectuer des modifications relativement rapide afin de visualiser une interface dans son ensemble. Étant donné que le concepteur ne perd pas son temps sur des logiciels graphiques il peut se concentrer sur le concept de votre projet et donc sur le message que vous avez besoin de véhiculer. Cet outil lui permet par exemple de bouger les éléments d’une page afin de la soumettre à des tests utilisateurs qui détermineront les combinaisons les plus efficaces.

Les wireframes sont donc des outils de travail qui servent de guides visuels entre le concepteur et le clients mais aussi entre le concepteur et le graphiste.

D’ailleurs, ils font l’objet d’une validation généralement signée par le client car ils déterminent quasiment à eux seuls, le seul support visuel d’une interface avant les premières propositions du graphiste. Il est donc indispensable que toute l’équipe d’un projet (client + agence) soit d’accord sur ces documents sous peine de perdre énormément de temps par la suite. Personne n’aime les retards ou les budgets à rallonge…

Laisser un commentaire

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

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">