6 mois de design avec Adobe XD : retour d’expérience

Designer d’interfaces depuis presque 10 ans maintenant, j’ai eu l’opportunité de tester différents logiciels pour m’aider dans mon travail au quotidien. Depuis 6 mois, Adobe XD est devenu mon nouvel outil de prédilection, je vous propose de découvrir pourquoi.

Partenaire

Mon parcours avec les outils de design

Durant la plus grande partie de ma vie en tant que webdesigner / créatif / DA, Adobe Photoshop est resté mon outil favori. En débutant avec la version Photoshop 7, puis CS3, j’ai pu l’utiliser pour mener à bien des dizaines de projets web. Bien que non conçu à cet effet, il restait à l’époque l’outil le plus polyvalent pour ce type de travaux.
Dans le contexte d’un poste en agence, Photoshop restait le pivot parfait entre InDesign et Illustrator qui étaient également utilisés par les autres membres de mon équipe.

La communauté du design d’interface mondiale contribuait à créer des centaines de templates, icônes, ressources et autres effets pour faire briller nos maquettes web. Cette époque où le skeumorphisme et les effets graphiques richement travaillés étaient de mise, Photoshop restait mon meilleur allié.

Les bonnes ressources PSD des années 2010

Mobile et Responsive Design

Évidemment, avec le recul, il était parfois fastidieux de travailler rapidement avec un outil aussi riche, qui doit gérer des centaines de calques créant une lenteur parfois difficilement exploitable. Mais c’est surtout l’explosion du mobile qui est venu remettre en cause ces années de pratiques web bien cadrées.

Comment créer une maquette compréhensible par un développeur lorsqu’on lui livre un plan de travail d’une largueur fixe ? Comment faire pour créer des icônes qui ne seront pas pixélisées ? Comment être sûr que mes images seront optimisées pour le web ?

Toutes ces questions ont demandé aux designers de logiciels, dont Adobe, de créer de nouvelles fonctions directement dans ce sens. Au cours des années 2014-2015, des fonctions de dessin vectoriel plus poussées, différents plans de travail, l’insertion de faux texte de manière rapide et j’en passe ont été ajoutés dans Photoshop. Mais c’est réellement avec le projet Adobe Comet la même année que la machine d’un vrai outil pour le design UI et UX est lancée.

Les outils de design d’aujourd’hui

Sorti en fin 2016 en bêta, Adobe XD arrive plus tard sur le marché par rapport à des concurrents bien installés. Pour être honnête, le type de projets sur lesquels je travaillais à l’époque ne me demandaient pas de changer d’outils immédiatement.

Embarqué dans un flux de travail permanent, je continue à utiliser Photoshop « pour gagner du temps » comme je pouvais le dire à l’époque.

Toujours dans cette recherche d’amélioration continue, je teste tout de même Sketch sur différents projets ou encore Affinity Designer. Les process mis en place en interne ne permettent pas d’intégrer facilement ces outils dans un flux de collaboration efficace. Les autres designers de mon équipe travaillant avec les outils de la Creative Cloud pour du print, de la vidéo et du social media, convertir certains éléments réalisés avec d’autres outils devenait compliqué.

Après quelques essais de prise en main durant quelques mois, c’est en milieu d’année 2018, que je décide vraiment de me lancer totalement avec Adobe XD pour réaliser mes projets.

Pourquoi j’utilise Adobe XD pour créer les interfaces de mes projets :

Le besoin d’efficacité dans mon travail au quotidien m’a poussé à trouver de meilleurs outils. J’ai isolé 5 points précis qui font que j’utilise le logiciel au quotidien depuis 6 mois.

  1. Une interface minimale et efficace

    C’est ce qui frappe lors de la première ouverture du logiciel : l’UI proposée rappelle les autres produits Adobe mais dans un écrin vraiment minimaliste. Les calques et les symboles restent secondaires, au profit d’une fine barre d’outils sur la gauche de l’écran. Assez déconcertant au début, on s’y fait très rapidement à l’utilisation.

  2. Une rapidité d’utilisation redoutable

    Très important pour gagner en efficacité au quotidien, l’outil est vraiment rapide à l’utilisation. Pas de latence lors de zooms répétés, même avec des nombreux plans de travails. XD est avant tout un outil gérant du vectoriel, ce qui permet donc d’avoir un poids de fichier source ultra réduit.

    Ce n’est pas plus avec souffrance que je vais itérer mes projets comme cela pouvait l’être à une époque pas si lointaine… Ici tout est rapide. De plus, la fonction de Responsive Resize permet de gagner un temps fou en cas de modification de la taille de l’espace de travail.

  3. Ces fonctions d’animations et prototypage

    Composé de deux onglets principaux (Design et Prototype), le parcours utilisateur peut-être simulé très rapidement. Je gagne un temps fou grâce à la fonction d’animations automatique. Basé sur l’intelligence artificielle Adobe Sensei, l’outil va animer automatiquement une transition, un placement d’éléments ou encore une interaction.


  4. L’utilisation des bibliothèques et le partage sur le web

    Faire partie de la Creative Cloud s’avère être une richesse non négligeable pour XD. Travailler avec des bibliothèques communes permet de s’assurer d’utiliser les bons éléments et assets à jour, quelque soit le logiciel de la suite utilisé. La fonction de plus en plus complète de partage dans le Cloud améliore la collaboration à plusieurs sur un même fichier.

  5. L’environnement de plug-ins tiers

    L’ambition d’XD n’est pas de devenir un outil à tout faire, mais plutôt un outil flexible selon le type d’utilisation. Ouvert au développement de plug-in tiers, ils permettent à chacun de trouver comment booster son utilisation quotidienne.

