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.

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. J’utilise de mon cĂŽtĂ© creatly.com qui est aussi sympa pour le wireframing en situation professionnelle.

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

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

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

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

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