5 novembre 2010
par Benjamin Magras dans   Prototype et Wireframe Zoom sur 5

9 outils pour réaliser vos prototypes

9 outils pour réaliser vos prototypes

Le prototypage est devenu une étape incontournable dans la phase de conception d’un site web et je ne pense pas que vous viendrez remettre en question cette affirmation. Que vous l’appeliez prototype, wireframe, maquette… le principe reste le même : établir un brouillon permettant de fixer les différentes parties du site, valider la mise en page ainsi que les fonctionnalités. Cela offre un grain de temps indéniable lors du passage à l’intégration du site et/ou à son développement.

Les solutions permettant de réaliser des prototypes sont nombreuses et voici une petite sélection qui vous permettra peut-être de trouver celle qui vous convient le mieux. N’hésitez pas à me présenter vos solutions, car je ne les connais pas toutes et me transmettre votre retour d’expérience, si vous utilisez déjà une des solution présentée dans ce billet.

Axure

Axure est un outil extrêmement puissant, permettant aux concepteurs de sites Internet et d’applications de réaliser des prototypes complexes. Les fonctionnalités sont nombreuses et bien pensées. Axure permet, entre autres, de réaliser des prototypes fonctionnels à partir d’une bibliothèque d’éléments graphiques complète, de personnaliser ses propres éléments graphiques, de rédiger automatiquement la documentation et les spécifications de maquettes.

Axure est l’un des outils les plus complets que j’ai pu tester. Le panel de fonctionnalités offertes n’a pas d’équivalent sur le marché des outils de conception de prototype. Néanmoins, son prix élevé pourra rebuter certains d’entre vous.

Découvrez le site d’Axure

Fireworks

Fireworks est l’outil que j’utilise quotidiennement pour la réalisation de prototype. Sa polyvalence et son intégration avec la suite d’Adobe sont des atouts indéniables. L’histoire de Fireworks est complexe. Logiciel de dessin à l’origine, il a remplacé l’excellent outil Image Ready dédié à la découpe des images, lors du rachat de Macromedia par Adobe. Aujourd’hui, Adobe a de nouveau modifié l’ADN de Fireworks pour en faire un logiciel de référence pour la création de Wireframe et il faut bien l’avouer : ce nouveau rôle lui va à merveille. Les possibilités sont infinies et les fonctionnalités impressionnantes. Outre ses capacités à concevoir les différentes parties de vos maquettes, la gestion des pages et des masters fait merveille. Les outils d’export sont complets et le logiciel s’intègre parfaitement dans le flux de travail d’une équipe de production utilisant des outils comme Photoshop, Flash ou Dreamweaver.

N’hésitez pas à consulter le billet que j’avais réalisé sur les nouveautés de Fireworks CS5.

Découvrez la page Fireworks sur le site d’Adobe

Mockflow

Mockflow est un outil de prototypage très intéressant. Son originalité réside dans le fait qu’il fonctionne en mode online et offline, permettant de travailler sur un ordinateur tout en profitant des avantages d’un outil en ligne (partage, consultation à distance, export,…). Mockflow dispose d’une bibliothèque d’éléments graphique importante, permettant de concevoir des prototypes très complets et rapidement. Je pense que Mockflow est un outil qui gagnerait à être connu et je vous recommande vivement de le tester, il pourrait vous surprendre !

Découvrez le site de Mockflow

Balsamiq Mockups

Balsamiq permet de réaliser des prototypes comme si vous les aviez dessinés à la main. Le service est disponible, soit sous la forme d’un logiciel, soit d’un service en ligne fonctionnant par abonnement. Balsamiq peut aussi être intégré dans diverses solutions de gestion de projet comme Confluence ou JIRA.

Découvrez le site de Balsamiq Mockups

OmniGraffle


