À la recherche de l’outil de conception idéal

Le processus de conception d’une interface web est plutôt complexe, je pense ne rien vous apprendre en écrivant cela. La complexité vient du fait que différentes compétences sont sollicitées : design, développement, ergonomie fonctionnel… Pour faciliter ce travail d’équipe, il existe des outils de conception, autrement appelés outils de prototypage ou de wireframe. Avec le temps, ces outils se sont naturellement rangés dans des segments (Wireframes : 4 styles pour 4 types d’outils) et l’ont assistait même à une domination d’outils de plus en plus simples et intuitifs (Des applications de prototypage toujours plus sophistiquées et toujours plus simples).

Nous sommes maintenant en 2014, et le consensus s’est établi autour de trois outils :

  • Balsamiq, la référence en matière de rapidité de prise en main, mais avec un format que l’on ne peut pas exporter ;
  • Axure, la référence en matière de rigueur et de sophistication, mais avec une longue courbe d’apprentissage et format de sortie que l’on ne peut pas non plus exploiter ;
  • Photoshop, l’outil de création numérique d’Adobe, qui est assez lourd à manier et exige une formation pour acquérir sa « logique ».

Comme vous pouvez le constater, aucun de ces trois outils n’apporte une complète satisfaction, car tout est question de compromis : certains vont privilégier l’intuitivité, d’autre la rigueur, et d’autres vont avancer l’argument du pragmatisme et directement faire du prototypage dans Photoshop. Autant le dire tout de suite : j’ai un gros GROS problème avec Photoshop, car jusqu’à preuve du contraire, il s’agit d’une application de retouche d’image. Donc en aucun cas on ne peut faire du prototypage avec. Dans l’absolu, on ne devrait même pas l’utiliser pour faire des maquettes graphiques web, d’autant plus qu’il y a un logiciel qui a été conçu pour faire ça : Fireworks.

S’il faut bien reconnaître que Photoshop est aujourd’hui l’application de référence, je n’ai jamais bien compris pourquoi Adobe n’en a pas profité pour faire évoluer Fireworks et le repositionner comme l’outil de prototypage parfait : simple à prendre en main, tout en offrant un certain niveau de sophistication, et qui génère des livrables directement exploitables dans les étapes suivantes de création (fichiers images, squelettes HTML et CSS…). Aux dernières nouvelles, Adobe faisait savoir à la communauté qu’ils avaient arrêté le périmètre fonctionnel de Fireworks, comprenez par là qu’ils ne le feront plus évoluer : The Present And Future Of Adobe Fireworks.

Avec la mise en pré-retraite de Fireworks et l’évolution bien trop lente de Balsamiq et Axure, il reste donc une place à prendre. C’est dans ce créneau que l’éditeur Bohemian Coding est petit à petit en train de s’imposer avec Sketch, la nouvelle coqueluche des designers. Initialement, Sketch est une application de création graphique vectorielle, mais la communauté se l’ai rapidement approprié en tant qu’outil de conception : Discovering SketchIt’s Time to Dump Photoshop and Embrace Sketch et Khoi Vinh on using Sketch instead of Photoshop.

Sketch

Ce qui plaît avant tout dans sketch, c’est la rapidité de prise en main avec une interface plus simple que Photoshop ou Illustrator (bien que tout soit relatif), et un parfait dosage entre sophistication et rapidité d’exécution. En un mot comme en cent : Sketch permet de travailler vite et bien. D’autant plus que l’application bénéficie maintenant d’une communauté très dévouée et qu’il est possible de trouver quantité de templates et astuces : Sketch Tips & Tricks Blog.

Sketch-UI

Sketch est-il donc l’application idéale ? Non, car elle repose sur un format propriétaire : les créations ne peuvent pas être exportées en HTML. Retour à la case départ.

Heureusement d’autres éditeurs se sont lancé dans la brèche, notamment Tribaloid avec son projet UnderDog, également appelé EvolveUI, qui est censé réconcilier les pratiques de prototypage rapide, conception des interactions et d’interfaces. Pour le moment, le projet n’en est qu’au tout début avec un prototype tournant sous Chrome.

UnderDog

Autre projet très intéressant : Macaw, une application de conception assez proche de Sketch, mais capable d’exporter du très code HTML / CSS de très bonne facture. La philosophie de Macaw est de réconcilier les métiers de designer et de développeur.

Macaw

