Quand on s'apprête à concevoir de zéro une nouvelle application web ou mobile, ou un nouveau site web, une des premières étapes consiste à traduire le cahier des charges en schémas définissant la mise en page, la position des éléments de chaque écran, leur fonctionnement général et le parcours utilisateur. C'est le wireframing. Il précède la charte graphique, parce qu'avant de discuter des couleurs et des polices de caractères, c'est quand même bien de définir ce qu'on veut voir dans l'interface ainsi que le cheminement.

Le logiciel-roi du wireframing, c'est Balsamiq Mockups. Très simple à utiliser, il propose des éléments à déposer, comme s'ils avaient été tracés au crayon comme sur une feuille de papier. Ce n'est pas super joli, mais à ce stade-là ce n'est pas encore la préoccupation. La licence vaut 89$ pour un utilisateur unique. Or je travaillais sur un projet gratuit…

J'ai donc essayé d'autres solutions, dont aucune ne m'a vraiment convaincue. Le papier m'emmerdait. J'avais déjà utilisé Justinmind Prototyper il y a quelques années, et je l'avais plutôt apprécié. Hélas, ils sont tout changé dans la nouvelle version et je n'ai même pas réussi à commencer un seul wireframe ! Ensuite j'ai essayé Fluid UI, qui présentait l'avantage de ne pas nécessiter d'installation puisque tout se passait en ligne. Mais leur utilisation n'est pas illimitée (une seule application, 10 pages seulement). Même souci avec InVision. L'interface est très belle, mais au bout de quelques écrans, impossible d'en créer de nouveaux sans avoir à passer à la caisse. J'avais également essayé Piktochart…

Et puis, le souci des outils en ligne, c'est que si on n'a plus de connexion, ou si le service ferme, on ne peut plus accéder à ses données.

A tel point que, lassée, j'ai fini par retourner sous Adobe Photoshop. Mais c'est plutôt fastidieux de devoir tout dessiner, alors que l'intérêt des logiciels de wireframing est de proposer les éléments (boutons, tableaux, déroulants…) déjà tout faits.

Et puis j'ai découvert Indigo Studio par Infragistics, et j'avoue que j'ai été très agréablement surprise.

Téléchargement et installation

Vous pouvez le télécharger à partir du site officiel.

Le logiciel est gratuit. Il existe des fonctionnalités premium (les screenparts), qui sont gratuitement disponibles pendant 30 jours après l'installation.

Pour télécharger l'installateur .msi d'Indigo Studio, il vous faut saisir une adresse mail (cela vous crée un compte Infragistics, compte qui vous permettra de partager les wireframes avec vos collègues de travail).

Indigo Studio est rapide à installer (moins de 2 min sur mon Dell XPS i7 équipé 8 Go de RAM, quelques secondes sur le même une fois équipé d'un disque dur SSD). Sauf si vous n'avez pas Microsoft Silverlight 5 sur votre machine, auquel cas il faudra aller le télécharger et l'installer avant de reprendre l'installation d'Indigo Studio.

 

Un peu trop simple, même : on n'a même pas le choix de l'emplacement d'installation ! Le programme est allé se mettre sous « C:\Users\<Votre nom>\AppData\Local\Infragistics\Indigo Studio\ »

Découverte de l'interface

Au premier lancement, on nous demande de s'identifier avec le compte gratuit qu'on a créé au moment du téléchargement. On n'oublie pas de décocher la case proposant de participer aux statistiques anonymes…

Ensuite, Indigo Studio nous annonce qu'on a 30 jours pour évaluer les fonctionnalités premium. 30 jours qui à l'écran suivant vont se transformer en… 14 jours ! Si on a acheté le produit, il est également possible de saisir sa clé.

On arrive alors sur l'écran d'accueil.

Qui permet d'ouvrir un projet existant ou d'en créer un nouveau.

Le projet est alors créé sous le nom temporaire de Project1, jusqu'à ce qu'on décide de l'enregistrer : c'est là qu'on lui donne son nom. Le projet se présente sous la forme d'un répertoire portant le nom du projet, à l'intérieur duquel on va trouver un fichier portant l'extension *.proj portant également le nom du projet.

Il ne reste plus qu'à ajouter ses écrans au projet en cliquant sur le bouton New.

Indigo Studio est simple, intuitif (on retrouve les raccourcis habituels, comme Ctrl+flèche pour déplacer de 10 pixels un élément au lieu d'1px), et il inclut une galerie relativement vaste d'éléments UI (il manque peut-être un datepicker mais bon, il suffit de choper une image sur le net).

Il suffit de prendre un élément dans la palette UI Elements à droite et de le faire glisser dans l'écran. Ces éléments sont redimensionnables sans que cela pixellise. Et il y a même une petit assistance pour les caler et les aligner les uns par rapport aux autres.

Chaque élément est indépendant, et on peut modifier son empilement grâce à la palette Layers (les habitués de Photoshop ne seront pas dépaysés).

Il est possible d'associer une interaction à tout type d'élément, afin de montrer ce qui va se passer quand l'utilisateur interagira avec. Le type d'interaction est :

• soit un changement d'aspect de l'écran,
• soit une navigation vers un autre écran du projet, soit une URL

On retrouve tous nos états (states) pour un écran donné sur une vue globale, en cliquant sur « View all states ».

Les écrans produits sont très beaux, très flat design. A tel point qu'on est sans cesse obligé de rappeler au client qu'on en est encore au stade du wireframe, et que ce n'est pas la charte graphique définitive…

Les screenparts permettent de créer vos propres éléments UI réutilisables. C'est une fonctionnalité premium. Alors bon, personnellement, comme je ne veux pas à chaque fois remettre les éléments fxes (bandeau, menu latéral) et devoir repasser dessus en cas de changement, j'use et j'abuse des changements d'aspect d'écran. En effet, si on change quelque chose dans l'écran start, cela se répercute également sur les écrans-enfants !

C'est vraiment très simple à utiliser, et si on ne s'en sort pas, on peut toujours aller voir les tutos vidéos, animés par une demoiselle très enthousiaste à l'accent américain impeccable.

Enfin, si on veut partager le projet avec le client, on peut exporter les wireframes sous la forme d'un fichier html qui reproduit tout le cheminement en javascript, ou d'un lot d'images au format PNG.

Je précise qu'Indigo Studio 2017 est seulement un outil de wireframing : il ne va pas vous générer le code associé à votre future application…

Un excellent service client

Petite anecdote : j'ai également été amenée à travailler sous Indigo Studio dans le cadre de son travail en SSII. Il y a de cela quelques années, Infragistics proposait Indigo Lite (désormais introuvable). Hélas, les wireframes conçus sous Studio ne sont pas lisibles sous Lite (pas de compatibilité descendante). Evidemment, ce n'est qu'après avoir dessiné une trentaine d'écrans, qu'on m'a dit qu'il aurait fallu les faire sous Indigo Lite. Heureusement, un tech absolument adorable de chez Infragistics a accepté de convertir mes wireframes à l'ancien format. Ça, c'est du service client !

UPDATE : en 2018, Infragistics a sorti une nouvelle version, renommée Indigo.design. Heureusement, il existe toujours une version gratuite, la version Essential… La version Enterprise, elle, permet la génération de code.