Connect with us
Red top

Lifestyle

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.

Il y a

le

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

22 Commentaires

  1. Gronk

    12 avril 2011 at 9 h 07 min

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

    12 avril 2011 at 9 h 15 min

    Hello,

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

  3. tontonjulien

    12 avril 2011 at 9 h 19 min

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

  4. Wobility

    12 avril 2011 at 9 h 33 min

    Bonjour,

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

  5. Aloic

    12 avril 2011 at 10 h 01 min

    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.

  6. Carole Girard

    12 avril 2011 at 10 h 07 min

    Merci de nous avoir fait découvrir cet outil !

  7. charles

    12 avril 2011 at 10 h 15 min

    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.

  8. Bertrand

    12 avril 2011 at 10 h 31 min

    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.

  9. Stephane

    12 avril 2011 at 10 h 36 min

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

  10. pauline

    12 avril 2011 at 11 h 17 min

    @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

  11. Raphael

    12 avril 2011 at 12 h 51 min

    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.

  12. Benoist

    12 avril 2011 at 15 h 18 min

    Merci je ne connaissais pas du tout ce logiciel. A tester

  13. Guillaume

    12 avril 2011 at 16 h 48 min

    On trouvera des tas d’alternatives et de comparaison et de retours d’expérience sur le blog suivant, animé par un Dir. Créa d’une grande agence:
    http://www.superfiction.net

    On jettera aussi un petit coup d’oeil à l’ami Fred Cavazza:
    http://www.simpleweb.fr/2011/01/17/wireframes-4-styles-pour-4-types-doutils

  14. Mathieu Puech

    13 avril 2011 at 1 h 55 min

    OmniGraffle sur Mac est excellent avec le template de Konigi.

    Wireframe : http://konigi.com/tools/omnigraffle-wireframe-stencils
    UX Design : http://konigi.com/tools/omnigraffle-ux-template

    C’est un outil payant mais il n’est pas très cher et permet de faire aussi des diagrammes très simplement. Il est vraiment mieux que Visio (en fait Visio n’existe pas sur Mac).

  15. Sam

    13 avril 2011 at 9 h 22 min

    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

  16. Olivier

    13 avril 2011 at 22 h 07 min

    J’utilise et recommande JustInMind

  17. Identitools

    14 avril 2011 at 14 h 03 min

    Pencil, pour moi c’est le must.
    (après les gouts et les couleurs..)

  18. Raphael

    14 avril 2011 at 14 h 56 min

    merci Olivier. C’est une sorte d’Axure bien ficelé

  19. lore

    16 avril 2011 at 21 h 07 min

    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.

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

  21. Arnaud

    1 juin 2011 at 9 h 21 min

    Moi je vote pour Axure RP. Un logiciel vraiment Pro !
    http://www.wixiweb.fr/articles/axure-rp-6-sketching/

  22. flipflip

    3 juin 2011 at 12 h 38 min

    Dans le même genre, opensource le plugin Pencil pour Firefox. Il me semble même qu’il peut être une application autonome : http://pencil.evolus.vn/en-US/Home.aspx

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Dernières news

Les bons plans

Les tests