Critique: Adobe XD CC (2017 bêta)

Notre verdict

Une application incroyablement rapide et intuitive pour le prototypage d'applications et de sites, que tout concepteur peut récupérer en un rien de temps.

Pour

  • Vite. Très vite
  • Outils de conception intuitifs
  • Outils de prototypage faciles à utiliser
  • Prototypage en temps réel via une application mobile

Contre

  • Windows doit encore rattraper la version bêta de Mac

Offre exclusive: Économisez 15% sur Adobe Creative Cloud maintenant

De nos jours, la capacité de concevoir des applications - ou du moins l'interface utilisateur - est une condition préalable pour à peu près n'importe quel concepteur. Cependant, si vous n'êtes pas un créateur numérique chevronné, l'ensemble du processus peut être assez embêtant: spécifications, différentes variantes de téléphones, écrans Retina - et c'est avant de commencer le travail graphique réel.



Adobe XD, ou Experience Design, vise à alléger ce travail. Il est en avant-première depuis mars dernier, et la version bêta est désormais disponible pour tout le monde. Abonnement à Creative Cloud ou non. Et ce ne sont pas que des applications. Vous pouvez créer des prototypes de sites tout aussi facilement (même si nous ferons référence aux applications tout au long de cette revue par souci de clarté).

XD est la simplicité à son meilleur, vous offrant une interface épurée, ainsi que tous les outils dont vous avez besoin pour concevoir et prototyper des interfaces utilisateur. Avant de continuer, gardez à l'esprit que la version Windows 10 est un peu en retard sur la version Mac. La version Mac, par exemple, a à la fois des symboles et des fonctionnalités de couche, tandis que la version Windows 10 (certes publiée beaucoup plus tard) n'a ni l'un ni l'autre. Nous pensons que cela se produira dans les prochaines mises à jour. Ici, nous allons examiner la version Mac.

Commencer

Un didacticiel pratique vous guide à travers les bases lors de la première ouverture d

Un didacticiel pratique vous guide à travers les bases lors de la première ouverture d'Adobe XD

Comme il s'agit de la dernière application d'Adobe, lorsque vous l'ouvrez pour la première fois, vous êtes guidé à travers un didacticiel, que vous pouvez, bien entendu, choisir d'ignorer. Cependant, il est utile et rapide à compléter, et vous guide à travers les bases de l'application, y compris comment créer des plans de travail, importer des images, créer des écrans de défilement et lier des plans de travail pour un prototypage rapide. Vous vous rendez vite compte que XD est une application incroyablement intuitive que vous pouvez acquérir en une heure environ - la courbe d'apprentissage est presque inexistante.

L'interface elle-même est principalement composée de deux onglets: Design et Prototype. Commençons par le design. Dans cet onglet, vous assemblez tous vos éléments de conception sur des plans de travail (un processus qui sera familier aux utilisateurs d'Illustrator), en créant des formes de base et en important des éléments précédemment créés dans, par exemple, Photoshop ou Illustrator.

Lorsque vous démarrez un nouveau projet, on vous demande pour quel appareil vous concevez, et le plan de travail pour la maison est ensuite configuré selon cette spécification (iPhone 6/7 par exemple). À l'aide de l'outil Plan de travail, vous créez d'autres plans de travail et commencez à assembler les différents écrans de votre application.

Couches repensées pour la conception UX

Adobe XD adopte une approche épurée et sans encombrement des calques

Adobe XD adopte une approche épurée et sans encombrement des calques

Ce qui vous frappe immédiatement à propos de XD, c'est à quel point il est extrêmement rapide - placement, montage, panoramique… Tout fonctionne très vite. Et c’est exactement ce dont vous avez besoin lors du prototypage.

En parlant de vitesse, la façon dont XD a implémenté les couches est excellente. Ouvrez le panneau à gauche et vous pouvez voir parfaitement tous vos plans de travail. En double-cliquant sur un plan de travail, vous pouvez afficher tous les objets du plan de travail. Sélectionnez un objet sur l'un de vos plans de travail et il sera mis en surbrillance dans le panneau de gauche. Il s'agit d'une approche simple et sans encombrement des calques qui vous permet de trouver et de modifier facilement vos objets.

Visualisez avec des kits d'interface utilisateur

Les kits d

Les kits d'interface utilisateur inclus avec Adobe XD sont excellents

De la même manière qu'Illustrator, XD a des symboles (Mac uniquement pour le moment), ce qui signifie que vous pouvez rapidement réutiliser les graphiques sur vos plans de travail. Et en ce qui concerne les graphiques, les kits d'interface utilisateur inclus - pour iOS, Android et Windows - sont une superbe touche (enfin, intégrale vraiment).

