Confrontation de l'outil de conception - Adobe XD contre Sketch (2019)

Sketch, un outil de conception bien établi, a connu une croissance phénoménale depuis son introduction en 2010. En 2016, Adobe a présenté XD comme un concurrent redoutable. Après près de trois ans de développement, Adobe XD offre-t-il suffisamment de défis aux concepteurs pour envisager un changement ?

Le processus de conception UX est complexe et nécessite l'utilisation d'outils, de méthodologies et de cadres spécifiques. La recherche d'utilisateurs, l'analyse, le wireframing, les maquettes, l'itération, les tests d'utilisabilité et le prototypage d'interface utilisateur ne sont que quelques-uns des artefacts et des processus avec lesquels les concepteurs travaillent lorsqu'ils communiquent avec les développeurs, les parties prenantes et les autres membres de l'équipe.

Adobe XD et Sketch sont deux outils de conception largement reconnus sur lesquels les concepteurs UX s'appuient.

Sketch est devenu la norme de facto pour une grande majorité de concepteurs numériques en raison de son interface simple, de son grand nombre de plug-ins, de ses fonctionnalités complètes et de ses mises à jour fréquentes.

Alors que Sketch est devenu l'outil de choix pour les concepteurs UX, Adobe, connu depuis longtemps pour son logiciel de conception primé et ses liens étroits avec la communauté des concepteurs, n'avait pas d'option similaire. Ils avaient Photoshop, Illustrator et Fireworks, mais les concepteurs n'avaient aucune envie d'utiliser trois outils pour accomplir des tâches que Sketch pouvait fournir dans une seule application.

En 2016, Adobe a introduit XD (Experience Design). Concurrent sérieux de Sketch, ils avaient encore beaucoup de retard à rattraper. À l'époque, Sketch avait six ans, disposait d'une large base d'utilisateurs et de tout un écosystème de plugins, ce qui en faisait un puissant outil de conception. La rivalité s'est intensifiée au cours des deux années suivantes et Adobe XD est passé d'un concurrent agile à un outil de conception très apprécié qui a conquis de nombreux concepteurs professionnels.

Le Toptal Design Blog a publié un article sur Sketch vs Adobe XD en 2017 alors qu'il était encore en version bêta. Aujourd'hui, deux ans plus tard, Adobe XD a connu plusieurs révisions avec un objectif clair : offrir tout ce dont un concepteur UX a besoin de manière native, et avec de grandes performances.

Est-il temps pour les concepteurs UX de passer de Sketch à Adobe XD ?

Adobe XD contre Sketch

Voyons comment Adobe XD se compare à Sketch. Nous allons comparer les fonctionnalités suivantes :

• Interface utilisateur
• Grille de répétition
• Symboles et panneaux d'actifs
• Outils de conception réactifs
• Modules complémentaires et plugins
• Prototypage avec Auto-Animate
• Partage et commentaires
• Travailler avec les développeurs
• Contrôle de version et collaboration en temps réel

Interface utilisateur

Les concepteurs qui connaissent des outils comme Photoshop ne devraient pas avoir de problème pour apprendre Adobe XD ou Sketch car ils partagent tous une interface utilisateur similaire.

Une différence notable de l'interface utilisateur est l'absence de barre d' outils dans Adobe XD. La barre d'outils, située en haut de l'interface utilisateur, est une fonctionnalité utile dans Sketch avec des raccourcis personnalisables vers les fonctions et outils couramment utilisés, tels que le regroupement d'objets. Adobe propose une fonctionnalité similaire et réduite appelée la boîte à outils , située sur le côté droit du logiciel.

Sketch vs XD : Sketch a l'avantage pour sa barre d'outils utile.

Grille de répétition

Une caractéristique notable d'Adobe XD est la grille de répétition. Il s'agit d'un outil pratique qui permet de créer facilement des listes ajustables et des écrans basés sur une grille. Bien que Sketch ne dispose pas de cette fonctionnalité, elle peut plus ou moins être reproduite avec des plugins.

Sketch vs XD : Adobe XD a l'avantage avec la grille de répétition native du logiciel.

