En projet dans les bureaux d’Adobe sous le nom de “Comet”, Adobe XD est devenu réalité. La firme de San José s’apprête à se lancer dans la bataille des applications de conception d’interface logicielle avec sa dernière application “Experience Design”.

Disponible en “Preview” depuis quelques jours, nous avons jeté un oeil attentif à Adobe XD et, le moins qu’on puisse dire, c’est qu’Adobe a encore beaucoup de travail pour que son météore écrase Sketch de Bohemian Coding.

Une preview loin d’être terminée, lancée dans l’urgence ?

Traditionnellement, le cycle de développement logiciel passe par les statuts “alpha” puis “beta” avec selon les éditeurs, un passage en “Preview” disponible aux utilisateurs afin de donner un avant-goût du produit. Si, en général la distribution au plus grand nombre se fait à un stade de développement avancé, il semble qu’Adobe ait fait le choix de distribuer “en urgence” à tous ses abonnés Creative Cloud, un logiciel que l’on espère encore en chantier…

Sketch est clairement la cible d’Adobe avec son XD (pour “Experience Design”) : une “Preview” lancée sur Mac uniquement (le terrain de jeu du logiciel de Bohemian Coding) et une interface tellement bien inspirée copiée, qu’elle est à des lieues des canons de la suite Creative Cloud !

Une “Preview” à ce stade peut avoir pour objectif d’envoyer un “signal d’attente” à ceux qui créent encore leurs interfaces sous Photoshop, et qui seraient tentés de lâcher 99€ pour acquérir Sketch… Mais soyons sérieux, Sketch vaut le prix de deux mois d’abonnement à Creative Cloud et enterre nettement tout autre logiciel de la suite Adobe pour la conception d’interfaces, Adobe XD compris (dans son état actuel).

Sketch, Adobe XD, pour quoi faire ?

Au fil des années, Photoshop a entre autres grignoté des fonctions d’Illustrator et avalé des pans entiers de Fireworks. Malgré tout, cela n’en fait toujours pas un outil idéal pour la conception d’interfaces. Tout juste pour une maquette, et encore.

Disponible sur Mac uniquement, Sketch a trouvé une formule diablement efficace à base d’outils vectoriels, d’artboards et de pages alimentant des fonctions d’export parfaitement adaptées aux besoins du web, ou pour des logiciels de développement comme Xcode.

Sketch n’est pas là pour faire de la retouche d’image ni pour jouer de la gomme, mais bien pour assembler un puzzle ergonomique et fonctionnel qui soit le plus proche possible du rendu final. Encore jeune et souffrant de quelques manques (tous comblés par des solutions tierces), Sketch est vite devenu une référence en matière de logiciels de conception d’interface, largement utilisé chez les plus grands : Facebook, Google, Dropbox, IBM, etc.

Un designer d’applications ou de sites web, avec 200€ en poche (4 mois d’abonnement Creative Cloud) peut s’offrir Sketch (99€), Affinity Photo (49,99€) et Affinity Designer (49,99€) qui remplacent avantageusement le Creative Cloud et ses dizaines d’autres d’applications inutiles pour ce type de travail !

Le tour d’Adobe XD

Assez parlé de la théorie, passons à la découverte d’Adobe XD.

Conception d’interface

Au lancement, l’application propose de démarrer un nouveau design dans les formats les plus courants (iPhone, iPad et web) et donne accès à des kits d’interface mobile (iOS, Android et Windows).

1-adobe-xd-new-design

Le choix d’un format crée immédiatement un “artboard” (zone de conception) et dévoile l’interface de Sketch d’Adobe XD. La ressemblance avec Sketch est frappante…

Les kits d’interface fournis sont assez complets, mais moins que ceux proposés en standard par Sketch.

En manque d’outils

Rappelons-le, ce n’est qu’une “Preview”, mais Adobe XD ne propose que le strict minimum en termes d’outils et de palettes (si vous venez de Sketch, les raccourcis-clavier sont identiques).

4-outils-interface-adobe-xd

  • À gauche, une barre d’outils verticale avec : la flèche de sélection, les formes rectangle, ellipse et trait, la plume pour les courbes de Bézier, l’outil texte et la création d’artboard.

  • Au centre le “pasteboard” où vous pouvez déposer vos objets vectoriels en attente, et organiser vos “artboards” exactement comme dans Sketch.

  • À droite, le volet fixe reprend sensiblement ce que propose Sketch pour régler les propriétés de l’objet sélectionné.

En dehors de ça, inutile de chercher dans les menus ni de vouloir ajouter d’autres panneaux ou barres d’outils comme proposés habituellement par Adobe, tout est encore vide…

Évidemment, il est impossible de ne pas comparer Adobe XD à Sketch, mais en y prêtant plus d’attention, le dernier-presque-né d’Adobe manque cruellement d’outils.
Les outils de dessin vectoriel sont trop limités (pas de formes “complexes”), les “réglages” qui permettent d’arrondir les angles, ajuster la taille et les styles des objets sont quasi nuls. Chose incompréhensible, Adobe fait appel au colorimètre peu pratique d’OS X plutôt que de reprendre ce que l’on connait dans les logiciels de sa suite, sans compter l’absence de nuanciers.

5-colorimetre-adobe-xd

Sketch propose dans sa colonne de droite de quoi ajouter des effets dynamiques (réglage de couleur, flous intelligents, ombres internes et externes, etc) sur lesquels Adobe XD ne pourra faire l’impasse pour concurrencer frontalement le logiciel de Bohemian Coding.