Pourquoi? Eh bien, ils vous aident à visualiser comment votre application se sentira lorsqu'elle sera utilisée sur un appareil, ou à quoi ressemblera votre écran d'ouverture avec le centre de contrôle iOS glissé dessus. Alternativement, vous pouvez simplement utiliser les éléments standard de l'interface utilisateur (partage, 3D Touch, etc.) pour gagner du temps lors du prototypage de votre conception.

Répéter la grille

Repeat Grid est un outil puissant conçu spécialement pour Adobe XD

Repeat Grid est un outil puissant conçu spécialement pour Adobe XD

Une autre chose qu'Adobe a fait avec XD est d'essayer d'alléger la douleur de certaines des tâches banales auxquelles les concepteurs doivent faire face. Par exemple, vous pouvez faire glisser et déposer n'importe quelle image de votre machine dans une forme pour créer automatiquement une image masquée.

Mais le véritable tueur est la grille de répétition: cela simplifie la répétition des étapes pour créer des grilles d'images. Sélectionnez simplement une image, appuyez sur le bouton Répéter la grille, puis utilisez les poignées pour dupliquer horizontalement ou verticalement. Dissociez la grille, puis vous pouvez rapidement glisser-déposer de nouvelles images dans les bons espaces et spécifier l'espacement des marges (ce dernier que vous pouvez en fait faire sans dissocier).

Onglet Prototype

Passez facilement du mode Conception au mode Prototype pour garder vos idées en mouvement

Passez facilement du mode Conception au mode Prototype pour garder vos idées en mouvement

Ainsi, lorsque vous avez conçu tous vos plans de travail, vous voulez voir comment votre application fonctionnera réellement, n'est-ce pas? Cliquez sur l'onglet Prototype et vous pouvez commencer à créer des liens entre les écrans - encore une fois d'une manière délicieusement simple mais puissante.

Sélectionnez n'importe quel objet et une flèche apparaît à droite du cadre de sélection. Vous pouvez soit faire glisser et déposer cette flèche vers un autre plan de travail pour le lier, soit cliquer dessus et choisir dans la liste déroulante.

Aperçu

Vous pouvez apporter des modifications et les voir immédiatement appliquées

Vous pouvez apporter des modifications et les voir immédiatement appliquées

Lorsque vous liez des objets à des plans de travail (ou même des plans de travail à des plans de travail), vous pouvez choisir une transition / facilité d'entrée / sortie, si vous le souhaitez. Ensuite, une fois que vous avez tout lié, appuyez sur le bouton Lecture en haut à droite pour prévisualiser votre application. Vous pouvez également télécharger l'application XD pour iPhone / Android et prévisualiser votre travail sur votre appareil en temps réel (soit par USB ou via Creative Cloud). Joli.

Enfin, vous pouvez facilement partager vos prototypes en créant un lien directement depuis l'application. Une fois que vous l'aurez fait, vos collègues pourront ajouter des commentaires. Vous pouvez également exporter aux formats PNG, SVG et PDF, et pour iOS, Android ou le Web.

Fonctionnalités intuitives

Adobe XD est une application phénoménale. Conçu spécialement pour le prototypage, il fait juste son travail - et le fait bien. Une multitude de fonctionnalités intuitives fait de l'assemblage des concepts en un temps double, très franchement, un jeu d'enfant. Les concepteurs sont déjà en train de lancer la version bêta et nous ne pouvons pas attendre la version finale.

Configuration requise

Mac

  • GPU: 1,4 GHz
  • Mémoire: 4 Go
  • Écran sans rétine (Retina recommandé)

PC

Mise à jour anniversaire de Windows 10 (64 bits) - version 1607 (build 10.0.14393) ou ultérieure, avec la configuration minimale suivante:

  • Processeur: 2 GHz
  • Mémoire: 4 Go
  • 2 Go d'espace disque disponible pour l'installation; espace libre supplémentaire requis lors de l'installation
  • Affichage: 1280 x 800
  • Graphiques: GPU Intel, AMD ou Nvidia avec des pilotes plus récents que 2014 prenant en charge Direct 3D DDI 11 ou 12. Pour trouver ces informations, lancez «dxdiag» dans le menu Exécuter et sélectionnez l'onglet Affichage.

Télécharger Adobe XD CC (bêta) ou inscrivez-vous à Adobe Creative Cloud ici

Le verdict dix

sur 10

Critique: Adobe XD CC (2017 bêta)

Une application incroyablement rapide et intuitive pour le prototypage d'applications et de sites, que tout concepteur peut récupérer en un rien de temps.