Symboles et panneaux d'actifs

Les symboles ont été l'une des premières fonctionnalités qui ont contribué de manière significative au succès de Sketch. Les symboles sont à Sketch comme CSS (Cascading Style Sheets) est à la conception de sites Web. Ils permettent aux concepteurs de réutiliser facilement et de modifier en masse les actifs, ce qui permet de gagner beaucoup de temps, aide à créer un système de conception prêt à l'emploi et assure la cohérence sur tous les écrans.

Adobe a commencé avec des symboles de base, puis a introduit le panneau des ressources qui combinait des symboles, des polices et des couleurs en un seul emplacement. La modification de l'un de ces éléments affiche les mises à jour résultantes en temps réel. Sketch possède ces fonctionnalités, mais Adobe XD a fourni une expérience utilisateur plus cohérente et améliorée.

Sketch vs XD : Adobe XD a un léger avantage en raison des éléments d'interface utilisateur combinés dans le panneau des ressources.

Outils de conception réactifs

Adobe XD fournit un ensemble robuste d'outils de conception réactifs. Une fonctionnalité remarquable, le mode automatique réactif, devine comment l'écran doit répondre aux différentes tailles d'appareils.

Il s'agit d'une fonctionnalité incroyablement utile qui peut être activée et désactivée à l'aide d'un simple bouton de curseur. Si le mode automatique ne répond pas au comportement attendu, un concepteur peut modifier manuellement les propriétés réactives.

Sketch n'a pas cette fonctionnalité intégrée, mais il a de nombreux plugins comme Anima Toolkit qui font bien le travail.

Sketch vs XD : Adobe XD a l'avantage ici. Ils offrent un moyen intégré de voir les effets réactifs sur les éléments de l'interface utilisateur.

Modules complémentaires et plugins

L'écosystème de plugins dans Sketch est sans doute l'une de ses plus grandes fonctionnalités. Il existe des centaines de plugins qui étendent les fonctionnalités de Sketch et permettent aux concepteurs d'utiliser des fonctionnalités améliorées tout en restant dans l'écosystème Sketch.

Les modules complémentaires sont l'équivalent Adobe XD des plugins. Adobe a lancé son écosystème de modules complémentaires en 2018, il n'est donc pas aussi robuste que Sketch. Ce n'est pas une préoccupation pour Adobe puisque son objectif est d'essayer de réduire le besoin de modules complémentaires et de se concentrer sur la création de fonctionnalités intégrées au logiciel.

Sketch vs XD : Sketch a l'avantage avec sa vaste bibliothèque de plugins.

Prototypage avec Auto-Animate

Adobe a récemment mis à jour XD avec une fonctionnalité incroyablement utile pour les concepteurs UX : auto animate . Il fonctionne en effectuant des transitions intelligentes et fluides entre les éléments de différents écrans. Les résultats sont impressionnants, faisant du prototypage une expérience agréable avec laquelle engager des clients potentiels. Sketch n'offre pas cette fonctionnalité, même avec un plugin.

Une autre grande fonctionnalité de prototypage introduite par Adobe est la prise en charge des micro-interactions, par exemple, tirer un panneau du bord de l'écran ou faire apparaître un clavier. Adobe XD prend également en charge le prototypage d'interfaces utilisateur vocales (comme Alexa ou Google Home).

Sketch vs XD : Adobe XD a l'avantage ici avec des fonctionnalités d'animation automatique qui permettent de gagner du temps et la prise en charge des micro-interactions qui manquent à Sketch.

Partage et commentaire

Les concepteurs dialoguent fréquemment avec d'autres membres de l'équipe, des développeurs et des parties prenantes. La possibilité de partager des conceptions et de recevoir des commentaires est un élément crucial du processus de conception. En tant que tel, Adobe XD inclut une fonctionnalité intégrée pour les maquettes et les prototypes à partager en ligne afin que n'importe qui puisse ajouter des commentaires généraux ou pointer vers des emplacements spécifiques sur une mise en page et laisser des commentaires.