Omnigraffle est un logiciel pour Mac initialement destiné à la conception de diagrammes et autres organigrammes. Sa puissance et ses nombreuses fonctionnalités ont été détournées afin de réaliser des prototypes. La possibilité d’ajouter ses propres bibliothèques d’éléments d’interface reste l’atout principal de ce logiciel. Omnigraffle a néanmoins un défaut, et pas des moindres : il ne gère pas les pages et les masters.

Découvrez le site d’Omnigraffle

HotGloo

Hotgloo est une solution en ligne qui fonctionne par glissé-déposé. Son interface simple et accessible permet de réaliser des prototypes de qualité très facilement et surtout très rapidement. Hotgloo dispose, par ailleurs, de fonctionnalités de partage et de travail collaboratif bien conçues.

Découvrez le site d’Hotgloo

ProtoShare

ProtoShare est un service en ligne, tout comme Hotgloo. En étant un peu plus complet, ProtoShare sacrifie légèrement son ergonomie. Rien de bien méchant cependant. ProtoShare dispose lui aussi de fonctionnalité de partage.

Un test des deux solutions s’impose afin de déterminer laquelle vous convient le mieux !

Découvrez le site de ProtoShare

iPlotz

Dernière solution en ligne présentée dans ce billet, iPlot est une solution intéressante et complète, mais que je trouve un cran en dessous ProtoShare et Hotgloo. Son interface brouillonne rend la conception de prototype un peu plus fastidieuse. Encore une fois, je pense que cela est une affaire de gout et qu’il ne faut pas hésiter à tester afin de se faire une idée du service. Peut-être vous conviendra-t-il plus qu’à moi ?

Découvrez le site d’iPlotz

Pencil

Pencil se présente sous la forme d’un plugin pour Firefox. La solution offre toutes les fonctionnalités qu’on est en droit de demander d’un logiciel de conception de prototypes. De la gestion des pages à l’export du prototype en passant par la conception de maquette, rien ne manque. Sa gratuité, mais aussi sa puissance, font de Pencil une solution extrêmement séduisante.

Découvrez le site de Pencil

Tags : - -

A propos de l'auteur

Benjamin Magras

Benjamin, chef de projet fonctionnel et co-fondateur d’ikomeo, est passionné d'ergonomie et de conception d'interfaces web. Atteint d'Appleïte aigüe, et de matérialisme foudroyant, il est toujours à l'affût des dernières évolutions technologiques. Il est l’œil de Sauron qui guette chacun de vos gestes, et le liant qui maintient la cohésion entre les Lemmings de la production.

Continuez votre lecture

Partagez cet article

  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • LinkedIn
  • Live
  • MySpace
  • Netvibes
  • PDF
  • RSS
  • Scoopeo
  • Technorati
  • Twitter
  • viadeo FR
  • Yahoo! Buzz
  • Wikio FR
  1. WireframeSketcher est un autre outils de prototypage. C’est un plugin pour Eclipse, Aptana et outils de ce type. Voici le site avec plus de details: http://wireframesketcher.com

  2. N’oubliez pas Justinmind Prototyper, un outil de prototypage très puissant pour créer des prototypes dynamiques totalement fonctionels et sans aucun code! et Justinmind Usernote permet de les publier sur internet et de diriger des test d’usabilité nímporte ou dans le monde.
    Jetez un coup d´oeil au site: http://www.justinmind.com

    • Merci Jean pour ce commentaire. En effet Justinmind Prototyper à l’air d’être outil puissant et complet. Je vais le tester et ainsi je pourrai l’ajouter dans mon test. De ton côté, l’utilises-tu régulièrement ?

  3. Benjamin,
    Merci de mentionner ProtoShare!

    This principle, « établir un brouillon permettant de fixer les différentes parties du site, valider la mise en page ainsi que les fonctionnalités » is very important in the development of any interactive project. Though, in some cases, the detail or depth of the wireframing or prototyping will vary based on your team’s or the project’s needs.

    Great post,
    Andrea
    @ProtoShare

Laisser une réponse


(ne sera pas publié)

(*) Champs obligatoires.