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.

Invité
Gronk
12 avril 2011

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

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

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

Invité
12 avril 2011

Bonjour,

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

Invité
12 avril 2011

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.

Membre
12 avril 2011

Merci de nous avoir fait découvrir cet outil !

Invité
12 avril 2011

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

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

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

Invité
12 avril 2011

@nico: mockingbird était gratuit jusqu’à peu de temps, mais franchement pour bosser avec depuis deux ans, ça vaut largement l’investissement. J’ai testé d’autres outils gratuits mais je ne les ai pas trouvé si pratique. Question d’habitude peut être ^^
sinon vous avez Cacoo ( http://cacoo.com/pricing) qui met à dispo une version gratuite limité en terme de nombre de fichiers et de formats d’export mais c’est mieux que rien.

@stephane: jamais utilisé creatly, je vais tester ça. merci du tuyau

 
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