Adobe XD : mise à jour de septembre 2018

En septembre, Adobe XD fait l’objet d’une mise à jour majeure avec de nouveaux outils qui faciliteront la création pour différents appareils et tailles d’écran. Par ailleurs, l’application intègre désormais des éléments de transition minutée pour accroître le réalisme de vos prototypes. La fonction de Redimensionnement Responsive vous permet, quant à elle, de redimensionner votre zone de travail et les éléments qu’elle contient (si vous créez à la fois pour un iPhone et un iPad, par exemple), tout en conservant le positionnement et l’échelle du design. D’autre part, grâce aux nouvelles transitions minutées, vous pourrez simuler les effets d’apparition et de disparition d’éléments, avec délai. Avec cette expérience en mode plein écran optimisée (et l’ajout, toujours apprécié, de la vérification orthographique), XD constitue un outil ultra-performant pour les designers qui ont besoin de prototypes à la fois faciles à créer et très efficaces.

Poursuivez votre lecture pour découvrir les nouveautés à l’œuvre, et soyez au rendez-vous sur Adobe Live les 17, 18 et 19 septembre à 18h : les meilleurs UX designers vous montreront comment utiliser ces toutes dernières fonctionnalités d’Adobe XD.

Nouveauté de XD : Redimensionnement Responsive

Dans le monde où nous vivons, le design pour plusieurs appareils n’est pas seulement important ; il est indispensable. Adobe XD inclut désormais une fonction de Redimensionnement Responsive qui permet de redimensionner les groupes d’objets tout en conservant leur positionnement et leur échelle. Il suffit de redimensionner le groupe sur la zone de travail pour que XD préserve les espacements.

« Lorsqu’elle crée de nouveaux composants pour notre vaste bibliothèque, notre équipe doit penser aux appareils de toutes tailles dès les premières phases de conception », précise Greg Pilawa, UX/UI Design Manager pour Wyndham Hotels and Resorts. « Grâce à la nouvelle fonction Redimensionnement Responsive de XD, nous sommes en mesure de concevoir, créer et tester rapidement du contenu pour plusieurs appareils sans avoir à recréer entièrement chaque composant ou à ajuster chaque élément séparément. Nous allons donc pouvoir créer plus, plus rapidement. » Découvrez le Redimensionnement Responsive dans la vidéo ci-dessous.

XD fera de son mieux pour recréer automatiquement le positionnement des éléments redimensionnés en fonction de la taille de la zone de travail, mais vous pouvez passer en mode manuel pour mieux maîtriser les contraintes. Vous pouvez ainsi contrôler précisément la mise à l’échelle de la hauteur et de la largeur d’un objet, ainsi que son alignement à l’intérieur du groupe.

Il existe différentes manières d’utiliser la fonction de Redimensionnement Responsive afin d’accélérer le design pour plusieurs appareils. Vous pouvez notamment épingler un bouton ou une icône dans un angle, fixer les éléments sur les bords du design et fixer la marge intérieure d’une création afin de conserver la taille et le positionnement d’une icône.

Nouveauté de XD : Transitions Minutées

Avec le temps comme nouveau déclencheur, vous pouvez passer d’un plan de travail à l’autre en fonction d’une durée spécifique, ce qui est très utile pour le prototypage des flux décisionnels ou d’onboarding. Vous pourrez créer des animations entre des plans de travail, avec des délais pour les effets de fondu automatique, les pop-ups, les bulles d’information, etc.

Lorsque vous créez une transition entre deux plans de travail en mode Prototype, vous pouvez désormais choisir comme déclencheur, non plus Appuyer, mais Heure, et définir la durée du délai et le type de transition. XD enregistre vos attributs depuis cet écran et les propose par défaut sur les écrans suivants. Visionnez la vidéo ci-dessous pour voir les transitions minutées à l’œuvre et savoir comment les utiliser pour simuler une expérience d’onboarding dans une application.

Nouveauté de XD : Vérification Orthographique

Adobe XD inclut désormais un élément indispensable de la rédaction numérique, à savoir la Vérification Orthographique, à laquelle vous aurez accès en temps réel sur la zone de travail. Une fois que vous aurez activé la Vérification Orthographique dans XD (elle le sera d’ailleurs par défaut), et sélectionné le texte de votre design, les éventuelles fautes d’orthographe s’afficheront. Visionnez la vidéo ci-dessous pour un aperçu de cette nouvelle fonctionnalité dans Adobe XD.

Bien sûr, une liste de suggestions vous est proposée pour les mots mal orthographiés, et pour vous faire gagner du temps, XD suggère, pendant la saisie, des orthographes alternatives pour les éventuels mots erronés. L’application fournit également des suggestions grammaticales.

Optimisation de XD : affichage de prototypes web en mode plein écran

Nous avons apporté quelques améliorations aux options plein écran d’Adobe XD pour que vous puissiez présenter votre travail de manière précise et offrir une expérience plus réaliste en affichant un plan de travail dans le navigateur web. Les plans de travail web et personnalisés s’affichent désormais depuis le haut du navigateur, sans marge intérieure noire, tandis que les plans de travail pour mobiles restent centrés sur l’écran (mode Plein écran).

Si le plan de travail est plus large que l’espace horizontal disponible, le prototype est mis à l’échelle de manière à s’ajuster à la largeur sans défilement horizontal. Vous trouverez ci-dessous une vidéo sur les options d’affichage en mode Plein écran.

En mode Plein écran, la couleur de fond n’est plus le noir, mais le blanc, afin d’éviter toute confusion. En effet, la plupart des navigateurs ont un fond blanc par défaut et le noir n’offre pas un rendu précis d’une véritable expérience web.

Communauté axée sur l’expérience utilisateur

Poursuivons le dialogue ! Aidez-nous à façonner l’avenir d’Adobe XD en faisant part de vos attentes ou en signalant des bugs à l’adresse https://adobexd.uservoice.com. Suivez-nous (@AdobeXD) pour rester au fait de l’actualité ou contactez l’équipe sur Twitter via #AdobeXD. Retrouvez-nous également sur Facebook, où nous partageons des vidéos et informations sur les mises à jour, et répondons à vos questions lors de sessions en direct.

En mode Plein écran, la couleur de fond n’est plus le noir, mais le blanc, afin d’éviter toute confusion. En effet, la plupart des navigateurs ont un fond blanc par défaut et le noir n’offre pas un rendu précis d’une véritable expérience web.

Communauté axée sur l’expérience utilisateur

Poursuivons le dialogue ! Aidez-nous à façonner l’avenir d’Adobe XD en faisant part de vos attentes ou en signalant des bugs à l’adresse https://adobexd.uservoice.com. Suivez-nous (@AdobeXD) pour rester au fait de l’actualité ou contactez l’équipe sur Twitter via #AdobeXD. Retrouvez-nous également sur Facebook, où nous partageons des vidéos et informations sur les mises à jour, et répondons à vos questions lors de sessions en direct.

#MadeWithAdobeXD

Si vous partagez vos prototypes sur Behance, pensez à les identifier avec le hashtag #MadeWithAdobeXD et à sélectionner Adobe XD sous « Outils utilisés ». Vous aurez peut-être la chance de figurer dans la newsletter d’Adobe XD.