Premiers pas sous Indigo Studio 2017

 

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

Formulaire de téléchargement

 

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.

Installation Indigo Studio Installation Indigo Studio Installation 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…

Indigo Studio connexion au compte

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.

Ecran d'accueil d'Indigo Studio

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

Création nouveau projet sous Indigo Studio

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

Indigo Studio palette layers

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

Ajout d'une interaction sous Indigo Studio

On retrouve tous nos √©tats (states) pour un √©cran donn√© sur une vue globale, en cliquant sur ¬ę¬†View all states¬†¬Ľ.

Carte des states sur Indigo Studio

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.

 

Karine SANCHE

Partager cet article