Un bref panorama des outils de prototypage

J’ai créé une caté­gorie sur Wikipedia pour recenser les outils de proto­ty­page d’interfaces graphiques. Voici une liste plus complète (mais loin d’être exhaus­tive), incluant ceux qui n’ont pas de pages sur Wikipedia et me permet­tant de faire quelques commen­taires le cas échéant.


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


Adobe Fireworks (Mac OS, Windows)

Outil de dessin orienté proto­ty­page web. La possi­bi­lité d’export en HTML est assez puis­sante. Une fonc­tion de “slicing” permet de spéci­fier quelles portions de la page reste­ront des images (fonc­tion égale­ment présente sur Photoshop, mais moins poussée).


Powerpoint (Mac OS, Windows)

Logiciel d’une poly­va­lence impres­sion­nante. On peut par exemple lancer un diapo­rama en désac­ti­vant le chan­ge­ment de slide à volonté et le clic droit. Parfait pour une maquette inter­ac­tive. Pour ça, allez dans l’onglet Diaporama > Configurer le diapo­rama et cliquez sur “visionné sur une borne” (“terminal” dans la version anglaise).

Hélas, le fait que Powerpoint n’ait pas été conçu comme un logi­ciel de graphisme se sent vite et peut devenir gênant si on veut en faire une utili­sa­tion poussée. Par exemple le nuan­cier n’inclut pas de valeurs hexa­dé­ci­males. Également, le dessin 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 à travailler au pixel près. Par exemple, si on veut aligner plusieurs rectangles, suivant 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 gestion des états pour animer une page sans avoir à la cloner, ainsi que des tran­si­tions (trans­la­tion, fading, etc.). Un début de fonc­tion de script. Possibilité de créer des masters de widget réuti­li­sables. Parmi les outils qui sont unique­ment dédiés au maquet­tage, c’est proba­ble­ment le plus puis­sant. Tiens d’ailleurs la licence est à $589.


Balsamiq Mockups (Mac OS, Windows, démo en ligne limitée, démo complète à télé­charger et valable sept jours)

Volontairement limité, l’outil est imbat­table pour créer rapi­de­ment une maquette. Tout est dans le choix des widgets prédé­finis et des propriétés spéci­fiques pour les modi­fier. J’apprécie aussi le menu en accès rapide pour éditer le contenu d’un widget avec une syntaxe dédiée (taper “lorem” pour obtenir du pseudo-texte, [ ] pour une checkbox, [x] pour qu’elle soit cocher, - [ ]- pour qu’elle soit désac­tivée, ce genre de choses).


Microsoft Expression Blend + Sketchflow (Windows)

Blend cherche à combler le fossé entre graphistes et déve­lop­peurs en propo­sant un outil hybride qui permet de dessiner des éléments d’interface et de voir le code sous-jacent. Ce n’est pas le premier éditeur WYSIWYG et c’est une approche qui attire souvent la méfiance, mais c’est un logi­ciel vrai­ment inté­res­sant. Il génère des projets lisibles direc­te­ment dans Visual Studio et tota­le­ment natifs au niveau du code (il faut choisir entre WPF, la compo­sante graphique de .NET, et Silverlight). Un graphiste peut ainsi profiter des widgets prédé­finis, les styler, spéci­fier leur compor­te­ment et balancer le tout aux déve­lop­peurs qui peuvent l’intégrer au reste du projet. Cela suggère des manières de travailler en équipe assez inté­res­santes. Au minimum, cela favo­rise les inter­ac­tions entre créa­teurs d’interface et codeurs, puisque cela force les premiers à se fami­lia­riser avec la tech­no­logie et les seconds à faire atten­tion aux spéci­fi­ca­tions qu’on leur envoie. 

Par ailleurs, si vous voulez créer une maquette aboutie graphi­que­ment, il est facile d’y inclure les widgets stan­dard de Windows. Si vous voulez plutôt un rendu en fil de fer, le module Sketchflow (dispo­nible dans la version Ultimate) propose un style “mockup”. Mais n’espérez pas la légè­reté d’un Balsamiq. Blend expose via une inter­face graphique une bonne partie de la tech­no­logie WPF : les liai­sons de données, le système de mise en page, les nombreuses propriétés propres à chaque widget (pardon, à Redmond on dit “contrôle”), etc. Les premiers contacts avec le logi­ciel ne sont pas forcé­ment faciles. C’est sans doute le prix à payer, vu la portée des fonc­tion­na­lités,

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

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


Pencil (Add-on pour Firefox)

Un peu vieux et limité. 

Just In Mind (Mac OS, Windows, existe en version gratuite)


Flairbuilder (Mac OS, Windows, Linux).


InVision (En ligne, version gratuite)


Les deux petits derniers :

Moqups (En ligne)

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

Fluid UI (En ligne, orienté mobile)

Articles liés

Attention, commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.