Designer et concevoir ses projets web et mobiles avec Adobe XD

Cela n’aura échappé à personne, les sites internet et les applications mobiles n’ont cessé de se multiplier ces dernières années. A tel point qu’il est aujourd’hui devenu presque indispensable pour une entreprise d’assurer sa présence sur la toile même si elle n’a pas de lien direct avec le numérique et que ce dernier ne constitue pas à proprement parler un canal de distribution de ses produits ou de ses services. Un site internet est a minima un moyen de présenter sa structure et de conserver un lien permanent avec ses clients. Pour les professionnels ayant la possibilité de distribuer leurs produits en ligne ou ceux qui proposent un service en rapport plus ou moins direct avec le numérique, il peut même s’avérer intéressant d’étendre son impact auprès de ses clients par l’intermédiaire d’une application mobile, améliorant ainsi la proximité avec eux.

Seulement voilà, développer un site web et une application mobile ne font pas nécessairement partie des domaines de compétences de toutes les entreprises qui en auraient besoin. C’est la raison pour laquelle des professionnels existent, dont les agences de design par exemple, pour aider tous ceux qui auraient la nécessité de développer un tel projet. Mais que vous soyez une agence qui doit respecter les volontés de son client ou que vous souhaitiez passer par une telle agence pour réaliser votre projet, il va vous falloir dans tous les cas passer par la case design et élaboration d’un prototype qui devra, le cas échéant, être validé par des décideurs. Il en est souvent de même dans une structure importante disposant d’un service dédié. L’important est donc d’accélérer ces phases afin de s’assurer un gain de temps maximal et un excellent niveau de réactivité. Alors, si l’on peut concevoir une maquette de site web ou d’application mobile qui ressemblera de très près au projet final sans avoir à créer une ligne de code ni s’octroyer les services d’un développeur cela devrait pouvoir répondre à ces exigences. Voyons ce que propose Adobe XD…

Les étapes de la conception d’un projet web ou mobile

Avant d’évoquer à quel niveau Adobe XD peut servir tous ceux qui souhaitent rapidement concevoir l’interface et les interactions utilisateur dans un projet web ou mobile, attardons-nous sur les étapes de conception d’un tel projet. En fait, on en dénombre deux principales que sont le design et le prototypage. Nous omettrons volontairement ici de détailler la dernière, la phase de développement, qui ne fait pas partie des fonctionnalités proposées par Adobe XD. Nous pouvons néanmoins préciser qu’elle consiste à concevoir le code du site web ou de l’application afin d’assurer par exemple les échanges avec une base de données, l’intégralité du fonctionnement logique et de procéder à l’intégration des visuels et des animations qui les lient dans le but de générer un produit fini qu’il sera possible de mettre en ligne et distribuer.

Mais revenons à nos deux premières phases… Le design tout d’abord consiste à concevoir l’interface graphique du projet dans laquelle on retrouvera les images, les logos, les encarts ou encore les boutons en gardant pour objectif de proposer une expérience utilisateur optimale (consultez notre article L’UX Design pour en savoir plus). C’est à ce moment-là que l’on conçoit les composants de l’interface et qu’on les place sur chacune des pages.

Ensuite, lorsque l’on a conçu l’ensemble des vues de notre site internet ou de notre application, il est important de définir et mettre en place les liens qui les lient entre elles. En d’autres termes définir quelle sera la première page, par quelles interactions il est possible d’accéder aux autres vues et, éventuellement, à quoi ressemble les transitions entre chacune d’entre elles, notamment pour les applications mobiles. Cette phase s’appelle le prototypage. L’idée est ici d’être capable de présenter à un client ou à un service dédié dans une organisation un projet fonctionnel, extrêmement proche du rendu final, sans avoir à réaliser le développement, permettant ainsi aux designers de pouvoir réaliser la maquette eux-mêmes plus rapidement et surtout de pouvoir apporter plus rapidement des modifications en fonctions des remarques récoltées lors des présentations du projet.

Alors Adobe XD, c’est quoi ?

Comme vous l’aurez compris, Adobe XD est donc un outil de design et de prototypage de sites internet et d’applications web et mobiles. Il est destiné à être le premier outil utilisé lors de l’élaboration d’un projet de ce type afin de pouvoir le présenter et ce avant même de commencer le développement qui aboutira à une diffusion. Adobe XD est particulièrement recommandé pour la création de wireframes, d’icônes ou de composants graphiques et permet d’incruster des menus, des boîtes de dialogue ou encore des claviers virtuels pour que vos conceptions soient les plus proches possible du rendu définitif. Il vous permet de simuler les interactions avec un écran tactile, la saisie au clavier mais également des fonctions de commande vocale.

Adobe XD est disponible pour votre ordinateur, qu’il fonctionne sous Windows ou macOS et fait partie de la suite logicielle Adobe Creative Cloud (consultez notre article La suite Adobe Creative Cloud pour en savoir plus). Il existe également en formule individuelle sous deux versions différentes vous permettant de concevoir un nombre illimité de projets, de bénéficier également en illimité des fonctionnalités de partage et disposant chacune de 100 Go de stockage dans le Cloud. La seconde version, dédiée aux organisations plus importantes, vous offre une assistance technique et des outils de prise en main en complément. Avec Adobe XD, vous bénéficiez pour vos projets d’un workflow non destructif, ce qui signifie que vous pourrez profiter d’une fonction d’enregistrement automatique avec conservation des sauvegardes passées, vous permettant de retrouver quand vous le souhaitez une version antérieure de votre projet. Vous pouvez procéder à cet enregistrement directement dans le Cloud et y mettre à jour votre travail.

