Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?

Publié: 2022-03-11

Un concepteur UX a besoin de nombreux outils pour compléter les nombreuses étapes du flux de travail UX, de la recherche à la conception, en passant par le prototype et le transfert. Si vous travaillez sur un PC, vous êtes probablement hanté par la mention constante de Sketch, un éditeur de graphiques vectoriels simplifié et populaire avec d'innombrables plugins utiles qui devient rapidement un standard de l'industrie, mais uniquement disponible sur Mac OS . Cela signifie que, à moins que vous n'ayez une machine Apple, vous êtes laissé de côté. Mais maintenant, Adobe travaille activement sur un véritable concurrent de Sketch multiplateforme (et sosie ?), Après des années d'absence : Adobe XD.

Interface utilisateur Adobe XD
L'interface utilisateur d'Adobe XD.


Interface utilisateur d'esquisse
L'interface utilisateur Sketch, qui est clairement la principale source d'inspiration d'Adobe dans XD, car elle tente de plaire au même type d'utilisateur.

Qu'est-ce qu'Adobe XD ?

Adobe Experience Design CC, ou Adobe XD, est un éditeur de graphiques vectoriels léger et un outil de prototypage qui a été annoncé à Adobe MAX 2015 sous le nom de Project Comet. Le logiciel a été lancé en avant-première en mars 2016 dans le cadre du Creative Cloud, et il est actuellement en phase bêta, recevant des mises à jour presque tous les mois.

