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.
mockingbird Mockingbird, le wireframing simplement

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.

22 commentaires

  1. 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.

  2. Hello,

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

  3. tontonjulien on

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

  4. 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.

  5. 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.

  6. 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.

  7. @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

  8. C’est quand même beaucoup trop approximatif dans un cadre professionnel. Omnigraffle sur Mac et Axure sur PC restent les deux outils de références pour le wireframing.

  9. Effectivement Axure est de loin l’outil le plus complet et puissant et il permet d’exporter le wireframe en HTML et d’ainsi simuler réellement la future navigation du site

  10. c’est sur que c’est mieux que powerpoint. Après l’utilité est surtout pour les moyennes et grandes entreprises pour faire la présentation de projet, pour les petite entreprise la version à la main sur feuille avec les explication à son collègue, échange de point de vue, ca reste quand même assez classique.

  11. Pingback: Thought this was cool: Mockingbird, le wireframing simplement | al1h.net

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