Adobe XD

Qu'est-ce Adobe XD ?

Adobe XD est un outil de design conçu pour créer des prototypes UX et UI. Dédié aux web designers, l'outil de la Suite Adobe embarque de nombreuses fonctionnalités permettant de concevoir des interfaces web : gestion de l'ergonomie, création de maquettes tous supports (gestion du responsive), intégration d'éléments graphiques, ajout d'animations, etc. 

Au-delà de la conception de la maquette, adobe XD permet de rendre le prototype interactif en y intégrant des animations et interactions. L'idée est donc de permettre aux UX et UI designers de se projeter au plus près de la future plateforme web et ainsi mieux collaborer avec les développeurs. 

Fonctionnalités de l'outil

Maquettes UX & UI

Adobe XD est avant tout un outil conçu pour designer. De nombreuses fonctionnalités et outils intégrés à Adobe XD vous permettront de concevoir tous types de maquettes web.

Design

Bien que l'outil ne propose pas des fonctionnalités de design aussi poussées que des outils comme Photoshop ou After effect, vous aurez tout de même de quoi faire de belles maquettes. La vision du design ici repose essentiellement du des éléments de web design. Vous retrouverez donc des fonctionnalités dédié à l'optimisation d'éléments tel que :

• vos boutons : gérer les tailles, les formes, les couleurs, l'apparence selon l'état du bouton (cliqué / non cliqué / survolé / inactif)
• vos typographies : gérer les tailles, la largeur, l'espacement entre les lettres, l'espacement entre les lignes, etc. 
• vos backgrounds : gérer la couleur, l'opacité, l'accessibilité, la juxtaposition des éléments et leur position dans la maquette
• vos composants : créez des éléments web facilement duplicables et modifiables depuis un seul et même composant. 
• vos icônes : intégrez vos icônes, modifiez leur apparence, tenez une visual library, etc.
• votre design system : créez et faites facilement évoluer le design system de vos projets

Prototype animés

Une fois vos maquettes réalisées, Adobe XD vous permet de leur donner vie, en y ajoutant toutes les possibilités d'interactions. L'idée est d'aller au plus près de la future plateforme web, et de se projeter comme réel utilisateur. Vous pourrez par exemple interagir avec les boutons, tester vos animations, vous immerger dans le futur produit.

Plusieurs avantages à cela :

• Un moyen de tester l'expérience utilisateur
• Tester la cohérence du design et de l'UI
• Un moyen de tester le maillage interne du site
• Un moyen d'être au plus juste dans la conception
• Meilleur passation de la maquettes aux équipes de développeurs

Avantages

L'outil est compatible avec l'ensemble des outils de la suite Adobe. Vous pourrez ainsi très facilement créer des animations avec After Effects, retoucher vos visuels dans Photoshop puis intégrer le tout sur vos maquettes Adobe XD.

Inconvénients

Contrairement à des outils comme Figma, la collaboration sur adobe XD reste très limitée. Un point assez bloquant notamment lorsque l'on veut travailler à plusieurs sur un même projet web, en collaboration avec des équipes de design, marketing, ou encore avec des clients.