Adobe XD pourrait être présenté ainsi… il s’agit d’une version simplifiée d’un logiciel de traitement d’image et de design comme peuvent l’être Adobe Photoshop ou encore Adobe Illustrator. Il fonctionne d’ailleurs parfaitement avec eux, vous offrant par exemple la possibilité d’importer des visuels sur lesquels vous avez travaillé avec Adobe Photoshop mais aussi de les modifier depuis ce dernier et de vous assurer que les changements seront bien appliqués à votre projet développé sur Adobe XD. En revanche, il se différencie de Photoshop ou Illustrator par une interface simplifiée ne vous proposant que les outils dont vous avez besoin afin de réaliser le design de votre site ou application.

Comment se passe le développement d’un projet sous Adobe XD ?

Prenons les choses dans l’ordre… Lorsque vous ouvrez votre logiciel, vous vous trouvez face à un écran qui vous propose de faire votre choix parmi différents formats de visuels. Vous pourrez par exemple choisir un format d’écran qui correspond à celui d’un ordinateur pour un projet web ou un format tablette ou smartphone pour un projet mobile. Une fois ceci fait vous rentrez dans l’interface du logiciel. Vous pouvez alors commencer à travailler sur votre design. Là vous retrouverez les outils les plus courants dont l’intégration de formes simples comme un rectangle par exemple pour positionner un en-tête ou une barre de recherche. Mais Adobe XD c’est bien plus que ça, avec notamment la possibilité directement de faire le choix d’une palette de couleurs en fonction de votre charte graphique. Dès lors que vos couleurs sont choisies, vous n’aurez plus qu’à les sélectionner pour les attribuer à vos éléments graphiques. Et l’avantage est ici considérable puisque non seulement vous pouvez très rapidement intégrer vos couleurs dans votre design mais si vous décidez par la suite de supprimer l’une d’entre elles afin de la remplacer par une autre cela entrainera de manière automatique le remplacement de cette couleur par la nouvelle sur l’ensemble de vos vues. Si vous avez besoin d’aide pour disposer vos éléments avec une grande précision vous pourrez mettre en place une grille. En choisissant les marges, le nombre de lignes ou encore le nombre de colonnes, aligner des éléments de design devient un jeu d’enfant.

Vous souhaitez pouvoir facilement dupliquer des éléments graphiques ? Aucun problème. Avec l’outil grille de répétition applicable à un objet, vous pourrez sans aucun souci le répliquer autant de fois que vous le souhaitez à la verticale ou à l’horizontale et ce en choisissant par exemple la marge qui séparera chacune de ces copies. Vous pourrez alors apporter des modifications une seule fois puisqu’elles se répercuteront automatiquement sur la totalité de vos copies, vous garantissant une parfaite cohérence dans votre design et surtout un gain de temps considérable. L’insertion d’images vous est également simplifiée puisque le logiciel vous permet d’adapter leur taille en fonction de l’espace disponible dans un widget, une forme ou un encart par exemple. Toujours en ce qui concerne la conception, Adobe XD vous offre la possibilité de rendre fixe certains éléments de design comme une barre de menu, y compris lorsque votre page permet à l’utilisateur de faire défiler du contenu, et ce toujours dans un souci de rendu visuel optimal avant développement. La fonction de mise en page d’après le contenu vous facilite la vie elle aussi en tenant compte des composants graphiques et des relations qui les lient afin de toujours effectuer les ajustements qui conservent les proportions à chacune de vos modifications. Vous pouvez effectuer un redimensionnement pour adapter votre design à différentes tailles d’écran par exemple, et ce en un nombre minimal de manipulations. Une fois que vous avez terminé une vue, Adobe XD vous permet de la dupliquer ou d’en créer une nouvelle à partir de rien pour la conception des suivantes.

Et lorsque nous avons terminé de concevoir l’ensemble des vues de notre projet, comment pouvons-nous rendre leur consultation réaliste ? Là encore, Adobe XD est fait pour ça en vous permettant de créer des liens entre chacune de vos vues. Pour cela rien de plus simple… Vous pouvez rendre une vue entière ou, au contraire, un seul élément cliquable et définir un lien qui vous amènera directement, à la suite de cette interaction, sur la vue de votre choix. D’autres outils de personnalisation s’offrent alors à vous comme par exemple la possibilité de choisir l’action qui va déclencher le changement de page mais également le type de transition. Par exemple, une transition en fondu déclenchée par un appui ou un clic sur un bouton. Mais Adobe XD peut également, en fonction des plans de travail, vous générer automatiquement des animations optimisées par exemple lorsque ces derniers ne sont pas de la même taille. Vous pourrez également pousser encore plus loin le niveau de personnalisation de ces animations en exportant un projet vers le logiciel de motion design Adobe After Effects et en les modifiant directement par l’intermédiaire de ce dernier. Si vous souhaitez que vos éléments graphiques changent d’apparence lors d’une interaction avec vos utilisateurs, il est aussi possible de le prévoir, par exemple en changeant l’opacité d’un bouton lorsque celui-ci est cliqué.

Ayez un aperçu de quelques-unes des fonctionnalités que nous avons évoquées en visionnant la vidéo ci-dessous…