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.

Mock-up du site mattrunks.com

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 !


29 Commentaires

Dd8183de1b1bf44cbc334aa0d101fd74?s=200&r=pg&d=mm
Tr4him, 30-12-2013 20:56:49 - Répondre

Merci Grafikart :)

25a7ef5021afa857349d16f1146dc08b?s=200&r=pg&d=mm
heaven-khn, 24-09-2013 03:30:22 - Répondre

il reste tjrs un bon outil

3f3a58195197a35c6c6070dbc867b852?s=200&r=pg&d=mm
wYm, 24-09-2013 03:29:28 - Répondre

Un bon on outil pour schématiser les interfaces

Eca98dfc61c4bf0283f6cc4291241528?s=200&r=pg&d=mm
Earhater, 10-07-2013 23:53:20 - Répondre

je recommande ce site pour les wireframe : https://wireframe.cc/

1a45e1dbd183e51175bb360184bc496c?s=200&r=pg&d=mm
Nic1101, 10-11-2012 20:48:22 - Répondre

Et moi qui me suis acheté un tableau blanc il y a moins d'un mois.... :D

1fe8ce96463246dc9fe70271c7f1d786?s=200&r=pg&d=mm
Jimmy, 02-07-2013 16:50:43 - Répondre

L'avantage du tableau blanc c'est que si tu travailles en équipe ça va deux fois plus vite pour expliquer ton point de vue et apporter des modifications à tes mockups. Alors que sur une appli c'est toujours plus difficile de faire exactement ce à quoi tu penses, dans les moindres détails.

(Et ça a de la gueule ^^)

9794
graphiweb, 28-10-2012 19:22:59 - Répondre

Bonsoir je viens de voir ton article très intéressant, j’ai trouvé sur Wikipédia un utilitaire disponible sur Windows en tant que logiciel et sous forme de plugin pour Fire Fox, mais il me semble que l’extension ne fonctionne pas sur Fire fox 15.
Moi perso j’ai pris le logiciel pour Windows.
Lien : http://pencil.evolus.vn/

Graphiweb

7ecce4523d3920faa9d3a49f597d04a6?s=200&r=pg&d=mm
abdelhakim mouttaqui, 11-02-2013 19:24:24 - Répondre

Bonsoir,
effectivement c'est une excellent outil, en plus c'est gratuit :)

0d4ed6f2cd43db9a2421c37ffb72f832?s=200&r=pg&d=mm
Folki, 27-10-2012 08:21:50 - Répondre

Super ! et dire que je dessinais tout à main nue, ou encore j'utilisais carrément photoshop pour réaliser un simple croquis.
Dès à présent j'adopterais une des applications dédiée à la création du mock-up.

Merci pour l'article ^^

9401
hachbe, 21-10-2012 23:40:09 - Répondre

J'utilise depuis plus de 4 ans l'analyse de structure (au début à la main/croquis et depuis 3 ans via Balsamiq Mockups) et j'ai remarqué que ça parle énormément aux clients.
Depuis que j'ai remarqué les avantages que ça apporte, c'est une étape qui est d'office prévue dans tout mes projets.

hachbé

7508e0d32d3964ffbb8e14482ca62b0d?s=200&r=pg&d=mm
shadoo, 19-10-2012 01:29:18 - Répondre

J'utilise Balsamiq maintenant de puis longtemps, cela doit faire plus de 3 ou 4 ans et les clients en sont très content, il semblerait que sur l'ensemble des nos clients, la plus part sont plus touché par un rendu style dessin qu'un rendu plus réel de site web. Donc à conseiller pour ceux qui recherche à faire du zoning pendant l'élaboration de vos projets

7fa243abf2448ebe47c6075db8ede757?s=200&r=pg&d=mm
Gavroche, 18-10-2012 02:23:48 - Répondre

J'ai récemment fait la découverte de moqups.com, outils de base, gratuit et fort sympathique. Il suffit de s'y inscrire pour mémoriser une maquette et l'exporter. Aucun spam après inscription et une appli web assez bien foutue...

3c39fd552d5c3d8fb89a74d15bfcaa73?s=200&r=pg&d=mm
Neogeek, 17-10-2012 18:20:17 - Répondre

Attention !! Balsamiq a une version demo en ligne gratuite et très complète.

Sinon je recommande aussi ce genre d'outil qui ne peut être qu'un plus pour vos projets.

D07993c4986171badae243f61de4bc1b?s=200&r=pg&d=mm
Hugo38, 17-10-2012 09:54:05 - Répondre

Encore un très bon article, je vais me pencher la dessus du coup pour mes futurs clients.

6da434ddebf13cf9cc7c8850d5d7d4e8?s=200&r=pg&d=mm
talandria, 16-10-2012 23:21:32 - Répondre

Pour ma part , je l'utilise quand le site deviens un peu complexe à décrire avec des mots .
J'utilise Iplotz ou http://iplotz.com/, qui permet une utilisation en ligne ou à installer sur pc ou mac.
Gratuit ou payant , mais la version gratuite me suffit .on peut générer une version basique en html du site pour voir certaines fonctionnalités du menu par exemple.

