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 Sketch, It’s Time to Dump Photoshop and Embrace Sketch et Khoi Vinh on using Sketch instead of Photoshop.
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 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.
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.
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 :
À suivre…