Mockingbird, le wireframing simplement

Le wireframing est une Ă©tape incontournable dans un projet web. Il consiste Ă  schĂ©matiser votre site internet avant de partir pour l’Ă©tape design. Il vous permet de fixer les emplacements de vos Ă©lĂ©ments, de tester votre ergonomie et d’avoir une idĂ©e un peu plus prĂ©cise de ce que sera votre site. Pour les chefs de projet, le wireframing permet de prĂ©senter au client une matrice du site afin de fixer avec lui la navigation.

Le wireframing est une Ă©tape incontournable dans un projet web. Il consiste Ă  schĂ©matiser votre site internet avant de partir pour l’Ă©tape design. Il vous permet de fixer les emplacements de vos Ă©lĂ©ments, de tester votre ergonomie et d’avoir une idĂ©e un peu plus prĂ©cise de ce que sera votre site. Pour les chefs de projet, le wireframing permet de prĂ©senter au client une matrice du site afin de fixer avec lui la navigation.

Pour crĂ©er le schĂ©ma ergonomique (aussi appelĂ© zoning) de votre site, plusieurs outils sont Ă  votre disposition. Plus besoin de passer par un power point approximatif ou de se casser la tĂȘte avec une prĂ©-maquette non aboutie sur photoshop. J’ai choisi de vous parler de Mockingbird que j’utilise depuis plusieurs annĂ©es. J’ai portĂ© mon choix sur lui aprĂšs avoir essayĂ© plusieurs autres outils comme Cacoo ou Balsamiq Mockups.

MĂȘme si l’interface est clairement moche (certains diront Ă©purĂ©e), les fonctionnalitĂ©s offertes par Mockingbird en font Ă  mon sens l’outil de wireframing le plus simple et le intuitif niveau utilisation.

Sur la gauche une boĂźte Ă  outils comprennant Ă  la fois des Ă©lĂ©ments types: zones de textes (avec lorem ipsum prĂ©configurĂ©), des menus, des listes, des Ă©lĂ©ments graphiques comme les images, des outils mĂ©dias comme de la vidĂ©o ou du podcast mais aussi des icĂŽnes rĂ©seaux sociaux. A l’utilisation, je n’ai jamais eu l’occasion de noter un manquement dans ce que propose la boĂźte Ă  outils de Mockingbird.

Sur les 3/4 de l’Ă©cran, votre site. Vous pouvez crĂ©er plusieurs slides correspondants aux diffĂ©rentes pages de votre site. Par un simple glisser/ dĂ©poser de la boĂźte Ă  outils vers la slide vous positionnez vos Ă©lĂ©ments. Petite chose intĂ©ressante, une des fonctionnalitĂ©s de base de Mockingbird inclue l’alignement des Ă©lĂ©ments les uns par rapport aux autres.

Les zonings crĂ©es sont exportables au format PNG ou PDF. Niveau tarifs, Mockingbird est devenu payant depuis peu mais les tarifs sont abordables et vous ne payez que quand vous avez besoin de l’outil.

Trier par :   Plus rĂ©cents | Plus anciens | Les plus votĂ©s
Invité
Gronk
12 avril 2011 9:07

Bonjour,
Sinon, bien utilisĂ©, ya un outil Microsoft qui ne fait pas que ça, mais qui est super efficace, quand mĂȘme.
Ça s’appelle Visio.
C’est pas gratuit, certes, mais ça fait tellement de choses dans une interface un peu moins Ă©purĂ©e…

Hop.

Invité
nico
12 avril 2011 9:15

Hello,

Merci bon article ! Je suppose que vous n’avez pas trouvĂ© ce type d’outil en version gratuite !? Dommage !

Invité
tontonjulien
12 avril 2011 9:19

Il manquerait la rotation des Ă©lĂ©ments, mais sinon c’est un super outil que j’utilise trĂšs souvent.

Invité
12 avril 2011 9:33

Bonjour,

Il existe le site http://lumzy.com qui est pas mal et surtout gratuit… :-)

Invité
12 avril 2011 10:01

Bonjour, je voudrais juste ajouter Ă  votre article une rĂ©fĂ©rence Ă  un bon produit, certes Ă  installer, mais qui offre beaucoup plus de possibilitĂ© (export, prĂ©sentation, plugin…)
http://pencil.evolus.vn/en-US/Home.aspx

Nous avons fait un test au sein de notre entreprise pour trouver l’outil idĂ©al (nous en avons testĂ© 4 qui nous semblaient pertinents dont Mocking), pas forcĂ©ment gratuit, mais qui rĂ©pond Ă  notre besoin de maquette fonctionnel et de dĂ©mo.

Merci pour le travail des Ă©quipes Presse Citron.
Un fidĂšle lecteur.

Invité
12 avril 2011 10:07

Merci de nous avoir fait découvrir cet outil !

Invité
12 avril 2011 10:15

Pidoco est egalement un tres bon outil.
Export en rtf, html, layer, usability tests ( bien d autres encore ) sont des possibilites interessantes de l outil.

Une version gratuite de 30 jours est egalement disponible.

Invité
12 avril 2011 10:31

Merci pour l’info. J’ai dĂ©jĂ  testĂ© Balsamiq, Mockflow et Pencil. J’ai une petite prĂ©fĂ©rence pour ce dernier. Simple d’usage et gratuit.

Invité
12 avril 2011 10:36

J’utilise de mon cĂŽtĂ© creatly.com qui est aussi sympa pour le wireframing en situation professionnelle.

wpDiscuz
Lire les articles précédents :
DĂ©buter une campagne d’Email marketing

Ce module d'initiation au eMailing peut-ĂȘtre complĂ©tĂ© par une journĂ©e de perfectionnement le 12/05/2011. PrĂ©cisez votre inscription au module perfectionnement...

Fermer