52871196394a2c1997509b065af220e9?s=200&r=pg&d=mm
zenkiai, 16-10-2012 12:42:58 - Répondre

Merci, je ne connaissais pas cette méthode.

1629397dc80b299f8b02972ee333ee62?s=200&r=pg&d=mm
seb7, 16-10-2012 11:22:05 - Répondre

Peut-être que complètement abandonner le cahier des charge est une erreur mais un bon mock up peut (très?) largement l'alléger
... A tester ...

48c4b3ed7f45cb9da401518fbd77a2f2?s=200&r=pg&d=mm
Dexyne, 16-10-2012 02:20:49 - Répondre

Je rajouterais http://pencil.evolus.vn/ comme logiciel à installer permettant aussi de faire des mock-up :).

10625
TonyLight, 16-10-2012 16:23:43 - Répondre

Merci beaucoup pour ce lien, ce logiciel est pas mal, j'aime beaucoup les éléments qu'il y a d'origine !

3a1daa76b7ad8e4df303b7de61282a93?s=200&r=pg&d=mm
mtphotographie, 15-10-2012 22:02:03 - Répondre

Bravo et Merci pour l'article !
Enfin un article simple, bien écrit et facile à comprendre pour que nos clients ne soient plus "étonnés" et "surpris" au détour d'un devis et d'un cahier des charges !
Vos développeurs vous remercierons un jour de leur avoir préparé un mockup ... vécu ....

Avec le temps et en "éduquant" les clients, le wireframing ne bientôt plus un mot à proscrire de notre langage.

Merci ;-)

Matthieu T.

4ff53c483e2236995b93f7c36300a302?s=200&r=pg&d=mm
musicalitymaker, 15-10-2012 20:29:10 - Répondre

Pour mon prochain projet je vais utiliser cette technique dans un projet de création web

C3f225b0748419825eb522d602ccdde2?s=200&r=pg&d=mm
spyesx, 15-10-2012 19:23:55 - Répondre

Je ne suis pas vraiment certain qu'un client doive faire les wireframes. Si c'est un client c'est justement parce qu'il fait appel à un professionnel capable d'apporter des compétences qu'il n'a pas. En l’occurrence un wireframe doit être fait à minima par un ergonome mais c'est avant tout le job d'un UI/UX designer. Un client n'a pas de notion d'ergonomie, d'expérience utilisateur, d'architecture, de stratégie de contenu... Il ne connait pas les technos et de ce fait il n'est pas en mesure d'apprécier la faisabilité des fonctionnalités liées au concept du site. Le chef de projet et le graphiste non plus au passage ;)

A7976896cc3641dee8e199bdfaf62791?s=200&r=pg&d=mm
albanvan, 15-10-2012 20:37:40 - Répondre

Dans l'article de grafikart, il ne donne que son propre avis, donc il n'en est pas plus certain que toi ;)

1
Grafikart, 16-10-2012 02:50:15 - Répondre

Oui comme précisé c'est par rapport à mon expérience, souvent mes clients sont des agences où des gens qui sont un peu dans le technique donc qui ont une idée déjà faite de l'interface et des parcours utilisateurs.
Pour ça que je précise aussi que dans certains cas (client non technique) c'est à l'ergonome de créer le Mockup pour que le graphiste puisse se baser dessus.

5bc886d9a08ceb98ddcd710149c53822?s=200&r=pg&d=mm
mezigh, 15-10-2012 18:07:16 - Répondre

salut
super article as usual
le lien cacoo( https://cacoo.com/lang/fr ) ne fonctionne pas - par contre https://cacoo.com/lang/fr/ celui ci fonctionne ??!
A+
Oliv

3adac084027c0ec8d14ae11e590dba76?s=200&r=pg&d=mm
neocorp, 15-10-2012 15:23:17 - Répondre

http://www.netmagazine.com/features/wireframe-tools-top-10-solutions
- Omnigraffle 100$
- Axure RP 589$
- Mockingbird Gratuit
- Jumpchart Gratuit
- ProtoShare 29$/mois
- Lumzy Gratuit
- FlairBuilder
etc...

209980cf26cd05595c957b886839a0f0?s=200&r=pg&d=mm
ClementLanot, 15-10-2012 15:07:42 - Répondre

Super article , comme toujours :)

6be1664035b489d8933233c8cffb7d61?s=200&r=pg&d=mm
dragonhib, 15-10-2012 14:56:59 - Répondre

Super article !! Précis et utile, comme d'hab.

Coté logiciel, j'ai une préférence pour Balsamiq, qui permet rapidement de faire des mockups façon croquis. Mockflow est à mon gôut trop poussé (bien que les fonctionnalités permettant de reprendre des layouts ou autres templates communs du web sont sympas) et du coup trop proche d'une maquette.

F44a75e56c919df07513d32fe2a97a82?s=200&r=pg&d=mm
mykees, 15-10-2012 13:32:16 - Répondre

Très bon article !
Il y aussi https://moqups.com/ qui possède des fonctionnalités assez sympa.