6-reglages-vectoriels-sketch

Enfin, il n’y a qu’à regarder la quantité d’outils disponibles dans la barre personnalisable de Sketch pour voir l’étendue des manquements d’Adobe XD…

7-outils-sketch

Quelques excellentes idées

Malgré tout, on trouve d’excellentes idées dont on rêverait que Sketch s’inspire à l’avenir, comme les “poignées” permettant d’arrondir les angles d’un rectangle ou d’augmenter la taille d’un texte.

8-modification-outils-adobe-xd

Autre idée particulièrement intéressante, l’outil de “création de grille” d’Adobe est bien mieux pensé que celui de Sketch. Sélectionnez un objet (ou un groupe d’objets) cliquez sur “Repeat Grid” et de larges poignées permettent de créer une mosaïque verticale et/ou horizontale. Survolez l’espace entre les éléments et glissez la gouttière rose pour ajuster le tout. Simple et efficace, mais il manque encore la possibilité de travailler ces réglages au clavier pour plus de précision.

Calques, tranches, styles, où sont-ils passés ?

Incroyable à ce stade et pour ce type d’application, Adobe n’a pas jugé bon d’introduire la notion de calques et de groupes si pratique dans Photoshop, chose que Sketch gère admirablement bien…

Ce dernier va même plus loin avec des pages qui permettent de regrouper les “artboards”, utiles pour organiser les sections d’une application et ne pas se retrouver avec un pasteboard bordélique !

10-groupes-calques-sketch

Les tranches, héritées de ImageReady et Fireworks dans Photoshop, qui constituent la base d’un export maîtrisé des éléments d’interface, sont tout bonnement absentes d’Adobe XD.

Là encore, Sketch fait bien mieux en proposant de rendre exportable n’importe quel élément et de lui appliquer plusieurs formats d’export. Au sujet de l’export, Adobe fait le strict minimum : Web, iOS, Material Design et les déclinaisons de résolution correspondantes.

11-export-adobe-xd

Dernier point crucial dans ce type de logiciel : les styles. Rien de tout ça dans Adobe XD. Impossible d’attribuer des styles aux textes et aux objets, ce que l’on connaît pourtant dans toute la suite Creative Cloud. Une fois encore, Sketch sait jouer des styles et pousse plus loin avec sa bibliothèque de symboles, que vous pouvez alimenter au fur et à mesure de la conception d’une interface.

Prototypage intégré, un bon point ?

Adobe XD a beau être mis en défaut sur de très nombreux points, ce dernier embarque un outil basique pour créer des prototypes d’interface “fonctionnels”.
L’idée est simple : vous établissez des liens entre des objets et les “artboards” que vous avez créés, choisissez une transition et vous l’exportez sous la forme d’une page web.

Cerise sur le gâteau, Adobe XD vous permet d’enregistrer une vidéo de la manipulation de votre prototype d’application.

Des services comme InVision permettent d’arriver au même résultat et même d’en faire plus, mais il faut sortir de Sketch pour cela. L’approche intégrée d’Adobe XD est une bonne idée, mais qui reste à fignoler.

C’est à l’heure actuelle, la seule solution “facile” pour prévisualiser son interface en cours d’assemblage sur un appareil. C’est tout de même nettement moins pratique que Sketch et son compagnon iOSSketch Mirror”.

Sans extensions, point de salut

Ce qui place Sketch encore loin devant, et peut-être pour longtemps, c’est son catalogue d’extensions qui offre un gain de productivité phénoménal. Nous pensons notamment à “Content Generator” qui permet de générer intelligemment du contenu (images, textes, etc) à la volée pour remplir une maquette d’application.

13-plugins-sketch

Sketch pourrait enterrer Adobe XD sur ce point, si les développeurs de San José ne s’y mettent pas.

Adobe XD un concurrent sérieux à Sketch ?

Vous n’entendez pas le petit rire de l’auteur de l’article, mais dans l’état actuel des choses, quand on voit ce qu’Adobe a réussi à sortir en l’espace de six mois avec ses moyens sans commune mesure avec ceux de Bohemian Coding, on imagine facilement que Sketch a encore de beaux jours devant lui !

Comptez également sur le fait que l’abonnement obligatoire au Creative Cloud fait grincer pas mal de dents et que les développeurs de Sketch, sortis de l’App Store, ont annoncé mettre les bouchées doubles en 2016… la partie n’est donc pas gagnée d’avance pour le géant de la création numérique !

Plutôt que de vous lancer dans le téléchargement de la Preview d’Adobe XD, nous ne saurions que trop vous conseiller de récupérer la version d’essai de Sketch (valable 30 jours)…

La suite au prochain épisode !

2 COMMENTAIRES

  1. Un très bon article. Ce n’est pas le premier du site. Aux réflexions de l’article, je rajouterais une donnée subjective qui fait que, même le jour où XD depassera Sketch comme nombres de functions, ce dernier gardera toujours une place dans mon ordinateur. Sketch, comme Ulysses, à un côté erotique qui manque aux autres logiciels… parfois j’ai le sentiment que ces deux logiciels ont été developpés “pour moi”!
    Illustrator, Photoshop, Affinity Designers sont bien plus puissants que Sketch, tout come Scrivener est plus puissant que Ulysses… et pourtant est avec les deux “petits” que je travaille, car travailler avec eux c’est vraiment un plaisir… je ne me rends pas compte du temps qui passe…
    Desolé pour mon français, mais je suis italien…

À vous la parole !

*
*