Le wireframing

Le Wireframing (ou maquette fil de fer) consiste à réaliser une maquette de la structure visuelle du projet. C'est une étape importante qui vous permettra de mieux communiquer avec les différents intervenants du projet. En tant que Freelance j'ai souvent été confronté à un problème très frustrant (pour moi, mais aussi pour le client), le manque de compréhension.

D'un côté il y a le client, qui a une idée très précise de son projet web et qui n'a pas les compétences techniques pour le réaliser. Du coup il cherche des freelances pour travailler sur son projet en essayant d'expliquer à travers un mail (ou par téléphone) la structure de son application ("Il y a un menu en haut, une page news, une page évènements, une page contact...).

Côté freelance on travaille souvent sur plusieurs projets en même temps et on gère souvent plusieurs clients en même temps. Du coup il est très difficile de traduire la description du projet en quelque chose de fonctionnel, surtout qu'à force de passer d'un projet à un autre on oublie certains éléments.

Dessine moi un site

La création de Mock-up permet justement d'améliorer la communication Client/Prestataire en créant une maquette qui permet de support pour définir les pages et fonctionnalités du projet. C'est un schéma très simplifié, à l'échelle 1:1, qui permet de montrer l'emplacement des différents blocs d'information et la relation entre les différentes pages.

Une image vaut 1000 mots

Les schémas sont très simples et peuvent être réalisés par n'importe qui (sans connaissances particulières). Ils permettent de guider le graphiste, mais aussi au développeur de comprendre la structure de votre application et simplifie la modélisation de la base de données. 

Comme on le dit, "une image vaut 1000 mots", il est nettement plus simple de comprendre un schéma qu'un fichier texte de plusieurs pages. Du coup il peut servir de support pendant la conversation et peut facilement être annoté.

Qui doit faire le Mock-up ?

Selon moi le premier Mock-up doit être fait par le client, c'est lui qui est à l'origine du projet et qui a une vision assez claire du projet. C'est évidemment un avis personnel, mais je rencontre souvent des clients qui ont une idée relativement précise de ce qu'ils veulent niveau structurel. Il permet aussi de simplifier le dialogue et d'avoir un devis plus précis pour leur projet (dur d'évaluer un projet avec des descriptions du genre "une page news"). Le Mock-up doit évidemment évoluer avec le projet, ce n'est pas un document figé. 

Pour des projets un peu plus volumineux, ou si le client n'arrive pas avec une idée précise de son application, le Mock-up sera réalisé par un Ergonome et/ou  un Graphiste, ceci afin de placer les éléments de façon plus "intelligente" pour améliorer le taux de conversion du site.

Comment faire un Mock-up ?

Maintenant que je vous ai bien vendu le truc, vous vous demandez sûrement comment créer ces fameux "mock-up". La première méthode consiste à prendre un crayon et une feuille et de dessiner la structure de vos pages (comme vimeo par exemple) mais rassurez vous il existe des logiciels qui vous permettront de faire (et de collaborer sur) des mock-ups en un clin d'oeil.  Il existe déjà des sites vous proposant "Les XX meilleurs services pour faire de mockup" donc je ne m'étalerais pas sur le sujet : 

• Cacoo, prévu initialement pour faire des UML, mindmap, Cacoo peut aussi servir à faire du Wireframing (Gratuit)
• Balsamiq, une application AIR spécifiquement dédiée à la réalisation de mockup (79 $, 7 jours de démo).
• Mockflow, une application en ligne qui permet en plus la collaboration, disponible en version gratuite (4 pages max) et en version payante (80$/ans)

Le mot de la fin

Vous l'aurez compris les mockups sont un outils indispensable pour mieux communiquer, donc la prochaine fois que vous chercherez un développeur ou un graphiste, envoyez lui un mockup plutôt que 10 page d'explications, il vous remerciera !