La révolution Adobe XD

Commençons par la base, Adobe XD c’est quoi ?

Que vous soyez dans le domaine du web ou non, la révolution XD a été assez silencieuse.

Adobe XD selon Adobe : “C'est la solution la plus rapide pour créer, prototyper et partager des expériences utilisateur : sites web, applications mobiles, interactions vocales, etc. Et c'est gratuit !”

C’est clair et efficace, comme le logiciel en fait. Si l’on compare Adobe XD avec le logiciel Adobe Photoshop, l’interface est bien plus simple pour les non-initiés ! En fait, Adobe XD est le Photoshop pour le Web (et même plus, on va voir le prototype après).

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 zoning (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 !).

Wireframing / Zoning

Adobe XD permet de faire facilement du wireframing (si ce mot est inconnu, je vous conseille ce super article qui vous explique en détail les wireframes, il y a même des images). Fermons la parenthèse pour continuer avec les wireframes d’Adobe XD. Grâce à des templates de wireframes téléchargeables ou l’utilisation des formes simples natives dans XD, il est possible de faire le wireframing et le design dans le même fichier.

Ces wireframes permettent de valider la structure des pages avant que l’équipe design ajoute la couche design (couleurs, icons, etc)

Et sinon le prototypage ?

Après avoir cité 5 fois le prototypage, je vous explique ce que c’est :

C’est le fait d’animer les maquettes avant de les développer.

(un gif vaut mille mots) source : https://www.adobe.com/fr/products/xd.html

Une fois que les wireframes et le design sont faits, il y a une grande étape de validation avant l’envoi à l’équipe technique. A ce moment là, on prototype.

En plus de faire joli, ces animations ont une vraie utilité pour tous les intervenants du projet.

Comprendre et valider les scénarios utilisateurs.

Vérifier qu’il n’y ait pas d’action en double, voir si on n’a pas oublié le bouton retour à la page précédente, etc.

Permettre aux développeurs de comprendre le scénario utilisateur. Les développeurs en plus de développer le front (le design inscrit sur les maquettes) doivent développer le back, c’est à dire les fonctionnalités et les logiques derrière et une maquette ne suffit pas pour comprendre les interactions dans une application web ou mobile.

Adobe XD a simplifié le travail des développeurs et des designers qui ont décidé de sauter le pas, mais aussi de leur client qui peuvent se projeter encore plus facilement dans le produit final qui va être livré.

Je pense que c’est un produit Adobe qui n’a pas fini d’être perfectionné vu le nombre de mises à jour, elles sont quasi mensuelles

Vous l’aurez compris, j’aime beaucoup cet outil. Adobe XD apporte une nouvelle façon de travailler pour les designers, les développeurs, les chefs de projets et surtout les clients. Nous continuons de suivre de près cette révolution.

Souhaitant avoir un second point de vue sur Adobe XD, je suis allée interviewer une Directrice Artistique avec qui je travaille régulièrement, je lui ai trouvé un petit pseudo pour notre interview : Jacqueline. La prochaine fois elle ne me demandera pas de choisir ;)

1- Que penses-tu d’Adobe XD ?

C’est génial ! C’est un très bon outil qui a apporté des fonctionnalités précieuses mais c’est à nuancer.

2- Penses-tu qu’il manque des choses sur Adobe XD ?

Adobe XD est très centré sur les maquettes web. Dans mon utilisation quotidienne, il me manque tout l’aspect retouche image. Pour faire cela, je suis obligé d’aller sur Photoshop.

Adobe XD permet de se concentrer sur la structure (ce qui est important sur certains projets)

Cela facilite l’édition de maquette, grâce aux éléments liés, etc.

Cependant, pour certains projets nécessitant plus de travail sur la direction artistique, Adobe XD est moins adapté. Cela oblige à faire plus de travail en mettant les maquettes sur Adobe XD et à faire les retouches sur Photoshop.

En bref, beaucoup de Direction Artistique nécessaire, projet sur Photoshop. Peu de DA, plus d’enjeu structurel, projet Adobe XD.

3- Quelles évolutions attends-tu d’Adobe XD ?

Un peu plus d’intégration avec les autres logiciels de la suite Adobe, comme l’ouverture de vectoriel dans Illustrator ou la modification d’image dans Photoshop.

4- Comment Adobe XD s’intègre-t-il à tes autres outils de DA ?

Pas top top...

Quand je travaille sur Adobe XD pour un projet, je n’utilise que Adobe XD, voire un peu de Photoshop mais du coup c’est plus long car aucune intégration.

5- Que va devenir Adobe XD dans le futur ?

Il y a actuellement beaucoup de concurrence dans ce domaine : Sketch, Invision Studio,...

Studio fait sa promotion grâce à Invision, XD se repose sur Adobe

Comme dans un certain nombre de domaines, j’imagine qu’il va y avoir un 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.

Peut-être XD grâce à la suite Adobe (s’ils interfacent) mais les autres concurrents sont sérieux.

6- Quel est ton outil préféré ?

Je n’ai pas d’outil « préféré », j’utilise toujours une combinaison d’outils différents pour mener les projets à bien, ils sont tous importants ! Si on considère la suite Adobe comme un unique outil, alors c’est mon préféré, il me permet de tout faire.