Cerise sur le gâteau : Macaw se révèle particulièrement efficace pour gérer les maquettes en responsive design avec un modèle reposant sur les breakpoints.

//player.vimeo.com/video/83055071?title=0&byline=0&portrait=0

Comme vous pouvez le constater, ça fonctionne plutôt bien. Mais le problème est que cet outil s’adresse avant tout à ceux qui savent ce qu’ils veulent. Pour celles et ceux qui sont encore en phase de recherche et d’expérimentation, donc pour faire du prototypage rapide, ça ne fonctionne plus. Idéalement, il faudrait pouvoir « débrayer » toutes les fonctions avancées de Macaw pour ne conserver que le strict minimum et pouvoir rapidement concevoir une interface, en 5 minutes, comme le permettait le très regretté Proto d’Adobe.

Re-retour à la case départ. Il semblerait qu’au final, le seul moyen de trouver l’application parfaite serait d’en utiliser deux : une pour le prototypage rapide (façon Balsamiq ou Proto) et une autre pour la création de l’interface (façon Sketch ou Fireworks). Plus j’y réfléchis, et plus je me dis qu’Adobe a encore toutes les cartes en main pour s’imposer sur ce créneau. Ça tombe bien, la rumeur court qu’ils nous prépareraient quelque chose :

Adobe-new-soft

À suivre…

