Selon son éditeur, “ Adobe XD est la solution la plus rapide pour créer, prototyper et partager des expériences utilisateur : sites web, applications mobiles, interactions vocales, etc.”
L’interface du logiciel est assez proche d’Illustrator, dans une version très simplifiée. Idéal au vu de la tendance graphique actuelle, on peut allègrement compléter son design en recourant à Photoshop pour les visuels qui demandent de la création, puis à Illustrator pour tout ce qui concerne l’iconographie. Là où Photoshop a tout un tas de fonctionnalités pour la retouche photo, le dessin, bref la création de visuels en tout genre, XD se concentre uniquement sur le wireframe, le maquettage et le prototypage web et mobile. Ce qui clarifie la lecture pour les autres intervenants de création d’un site internet/application : les développeurs, les chefs de projet et même les clients (vous allez adorer le prototypage !).
La fenêtre d’accueil
Smartphone, Web standard, tablette, dès que vous lancez l’application, on vous propose de créer sous toutes sortes de formats. Comme dans la majorité des logiciels de la suite Adobe, ce premier écran vous permettra de poser les premières bases de votre design mais vous donnera également accès à différentes ressources proposées par l’éditeur (tutoriels, accès rapide à vos documents récents, docementation en ligne…).
L’espace de travail
1 – La boite à Outils
Présente sur la gauche de l’écran la boite à outils reste très sommaire. Elle reprend certains grands classique des boites à outils Illustrator ou Photoshop, vous ne devriez pas être trop dépaysé :
- Flèche de sélection : Pour sélectionner, déplacer vos éléments et modifier leurs tailles
- Rectangle, cercle, triangle : Créer une forme géométrique simple de la taille souhaitée.
- Trait : Tracer une droite
- Plume : Permet de placer/supprimer des points et de les relier pour créer des formes comme sur les logiciels standard d’Adobe.
- Texte : Pour taper un texte
- Gabarit : Pour créer un nouveau gabarit, soit au format que vous avez choisi pour votre création en cliquant une fois, soit au format différent en cliquant-glissé.
- Loupe : Permet de zoomer et dé-zoomer à l’intérieur du plan de travail
2 – Les actifs du document
Toujours sur la gauche de notre écran, nous trouvons une colonne (initialement vide) regroupant l’ensemble des éléments de bibliothèque de notre document. Couleurs, typo et styles typographiques, composants d’interface sont autant d’éléments enregistrés que vous pourrez utiliser dans l’ensemble des pages de votre projet. Cette bibliothèque vous permettra de travailler les différents pages ou zones de votre wireframe en gardant une cohérence globale. Lors de la phase d’intégration elle offrira un support essentiel pour définir les styles présents dans votre interface.
3 – Les plans de travail
À l’instar d’Illustrator ou Photoshop, XD permet de travailler sur plusieurs vues d’un même projet au seins de la fenêtre de travail. Mais contrairement à ses grands frères, XD est bien moins gourmand en ressources et la manipulation des plans de travail se fait de façon beaucoup plus fluide. Il vous sera possible de créer un nouveau plan de travail à la volée, le dupliquer, le redimensionner, zoomer ou dézoomer…
Le logiciel étant destiné à la création d’interface, et par extension, à la mise en page. Adobe a eu la bonne idée d’intégrer un gestionnaire de grille de mise en page directement dans son logiciel. Ainsi, chaque plan de travail disposera de guides permettant une meilleur répartition des éléments.
4 – La barre d’options
Comme dans l’ensemble des logiciels de la suite, sur la barre latérale de droite, vous trouverez les options d’objet : centrer, mettre à droite, à gauche, additionner, soustraire et diviser les éléments, modifier l’opacité, choisir les polices, les couleurs, mettre des ombres portées, une bordure… et même des options d’animations et de redimensionnement dynamique.
5 – Les modes de travail
Une des particularité d’Adobe XD est de permettre de basculer rapidement d’un mode de travail de création graphique vers un mode de prototypage ou de partage de votre projet. Le menu permettant cette « bascule » est situé en haut à gauche de la fenêtre de travail.
Le mode design
Créer et mettre en forme les plans de travail composant votre projet. Vous pouvez choisir d’importer des actifs conçus avec d’autres outils ou disponibles sur le web.
Le mode prototype
Relier des plans de travail, créer des liens entre les pages, créez des démonstrations vidéo de votre design, pour le partager avec d’autres collaborateurs.
Le mode partage
Partager des liens pour les révisions de conception, le développement, les présentations et les tests utilisateur de votre design dans un navigateur.
5 – La prévisualisation en ligne
Le mode partage permettra donc aux différents acteurs du projet de se projeter plus facilement dans votre conception et les enchainements de pages directement en ligne. Pour cela, l’interface du mode partage vous proposera de générer une URL. Ce lien enverra l’internaute sur une page lui permettant de manipuler le site. Selon les paramètres que vous aurez définis, il pourra y apporter des annotation, examiner, tester, etc.
Pour conclure
Adobe XD offre donc une interface plutôt intuitive destinée aux concepteurs du numérique. Les fonctionnalités du logiciels sont enrichies à chaque nouvelle versions et répondent aux besoins grandissants de cette chaine de conception. Adobe XD a simplifié le travail des développeurs et des designers qui ont décidé de sauter le pas en modifiant quelque peu leurs habitudes de travail, mais aussi de leur client qui peuvent se projeter encore plus facilement dans le produit qui va leur être livré. Il offre un complément aux traditionnels logiciels graphiques en s’appuyant sur les passerelles entre chacun d’eux.
Il y a actuellement beaucoup de concurrence dans le domaine des outils de la conception numérique : Sketch, Figma, Invision Studio,… Comme à chaque sortie de nouvelles technologies, il existe une petite guerre pour prendre un maximum de parts de marché, puis il y a aura une émergence forte d’un outil autour duquel se rassembleront designers et développeurs. XD profite peut être d’une petite avance grâce à la domination du marché de la conception graphique des logiciels Adobe, mais rien n’est joué d’avance.
Liens utiles et références :
- Site officiel Adobe Adobe XD (fr)
- Guide de l’utilisateur Adobe XD (fr)
- Série de tutoriels Adobe XD en vidéo (en)
- Débuter avec Adobe XD, article du bloguxdesigner.fr (fr)
- Votre premier prototype de site Web de commerce électronique avec Adobe XD (fr)