Avant cela, Adobe travaillait à l'ajout de fonctionnalités pour les concepteurs UX sur leurs outils établis comme Photoshop et Illustrator. Bien qu'ils soient tous deux d'excellents logiciels, ils ne sont ni légers ni rationalisés pour ce type de travail. Au fil des ans, et en particulier après l'abandon en 2013 d'Adobe Fireworks (l'outil de prototypage classique orienté Web acquis auprès de Macromedia), de plus en plus de concepteurs UX ont estimé que Creative Cloud ne correspondait pas aux attentes du marché. Alors, ils ont sauté sur Sketch (s'ils avaient un Mac). Bien que la réponse d'Adobe à cet exode massif ait été un peu tardive (Bohemian Coding a lancé Sketch il y a 6 ans), cela vaut la peine d'attendre, surtout si vous avez été limité à utiliser des outils moins adéquats sur votre PC. Comparons Adobe XD et Sketch

Interface utilisateur et fonctionnalités exclusives

Lorsque vous ouvrez Adobe XD, la première impression que vous aurez est que l'interface est très familière, à la fois pour les utilisateurs de Sketch et les fans de longue date d'Adobe. Adobe s'est écarté des boutons et menus plus sombres attendus de Creative Cloud et a choisi d'offrir le meilleur des deux mondes. Contrairement à Sketch, vous verrez un ensemble d'outils sur le côté gauche de l'écran, mais également le panneau des couches plus hautes et les propriétés dynamiques sur la droite, comme on le voit sur Sketch. C'est un jeu d'enfant à utiliser et facile à apprendre, quel que soit l'outil que vous utilisiez auparavant.

Grille de répétition

Adobe XD dispose également d'un ensemble de fonctionnalités uniques telles que la grille de répétition, un outil qui vous permet de répliquer un groupe d'objets comme une carte Material Design avec des données variables et un espacement configurable entre les copies.

Fonction Répéter la grille dans Adobe XD
Création de groupes d'objets similaires avec la fonction Répéter la grille dans Adobe XD.

Prototypage

Dans XD, vous pouvez créer un prototype interactif sans avoir besoin de plugins tiers comme vous le feriez dans Sketch. L'éditeur de prototypage Adobe permet aux concepteurs de connecter visuellement des zones interactives à d'autres écrans à l'aide de fils et de mettre en place des transitions. Une fois le prototype interactif prêt, vous pouvez publier et partager le prototype, qui peut être visualisé sur le Web ou avec l'application mobile Adobe XD. Les prototypes XD, cependant, ne prennent pas encore en charge les gestes ou les sections fixes comme les en-têtes, ce qui est possible sur InVision et d'autres outils de prototype uniquement qui se connectent à Sketch.

Fonctionnalité de prototype dans Adobe XD
Câblage des boutons aux écrans dans la fonction Prototype d'Adobe XD.

Panneau des ressources

Dans la mise à jour d'août 2017, Adobe a ajouté le panneau Actifs, un moyen astucieux de rassembler un guide de style interactif avec des couleurs, des styles de caractères et des symboles. Lorsque vous modifiez quelque chose dans le panneau Actifs, chaque utilisation de l'actif dans votre illustration suit. Sketch a également des variables de couleur, des styles de caractères et des symboles, mais chacun contenu dans son propre panneau.

Panneau Actifs Adobe XD
La modification des éléments dans le panneau Actifs modifie l'ensemble du projet.

Adobe a annoncé certaines des prochaines fonctionnalités à apparaître sur XD sur le blog du produit. L'un d'eux étend la fonctionnalité Assets, permettant au concepteur de publier le guide de style du projet avec des polices téléchargeables, des actifs et des codes hexadécimaux de couleurs, ainsi que le prototype interactif et une fonction d'inspection pour l'enquête du développeur sur les éléments à l'intérieur du prototype. C'est ce qu'on appelle le "transfert pour les développeurs" et c'est déjà possible dans Sketch (et Photoshop) en utilisant des plugins comme Zeplin. Une autre future fonctionnalité annoncée est la collaboration en temps réel dans XD, quelque chose qui ressemble à la fonctionnalité de collaboration présente sur Google Docs et déjà disponible sur d'autres outils de conception UX comme Figma.

Abonnez-vous au blog de design Toptal et recevez notre eBook

Sketch (et ses plugins) vs Adobe XD

Caractéristiques AdobeXD Esquisser
Graphiques vectoriels Oui (et inclut Adobe Illustrator dans l'abonnement CC) Oui
Édition d'images avancée Non (mais inclut Adobe Photoshop dans l'abonnement CC) Non
Poids léger Oui Oui
Prototypage Oui Non (mais disponible avec des plugins tiers)
Exportation des actifs Oui Oui
Transfert avec guide de style en ligne et inspecteur Non (annoncé comme une fonctionnalité future) Non (mais disponible avec des plugins tiers)
Symboles et styles Oui Oui
Grille de répétition Oui Non
Grille de documents Oui Oui (avec des colonnes et plus d'options)
Plugins Non Oui
Collaboration Non (annoncé comme une fonctionnalité future) Non (mais disponible avec des plugins tiers)
Version mac OS Oui Oui
Version Windows Oui (Windows 10 ou supérieur) Non
Prix ​​et licence La version bêta est gratuite, elle nécessite d'avoir un Adobe ID. Le prix définitif sera annoncé. 99 USD pour un an de mises à jour, mais vous pouvez continuer à utiliser après cela sans mises à jour

Lorsque vous voyez la situation dans son ensemble, il devient clair qu'Adobe a l'intention de faire en sorte que XD fasse non seulement tout ce que fait Sketch en tant qu'outil graphique vectoriel, mais également ses plugins, couvrant l'ensemble du flux de travail de conception UX. De la conception au prototypage en passant par le transfert, Adobe XD sera probablement l'outil de conception UX définitif, mais qu'en est-il aujourd'hui ?

Est-il temps de changer ?

Adobe XD est avant tout destiné aux utilisateurs de Windows (qui ne peuvent pas utiliser Sketch uniquement pour macOS) et aux abonnés actuels d'Adobe Creative Cloud (qui n'auraient pas besoin de payer plus pour XD en plus de Photoshop, Illustrator, etc.).

De nombreux concepteurs UX font déjà le saut, soit parce qu'ils sont abonnés à Creative Cloud même sur macOS, soit parce qu'ils pensent que XD sera la prochaine norme et sont satisfaits de l'ensemble de fonctionnalités actuel. Si vous êtes un utilisateur expérimenté de Sketch, vous profiterez d'une meilleure interface globale, de fonctionnalités XD uniques, mais vous devrez également faire face aux limitations actuelles et au manque de prise en charge des plugins. Dans tous les cas, essayez-le et partagez-nous vos impressions !

• • •

Pour en savoir plus sur le blog Toptal Design :

  • eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
  • L'importance de la conception centrée sur l'humain dans la conception de produits
  • Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
  • Principes heuristiques pour les interfaces mobiles
  • Conception anticipative : comment créer des expériences utilisateur magiques