Ces fonctionnalités, associées au mode de prototypage dynamique d'Adobe XD, peuvent également être testées sur des téléphones portables avec l'application Adobe XD native, voire enregistrées pour des démonstrations non interactives.

Sketch peut utiliser le partage et les commentaires à l'aide d'outils de collaboration tels que Zeplin ou d'intégrations avec des outils tiers tels qu'Invision.

Sketch vs XD : Adobe a un léger avantage ici avec le partage et les commentaires en ligne intégrés.

Spécifications de conception

Au cours d'un projet de conception, les concepteurs UX doivent souvent partager les spécifications de conception avec les développeurs. Adobe a inclus cette fonctionnalité dans XD, tandis que les utilisateurs de Sketch devront utiliser des intégrations telles que Zeplin ou InVision.

Sketch vs XD : Adobe a un avantage sur Sketch car les spécifications de conception sont intégrées et ne nécessitent pas d'intégration tierce.

Contrôle de version et collaboration en temps réel

Deux fonctionnalités importantes sur lesquelles les concepteurs et les développeurs s'appuient sont le contrôle de version et la collaboration en temps réel. Les grandes équipes de conception qui travaillent ensemble sur le même projet doivent pouvoir voir quand des modifications ont été apportées et accéder à un historique de ces modifications.

Adobe a abordé la collaboration avec l'introduction de documents en ligne. Cela donne à tous les membres de l'équipe, y compris les développeurs, un lieu de travail central. Selon Adobe, la prochaine étape de la fonctionnalité de documents en ligne sera le contrôle de version.

Sketch offre un contrôle de version et une collaboration en temps réel avec des plugins, mais ces fonctionnalités ne sont pas intégrées au produit.

Sketch vs XD : Sketch remporte celui-ci. Ils ont un contrôle de version, mais avec des plugins ; ce n'est pas actuellement proposé dans XD.

Résumé des fonctionnalités : Adobe XD contre Sketch

Il existe des similitudes ainsi que des différences entre la version actuelle d'Adobe XD et Sketch. Voici une comparaison de chaque produit :

Est-il temps de changer d'outils de conception UX ?

En comparant les fonctionnalités, Sketch et XD sont proches. Sketch manque de certaines fonctionnalités telles que l'animation automatique, la conception réactive automatique et la grille de répétition qui sont toutes natives de XD.

La seule chose importante qui manque encore à Adobe XD est le contrôle de version, dont Sketch dispose grâce aux plugins. Attendez-vous à ce que cela arrive dans XD dès qu'Adobe continue de développer l'ensemble de fonctionnalités des documents en nuage.

Il est plus facile de passer de Sketch (et Photoshop ou Illustrator) à XD que l'inverse, car XD peut ouvrir les fichiers Sketch avec une excellente fidélité. Vous pourriez rencontrer des problèmes si vous dépendez de plugins Sketch uniquement comme Abstract ou InVision Craft.

Dans certains scénarios, le choix est évident : pour les utilisateurs Windows, Sketch n'est pas disponible, et pour les abonnés Adobe Creative Cloud, XD est inclus gratuitement avec des prototypes partagés illimités. Cela n'est pas arrivé par hasard.

Mais Sketch riposte. La société a récemment conclu un financement de 20 millions de dollars et promet des fonctionnalités importantes telles que la collaboration en équipe, le transfert natif et une version Web de l'application en 2019.

Si le contrôle de version n'est pas un problème critique, le moment n'a jamais été aussi propice pour envisager d'utiliser Adobe XD. L'engagement d'Adobe envers la communauté de conception de l'expérience utilisateur est évident avec des fonctionnalités telles que le mode de réponse automatique, la grille de répétition et le prototypage intégré. Malgré leurs débuts tardifs, Adobe a prouvé qu'ils pouvaient représenter un formidable défi pour Sketch.

Pour en savoir plus sur le blog Toptal Design :

• Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
• Atomic Design and Sketch - un guide pour améliorer le flux de travail
• Concevoir avec précision - une revue Adobe XD
• Ce que vous ne savez peut-être pas sur la typographie dans Sketch
• Se familiariser avec le développement du plugin Sketch