dans Web Design

WireFrame à toutes les sauces…

Vous connaissez sans doute tous les wireframes, il s’agit du design d’une page web de manière schématique, on y place uniquement les principaux blocs d’informations et éléments d’interactions. Les wireframes permettent de structurer une page web avant même d’avoir attaqué le design. Pour vous faire une idée, voici à quoi cela peut ressembler . En général les wireframes sont utilisés au sein de l’équipe projet pour identifier les interactions entre les pages, la disposition des éléments etc. Les wireframes sont très pratique lorsque l’on passe à la conception du site.
Pour ma part je m’en sers à toutes les sauces, je m’explique :  La semaine passée j’ai eu un rendez-vous avec un client qui souhaite développer son activité sur Internet

. Le projet avait déjà été vaguement évoqué avec un commercial. En gros, le client ne savait pas trop ce qu’il voulait, il a un petit budget, de faibles connaissances de l’Internet souhaite se lancer dans le e-commerce. Le client a tout de même quelques spécificités propres à son métier (identifié par le commecial).
La demande était tout de même assez vague, mais il y a tout de même moyen de broder quelque chose ! Afin de ne pas me pointer les mains vides et d’argumenter ma proposition je lui ai présenté son « futur site » sous forme de wireframe. Je lui avais préparé quelques exemples de structures de site répondant à ses besoins et lui ai montré les différentes interactions possible avec les pages. Nous avons ainsi très rapidement réussi à nous entendre sur la tournure du projet.

Je lui ai naturellement expliqué que le design se fera dans une étape secondaire…
Résultat : le client à tout de suite mordu 🙂

Bien sur j’aurai tout autant pu lui présenter quelques sites de concurrents (en masquant adresses et logos), mais en lui présentant la structure de son futur site j’ai réussi à l’impliquer sans risquer qu’il souhaite que je re-pompe le design d’un concurrent. De plus le client ne possède aucune charte graphique (même pas de logo).

De cette manière j’ai fait d’une pierre deux coups, présentation de mes idées au client et préparation du travail pour le développement du site…

J’avais procédé quasiment de la même manière il y a de cela quelques mois pour un autre client. Cette fois-ci c’était pour lui présenter les différentes interactions entre le site et les utilisateurs en terme de Marketing.

Ce genre d’utilisation des wireframes reste sporadique, mais toutefois utile 🙂

Pour plus d’information sur les Wireframes et sur les méthodes de conception je vous conseille la série d’article d’Eric (Superfiction) sur les Wireframes.

  1. Entièrement d’accord avec toi. Mes clients sont très au point sur les objectifs commerciaux mais ont du mal à les traduire en termes de design et de structure. L’utilisation d’un wireframe ou d’un storyboard de site est très utile à cette étape.
    D’une part, le client a un support pour approfondir sa réflexion et la concrétiser. D’une autre part, nous pouvons dimensionner rapidement le projet en décelant très en amont les fonctions clefs et les besoins implicites en terme de développement.
    Ce support visuel permet d’écarter le risque d’incompréhension et facilite également les allers-retours entre le client et son équipe interne.
    C’est long à faire mais c’est un vrai plus.

  2. un wireframe c’est juste un mot compliqué et qui fait genre pour dire « croquis ».

    • Je n’ai pas précisé dans mon article que les wireframes (celles que je propose en tout cas) sont des interfaces cliquables, donc un peu plus qu’un croquis.

  3. Merci leGizz pour ton article très passionnant. Je pensais que tu devais aller plus loin. Tu me laisses avec de l’eau dans la bouche 🙂
    Peux tu m’indiquer un logiciel free avec quoi je peux faire des wireframes? j’ai un projet de fin de cycle à faire.

  4. Sorry j’ai pas eu le temps de voir le lien ci dessus. Ok c’est résolu

Commentaires clos.