Faire un choix dans cette bataille des outils

J’ai beaucoup de questions lorsque j’en parle d’XD autour de moi. On me demande souvent « pourquoi pas Sketch, Figma, Frame ou encore Invision Studio ? » Après avoir testé, il est évidement que certains logiciels concurrents possèdent des fonctions redoutables notamment en termes de rapidité d’exécution et d’animation.

Adoptés par des millions d’utilisateurs dans le monde, ils possèdent tous leurs propres particularités qui sauront répondre vos besoins. Pour vous aider à choisir, je vous renvoie à des articles de test complet comme celui-ci et ou encore celui-là.

Pour ma part, j’ai fais le choix d’inclure XD dans notre process de travail au quotidien pour les raisons invoquées au-dessus. D’après moi, Adobe aboutira le projet XD si son intégration au sein de la Creative Cloud continue d’évoluer dans le bon sens. Je n’ai pas non plus oublié mes fidèles compagnons Photoshop et Illustrator qui fonctionnent toujours à plein régime en complément de XD.

Photo par Mika Novo

En « work-in-progress » permanent, l’outil est mis à jour tous les mois, apportant son lot de nouveautés. Les fonctions développées tentent de répondre aux besoins des utilisateurs qui peuvent apporter les idée via Adobe XD User Voice. Véritablement importante dans le plan de développement du logiciel, cette plate-forme permet l’équipe de développement d’XD d’aller dans le bon sens.

La version actuelle est loin d’être parfaite et manque encore de certaines fonctionnalités comme la simulation des boutons dans les prototypes (hover), la gestion d’animation d’apparitions d’éléments au scroll par exemple (fade-in…) ou encore une interface noire (troll). Mais avec des mises à jour mensuelles, les évolutions vont vite, très vite…

Je vais donc continuer à suivre son évolution de prêt et m’adapter aux évolutions à venir. Affaire à suivre…

Et vous, avez-vous déjà testé Adobe XD ? Quel est votre outil de prédilection pour le design d’interface ?

Note : cet article n’est pas sponsorisé, il reflète mon retour d’expérience personnel dans le but d’en savoir plus sur les outils de design que vous utilisez.

7 commentaires

  • Mr Funky

    Personnellement j’ai fait passé mon équipe sur Figma, j’ai utilisé plusieurs fois Adobe XD notamment pour sa partie « animation automatique » qui est sympa parce que très rapide, mais recréer mes maquettes faites sur Figma dans XD m’a réellement convaincu du choix que j’avais fait.

  • David

    Ce qui est beau aujourd’hui c’est qu’on a plus un seul outil mais tout un tas d’outil a disposition pour faire des sites. Je pense que chacun va de plus en plus tendre à avoir son propre workflow là où tout le monde faisait du photoshop (qui c’est vrai en passant est une tanné pour faire les maquettes dès qu’on multiplie les écrans) il y a 10 ans.

    Perso j’ai vraiment du mal avec le modèle économique mensualisé d’adobe donc ce ne sera pas pour moi.

  • Cyrielle

    J’ai effectué exactement le même virage que toi il y a 1 an, moi qui bossais exclusivement sur photoshop avant, je ne regrette absolument pas, vu le gain de temps, cela me permet de ne pas être bloquée par les tâches fastidieuses et me concentrer sur d’autres points bien plus essentiels.
    Le fait que mon équipe travaille sur la suite adobe est aussi la raison pour laquelle je n’ai pas choisi sketch ou figma qui auraient sans doute compliqué ensuite nos échanges.
    Merci pour cet article !

  • Bonjour et merci pour ce post, je suis aussi designer web et j’utilise beaucoup XD pour mes prototypes.
    J’ai cependant une question sur ton processus de workflow, qu’utilisent les dev-front comme fichier ou plateforme pour l’intégration ?
    Le passage à ce genre d’outils est-ils pratique pour eux ?
    Merci pour ton retour 🙂

    • Bonjour Florian,

      Merci pour ton retour. Pour le moment, j’utilise la fonction du « partage pour le développement » pour travailler avec le front-end. Cela créé une page web avec toutes les infos nécessaire pour le dev front. Je fourni également les typos à part si besoin + parfois les images 🙂 Pour le moment j’ai eu des retours plutôt positifs, j’attends de voir sur des projets très conséquent avec un gros Design System.

      As-tu testé de ton côté ?

      • Philippe B

        Bonjour, je suis mon premier projet UI et je fais chauffer Adobe XD depuis des mois. De mon coté tout va bien, ma maquette marche super bien. Mais mon développeur, qui est lui aussi novice, ne sait pas comment utiliser les coordonnées absolues en pixel qu’on a avec « partage pour le développement » pour avoir quelque chose de responsive.
        Est-ce que tu as une idée? une piste, pour savoir quelles informations je dois lui transmettre pour l’aider au mieux?

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.