Maquettes web interactives
Le couteau suisse du webdesign. Mélangeant Illustrator, Photoshop et Indesign, XD est le logiciel qui concurrence Sketch. Et en plus il est gratuit.
Adobe s’est fait un nom depuis très longtemps dans le webdesign grâce à flash (devenu Animate), Dreamweaver, Photoshop, Illustrator ou encore InDesign (et de nombreux logiciels éphémères). Il manquait cependant une corde à l’arc de la firme au A rouge : un véritable logiciel pensé pour le webdesign. Apparu en 2016 pour concurrencer Sketch (sorti en 2010), Adobe XD est un logiciel spécialisé dans le design de sites web qui peut aussi bien servir à l’UI designer (esthétique du site) qu’à l’UX designer (agencement du site). Adobe XD a un avantage par rapport à Sketch : il est gratuit (mais payant quand il s’agit d’utiliser toutes les options proposées en rapport avec le créative cloud), ce qui permet à tous les collaborateurs de l’utiliser, qu’il s’agisse de l’UX/UI designer, du développeur, du chef de projet ou du client.
Adobe XD : la simplicité pour le webdesign avant tout
La première chose qui frappe quand on ouvre le logiciel, c’est la simplicité de son interface : il y a peu de fonctions, on ne garde que l‘essentiel. On pourrait penser qu’Adobe XD est une version simplifiée d’InDesign. Beaucoup plus intuitif dans son utilisation que ce dernier, il est cependant moins riche en effets. Cela se justifie par sa compatibilité avec l’intégration web : on fait une croix sur beaucoup d’effets, car ils ne peuvent s’appliquer naturellement à une interface web. Rien n’empêche cependant de créer/retoucher des images sur d’autres logiciels pour les intégrer ensuite en format JPEG, PNG ou SVG dans un projet Adobe Xd, le logiciel étant justement disposé à les accueillir telles quelles. En bref, un fichier Adobe XD a deux rôles : être la maquette du site et être intégré au site lui-même.
La conception d’une maquette XD se fait en deux parties, il y a tout d’abord la partie « design » qui comprend la création de l’interface du site web. On y intègre les polices, les formes, les couleurs, les icônes et les images, le tout organisé à la façon d’un vrai site internet. La création de l’interface est simple et malléable : on peut s’occuper en même temps de l’interface mobile, tablette et ordinateur, le tout avec de nombreux formats existants (par exemple IPhone 7, tablette Samsung, web 13 pouces…).
Comme la plupart des logiciels d’Adobe, XD possède un système de calques. Celui-ci se rapproche plus du système d’After Effect que celui d’InDesign avec son système de composants (un bloc d’éléments figés et réutilisable à souhait d’un simple clic) qui fait écho aux compositions d’After Effect.
Ce qu’on peut retenir d’Adobe XD après quelques heures d’utilisation, c’est que celui-ci est très compartimenté et demande une certaine rigueur au niveau de l’organisation sous peine de perdre le contrôle de son projet. Il existe cependant sur l’interface du logiciel un onglet permettant de ranger les couleurs, les composants et les caractères afin de pouvoir les modifier simultanément sur tout le projet. Ainsi, vous pouvez passer d’un code couleur rouge et vert à un code couleur bleu et jaune en quelques clics et cela affectera tous les éléments colorés du projet. Il en est de même pour la modification d’un composant ou d’une police de caractère.
Une fois la conception du design terminée, on peut passer à la partie « prototype » qui comprend l’agencement du site. La partie prototypage peut être vue comme l’assemblage d’un train électrique : on assemble le décor, les rails, les wagons et à la fin tout roule dans un circuit harmonieux. Il en est de même avec Adobe XD, une fois le design « terminé » (car les corrections finissent toujours par arriver) il est temps de le faire vivre, de lui donner une cohérence, d’en faire la véritable synthèse d’un site internet. Pour ce faire, Adobe XD propose une interface dédiée à la création de lien entre les différentes pages : ainsi nous pouvons démarrer la construction de notre circuit. La mise en place des liens est très intuitive et propose différentes options : on peut incruster une fenêtre « pop-up » au milieu de la page, changer de page avec une transition en défilement ou en opacité, faire des retours en arrière, faire apparaître une fenêtre quand on glisse le curseur sur un élément, laisser un élément fixe durant le défilement… Les choix ne sont pas nombreux mais on peut reproduire les principales interactions que l’on trouve sur un site web ordinaire, le seul élément manquant étant le système de saut de chapitre (pour le glossaire d’un long article, par exemple. Il y a bien évidemment un système de prévisualisation qui fonctionne en temps réel et qui permet de voir par soi-même la maquette évoluer.
Adobe XD : une arme fatale du webdesign
Une fois ces deux étapes terminées, le fichier XD est prêt à l’emploi et devient alors un véritable couteau suisse.
En premier lieu, on peut le partager sur internet, la seule condition obligatoire est que les destinataires aient un compte Adobe. Le partage se fait en lien public ou privé et ce avec trois paramètres distincts.
La première option est « partager pour modifier », elle permet de partager le projet à l’état brut afin que le récepteur puisse directement modifier le projet, celui-ci doit cependant avoir Adobe XD sur son ordinateur mais comme je l’ai écrit plus haut, il suffit de le télécharger gratuitement depuis le créative cloud. Ainsi il devient très facile d’organiser un projet collaboratif et c’est surement pour cela qu’Adobe XD est aussi épuré. En effet, l’application ne propose que peu d’options et peu de paramètres, ce qui évite les problèmes de lecture quand le fichier source passe d’un ordinateur à un autre.
La seconde option est « partager pour révision », il s’agit de la version qui sera envoyée au client et au chef de projet si celui-ci ne souhaite pas s’attarder sur Adobe XD. Ce mode de partage permet d’envoyer aux destinataires une démo du site avec toutes les interactions prédéfinies lors de la création du projet Adobe XD, ils ont donc accès au « site avant le site ». Le fichier est directement sauvegardé sur l’Adobe Créative Cloud, ce qui permet à n’importe quel utilisateur ayant créé un compte Adobe d’avoir accès à la démo et de pouvoir y mettre des annotations : c’est un gain de temps et d’ergonomie phénoménal.
La troisième option est « partager pour développement », il s’agit de la version qui sera envoyée au développeur. Là aussi, un simple compte Adobe suffit au destinataire pour ouvrir le fichier. Ce mode de partage est particulièrement intéressant car il permet au développeur de télécharger toutes les images du projet, mais également d’avoir accès à tous les détails comme les polices utilisées, les codes couleur et également aux proportions exactes de tous les blocs qui constituent la maquette. Il sera d’ailleurs conseillé lors de cette étape d’envoyer au développeur la version démo (partager pour révision) afin qu’il puisse aussi tenir compte des types d’animation de changement de pages ainsi que des éléments fixes lors du défilement. Ce système de partage est d’une utilité capitale car il permet au développeur de gagner beaucoup de temps et d’être plus sûr de lui quant à la transposition de la maquette sur le site web.
Mais Adobe Xd ne s’arrête pas là, il est également possible d’enregistrer directement en vidéo notre projet lors de l’ouverture de la fenêtre de prévisualisation. On peut donc enregistrer proprement une démo du site avec un chemin défini, ce qui est très utile lorsque la maquette n’est pas encore complète et que l’on souhaite malgré tout envoyer quelque chose d’attractif au destinataire tout en masquant « les trous ». On peut également s’en servir pour faire une démo vidéo du site avec le chemin « idéal » à suivre pour l’usager. On a aussi la possibilité d’aller encore plus loin dans le rendu vidéo en important le projet Adobe XD dans After Effect. Il sera alors possible de faire un montage plus poussé de la démo du site internet en y intégrant du contenu animé (vidéos, gifs, animations html…) et en y ajoutant des effets esthétiques.
Pour conclure, Adobe XD est un logiciel qui met en avant deux facultés que l’on retrouve difficilement sur les autres logiciels graphiques d’Adobe, à savoir l’intuitivité et le partage. Quand la plupart des logiciels de création graphique d’Adobe demandent un apprentissage assez sérieux pour être utilisés à bon escient et dont les options de partage se retrouvent limitées, Adobe XD est accessible à tous. Malgré sa concurrence avec Sketch, Invision et Figma, Adobe XD a frappé un grand coup et évolue à vitesse grand V. Adobe XD est donc en passe de devenir le logiciel de référence pour l’UI/UX design.
(Source : ouicom)
Les top fonctionnalités
(liste complète à ce lien)
Composants
Créez des éléments de design réutilisables dans le même document XD ou dans plusieurs documents. Propagez les modifications à partir du composant principal à toutes les instances et remplacez les propriétés d’une instance particulière.
États
Évitez de répéter deux fois le même travail et, pour mieux vous faire comprendre, créez des variantes d’un composant correspondant à différents types d'interactions (survol, clic, désactivé et réussite).
Grille de répétition
Sélectionnez un élément de design et dupliquez-le rapidement, autant de fois que nécessaire. Mettez à jour un élément pour modifier toute la grille, ajustez la marge entre les éléments et déposez un fichier .TXT pour importer des données dans votre grille.
Redimensionnement réactif
Redimensionnez facilement des groupes d’objets ou de composants pour différents formats d’écran, tout en conservant l’échelle et la position relative des objets.
Intégration d’Adobe Fonts
Finis les problèmes de polices manquantes. Le service Adobe Fonts s’active automatiquement à l’ouverture d’un document XD.
Cocréation
Intervenez à plusieurs sur le même document, au même moment et évitez ainsi d'effectuer deux fois le même travail. Sachez exactement sur quels éléments du document les autres sont en train de travailler.
Historique du document
Suivez l’évolution d’un design. XD procède à des enregistrements automatiques au fur et à mesure de votre travail en vous permettant de revenir aux versions précédentes. Définissez des versions de référence pour conserver l’accès aux étapes essentielles du processus de design.
Partage
Créez des liens à partager pour recueillir des commentaires sur vos designs ou intégrez-les sur Behance ou une page web. Les réviseurs peuvent formuler des commentaires directement sur vos prototypes depuis le web ou un appareil mobile.
Partage pour développement
Envoyez aux développeurs un lien vers les spécifications de design qui définissent l’ordre et le flux des plans de travail, les actifs téléchargeables, les couleurs, les styles de caractère et les mesures, ainsi que les extraits de code CSS que les développeurs peuvent copier dans leur base de code.
Invitation
Invitez d’autres designers à collaborer sur un document. Avec XD, il est facile de s’assurer que chacun ait accès à la dernière version.
Choisissez de restreindre l’accès à vos projets partagés en envoyant des invitations privées aux parties prenantes de votre choix. Contrôlez qui révise et commente les prototypes, et qui a accès aux spécifications de design.
Documents en ligne
Enregistrez votre travail sous forme de document cloud pour le partager rapidement avec vos collaborateurs et l’utiliser comme point de référence unique. XD actualise automatiquement les documents en ligne, ce qui vous évite de perdre votre travail.
Enregistrement de l'aperçu
Tout en cliquant dans votre prévisualisation, enregistrez un fichier MP4 à partager avec votre équipe ou des parties prenantes. (macOS uniquement)