Un bref panorama des outils de prototypage

J’ai créé une caté­go­rie sur Wikipedia pour recen­ser les outils de pro­to­ty­page d’interfaces gra­phiques. Voici une liste plus com­plète (mais loin d’être exhaus­tive), incluant ceux qui n’ont pas de pages sur Wikipedia et me per­met­tant de faire quelques com­men­taires le cas échéant.


EDIT : Voici un article plus récent sur la ques­tion.


Adobe Fireworks (Mac OS, Windows)

Outil de des­sin orien­té pro­to­ty­page web. La pos­si­bi­li­té d’export en HTML est assez puis­sante. Une fonc­tion de “sli­cing” per­met de spé­ci­fier quelles por­tions de la page res­te­ront des images (fonc­tion éga­le­ment pré­sente sur Photoshop, mais moins pous­sée).


Powerpoint (Mac OS, Windows)

Logiciel d’une poly­va­lence impres­sion­nante. On peut par exemple lan­cer un dia­po­ra­ma en désac­ti­vant le chan­ge­ment de slide à volon­té et le clic droit. Parfait pour une maquette inter­ac­tive. Pour ça, allez dans l’onglet Diaporama > Configurer le dia­po­ra­ma et cli­quez sur “vision­né sur une borne” (“ter­mi­nal” dans la ver­sion anglaise).

Hélas, le fait que Powerpoint n’ait pas été conçu comme un logi­ciel de gra­phisme se sent vite et peut deve­nir gênant si on veut en faire une uti­li­sa­tion pous­sée. Par exemple le nuan­cier n’inclut pas de valeurs hexa­dé­ci­males. Également, le des­sin des formes n’est pas inva­riant selon le niveau de zoom. Cela se peut se révé­ler exas­pé­rant si on cherche à tra­vailler au pixel près. Par exemple, si on veut ali­gner plu­sieurs rec­tangles, sui­vant le niveau de zoom il y aura un léger déca­lage. 


Axure (Mac OS, Windows, démo de 30 jours)

Logiciel pour créer des maquettes inter­ac­tives avec export en HTML. Inclut une ges­tion des états pour ani­mer une page sans avoir à la clo­ner, ain­si que des tran­si­tions (trans­la­tion, fading, etc.). Un début de fonc­tion de script. Possibilité de créer des mas­ters de wid­get réuti­li­sables. Parmi les outils qui sont uni­que­ment dédiés au maquet­tage, c’est pro­ba­ble­ment le plus puis­sant. Tiens d’ailleurs la licence est à $589.


Balsamiq Mockups (Mac OS, Windows, démo en ligne limi­tée, démo com­plète à télé­char­ger et valable sept jours)

Volontairement limi­té, l’outil est imbat­table pour créer rapi­de­ment une maquette. Tout est dans le choix des wid­gets pré­dé­fi­nis et des pro­prié­tés spé­ci­fiques pour les modi­fier. J’apprécie aus­si le menu en accès rapide pour édi­ter le conte­nu d’un wid­get avec une syn­taxe dédiée (taper “lorem” pour obte­nir du pseudo-texte, [ ] pour une check­box, [x] pour qu’elle soit cocher, - [ ]- pour qu’elle soit désac­ti­vée, ce genre de choses).


Microsoft Expression Blend + Sketchflow (Windows)

Blend cherche à com­bler le fos­sé entre gra­phistes et déve­lop­peurs en pro­po­sant un outil hybride qui per­met de des­si­ner des élé­ments d’interface et de voir le code sous-jacent. Ce n’est pas le pre­mier édi­teur WYSIWYG et c’est une approche qui attire sou­vent la méfiance, mais c’est un logi­ciel vrai­ment inté­res­sant. Il génère des pro­jets lisibles direc­te­ment dans Visual Studio et tota­le­ment natifs au niveau du code (il faut choi­sir entre WPF, la com­po­sante gra­phique de .NET, et Silverlight). Un gra­phiste peut ain­si pro­fi­ter des wid­gets pré­dé­fi­nis, les sty­ler, spé­ci­fier leur com­por­te­ment et balan­cer le tout aux déve­lop­peurs qui peuvent l’intégrer au reste du pro­jet. Cela sug­gère des manières de tra­vailler en équipe assez inté­res­santes. Au mini­mum, cela favo­rise les inter­ac­tions entre créa­teurs d’interface et codeurs, puisque cela force les pre­miers à se fami­lia­ri­ser avec la tech­no­lo­gie et les seconds à faire atten­tion aux spé­ci­fi­ca­tions qu’on leur envoie.  

 Par ailleurs, si vous vou­lez créer une maquette abou­tie gra­phi­que­ment, il est facile d’y inclure les wid­gets stan­dard de Windows. Si vous vou­lez plu­tôt un ren­du en fil de fer, le module Sketchflow (dis­po­nible dans la ver­sion Ultimate) pro­pose un style “mockup”. Mais n’espérez pas la légè­re­té d’un Balsamiq. Blend expose via une inter­face gra­phique une bonne par­tie de la tech­no­lo­gie WPF : les liai­sons de don­nées, le sys­tème de mise en page, les nom­breuses pro­prié­tés propres à chaque wid­get (par­don, à Redmond on dit “contrôle”), etc. Les pre­miers contacts avec le logi­ciel ne sont pas for­cé­ment faciles. C’est sans doute le prix à payer, vu la por­tée des fonc­tion­na­li­tés,

Omnigraffle + le gaba­rit Konigi Wireframes (Mac OS, iPad, démo de 14 jours)

Un logi­ciel de dia­gramme à la base. Je ne suis pas très fan de l’interface.


Pencil (Add-on pour Firefox)

Un peu vieux et limi­té. 

Just In Mind (Mac OS, Windows, existe en ver­sion gra­tuite)


Flairbuilder (Mac OS, Windows, Linux).


InVision (En ligne, ver­sion gra­tuite)


Les deux petits der­niers :

Moqups (En ligne)

Gratuit, fait des maquettes en fil de fer. Emprunte pas mal à Balsamiq, assez orien­té iOS. Prometteur.

Fluid UI (En ligne, orien­té mobile)