9 commentaires sur “À la recherche de l’outil de conception idéal

  1. Un article qui parle de Fireworks est généralement un bon article, ça fait du bien de se rappeler que cet outil a existé.

    Le rachat de Macromedia par Adobe n’était qu’une façon pour Adobe de mettre le format Flash dans son escarcelle,
    et il faut bien reconnaitre que si ils ont tout simplement liquidé Freehand, comme il ne proposaient pas de produit similaire à Fireworks et quelques pros l’utilisaient..
    (malgré toutes ses qualités nous n’étions pas nombreux et souvent photoshop prenait le dessus car les pros de l’époque veniaent du print.. Photoshop était « de la maison » Fireworks était un outil « pur web » et donc était méconnu et un peu méprisé.

    Son module d’animation était très évolué dés les premieres versions) son système de styles sur Vectoriel n’est apparu sur des logiciels similiares que bien des années plus tard.

    Et aujourd’hui des articles comme le tien expliquent « il était bien ce logiciel dommage qu’il n’ait pas été plus utilisé et qu’il soit arreté. Pauvre Fireworks mal aimé de son vivant puis regretté une fois fini..

    Mais certes..Adobe n’a jamais vraiment tué Fireworks. D’ailleurs il existe encore sans grande évolution ni révolution au sein de la suite CC.

    Mais là n’est pas le sujet de mon commentaire, je m’enflamme façon ancien combattant du web..

    Je t’invite à jeter un oeil à la dernière mouture d’Adobe CC justement,( je suppose que c’est déja fait mais bon) car certes elle a un coût qui la positionne très loin de sketch, mais vu l’évolution de la famille Adobe, Fireworks n’avait tout bonnement plus sa place il faut l’avouer.

    Illustrator + Photoshop CC ça va déja très loin et proprement aujourd’hui et si on ajoute Adobe Generator et les modules ( reflow, Edge animate ou Inspect la création Web de A à Z dispose de tout ece qu’il faut (ou presque Adobe Code ne m’a pas convaincu) et je ne parle pas de Dreamweaver ni de Muse (ce dernier étant un peu un ovni :-) .

    Bref ne pleurons pas Fireworks qui était un peu le « vieux cousin bizarre » de la famille et espérons que les Edge tools vont évoluer dans le bon sens.

    Sur un sujet voisin j’avais croisé ça
    http://medialoot.com/blog/goodbye-fireworks-hello-photoshop-cc/

  2. Donc selon toi la suite CC et plus particulièrement les outils Edge couvrent tous les besoins fonctionnels de la conception. Effectivement, je ne l’avais pas vu de cette façon. Je me suis intéressé de près à certains outils (Muse…) mais je n’avais pas vu le tableau d’ensemble. Ceci dit, il y a une chose qui manque et qu’Adobe ne parviendra jamais à livrer : un outil simple et rapide à prendre en main. Si personne ne peut remettre en question la richesse de la suite CC, combien de temps faut-il pour bien l’appréhender et la manipuler : 2 ans ?

  3. Personnellement j’utilise… Powerpoint en zoom 100%. Associé à un outil de capture d’écran précis type FastStone capture. Cela permet de mixer des éléments d’un site existant et d’avoir une précision au pixel près.

  4. Je suis comme toi, Frédéric, cela fait des années que je cherche la perle rare. J’ai essayé un bon nombre de ces outils de conception (dont certains que tu cites comme Balsamiq) mais aucun ne m’a réellement convaincu. Powerpoint est bcp utilisé, à tord tant ce logiciel rend les choses ingérables dès que cela devient complexe. Les agences avec qui je travaille sont sur Axure. Les storyboards et les wireframes livrés sont d’excellente facture mais il ne peuvent pas être exporté sur des outils comme photoshop, pour rajouter la « couche » design. Donc j’aurai tendance à dire que celui que je préfère et que tu as à peine cité, c’est Illustrator. Aujourd’hui, on trouve un paquet d’éléments graphiques pour réaliser un prototype pour le web et les mobiles selon les normes graphiques de l’OS, par exemple. Illustrator, à l’avantage sur Powerpoint, car il est précis au pixel près, tu as une zone de travail très grande et à l’échelle, tu possède des outils puissants et les calques pour créer des alternatives, la sélection des éléments y est très aisée, les alignements et les repères aussi, etc. AI permet d’exporter facilement les documents dans Photoshop pour apposer la couche de design. Bref, Illustrator serait l’outil parfait s’il y a avait l’interactivité et la possibilité de lier les écrans entre eux comme dans un storyboard. Est-ce qu’il y a ici d’autres personnes qui utilise AI ?

  5. Merci Frédéric pour ce rapide tour d’horizon qui m’aura permi de me remettre à jour sur les outils du marche, tant cette question de pose et se re-pose inlassablement depuis 5/6 ans. Pour notre part, chez LunaWeb, nous avons décidé qu’il n’y avait pas d’outil idéal, tant cela dépend des préférences et habitudes de chacun (Illustrator, Photoshop, Axure, Sketch, Balsamiq, …) et du degré de finition attendu (tous les wireframes ne sont pas pixel-perfect, tous les prototypes de sont pas forcément exportés en HTML, tous les story-boards ne sont pas exploités tels quels en maquettes). Qui plus est, avec la généralisation du responsive design dans nos productions, on se rend compte qui vaut mieux prototyper très rapidement directement en HTML, quitté débuter très sommairement un début de structuration des idées sur un tableau blanc ou via l’excellent petit outil Wireframe.cc ; car au plus vite on teste la mise en œuvre des interactions utilisateurs directement sur le terminal cible, au mieux on anticipe les problèmes de compréhension ou de prise en main de l’interface.
    Pour ma part, j’utilise depuis des années un kit graphique (Kung-fu Keynote) sur Keynote d’Apple, qui a tous les défauts sauf celui de ne pas être rapidement pris en main, carré dans la mise en page et ouvert sur les formats d’export (on peut, par exemple, générer un PDF cliquable pour demo du prototype à distance).
    Bref, la logique, selon moi, serait qu’Adobe ou n’importe qui d’autre (je préférerai d’ailleurs…) mette au point un outil simple et adapté au HTML de prototypage dans lequel le design se fasse directement dans le cadre du ou des terminaux cibles. Car ce qui compte, avant le pixel-perfect, c’est de s’assurer que les interactions soient vraiment optimales pour l’usager ; on l’oublie malheur sèment trop souvent en pensant « figé ».
    BTW, Frédéric, il y a un « très » en trop dans la phrase : mais capable d’exporter du très code HTML / CSS de très bonne facture.

  6. Merci pour cet état des lieux. Je prépare actuellement un petit déjeuner business sur le sujet et ces dernières informations vont m’aider à compléter la session pour mieux répondre à la question … »Quel outil préconiser ». Ma réponse était de toute façon dans le sens « ça dépend  » (ce qui est une vraie réponse d’ergonome). Je regrette que Fireworks n’ai pas tenu la route. Mais s’il devait ressusciter en mieux j’en serais ravie. Et pour le low fidelity et la rapidité d’execution je suis une fan de Balsamiq.

  7. @Nicolas > Adobe a sorti un outil de protypage assez rapide à prendre en main : Adobe Edge Reflow. Il est orienté responsive web design. Il est même possible d’importer ces maquettes photoshop.

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s