Logiciel très coté chez les développeurs, designers et toute personne créative, Adobe XD permet de créer des maquettes de qualité sans coder la moindre ligne. Faisant partie de la suite Adobe, il se concentre principalement sur la conception d’interface utilisateur et de prototypes, la conception UX et la conception responsive web design.
Utiliser cet outil vous permet de gagner du temps et d’économiser de l’argent dans vos différents projets d’innovation. Si vous comptez l’ajouter à votre palette de designer, voici six choses que vous devez savoir pour compléter votre programme de formation à ce logiciel et optimiser ainsi son utilisation.
Les plans de travail
Adobe XD propose des plans de travail interactifs et pleins d’outils de conception modernes qui facilitent la réalisation des différentes maquettes. Vous avez également la possibilité de changer et d’ajouter des plans de travail quand vous voulez, et ce dans le cadre d’un même projet.
Pour ce faire, il suffit d’aller dans le panneau des outils et de sélectionner le plan de travail souhaité. Vous pouvez choisir le plan d’Iphone X ou d’un appareil mobile Android pour avoir une interface identique à ces supports. Adobe XD permet également de dessiner votre plan de travail, d’ajuster sa taille et de le redimensionner de manière personnalisée afin de l’adapter ainsi aux dimensions souhaitées.
Les options de résolution d’écran
Quand vous ouvrez votre logiciel, vous pouvez suivre un tutoriel complet pour maîtriser l’outil. Mais le plus important est que, dès l’écran d’accueil, vous avez le choix entre plusieurs résolutions d’écran différentes.
Image 2
Pixabay
Les différentes résolutions d’écran sur Adobe XD
Vous pouvez alors opter pour différentes tailles d’écran (Iphone, Ipad, navigateur, écran personnalisé, etc.). Libre à vous de choisir la résolution qui va le mieux avec la maquette que vous désirez entreprendre. Vous disposez également d’une sélection de kits d’interface utilisateur qui vous permet d’élargir vos champs de possibilités.
Le menu et la barre d’outils à disposition
A l’instar des autres logiciels de la suite Adobe comme Photoshop, le logiciel Adobe XD dispose d’un panel d’outils à destination des designers. Pour cela, il suffit d’aller sur la barre d’outils (à gauche de l’écran) et de sélectionner ceux qui vous intéressent : insertion de formes, lignes, stylo, texte, zoom, etc.
Dans la partie droite de la barre d’outils, vous avez la sélection des calques que vous créez au fur et à mesure de votre conception et des Assets qui regroupent le stock de vos couleurs, de styles et police de caractères, de symboles, etc.
Dans la barre haute du menu, du côté gauche de l’écran, vous pouvez accéder aux différents modèles de prototypes qui sont personnalisables à volonté afin de vous permettre de créer des plans de travail interactifs entre eux.
Du côté droit de l’écran, vous avez d’autres outils à disposition : le contrôleur de zoom, un aperçu de l’appareil et le panneau de propriétés.
L’option « Répéter la grille »
Dans le but de vous aider à gagner du temps, Adobe XD vous permet de répéter vos grilles et d’accélérer ainsi le processus de conception. Initialement, vous devrez dupliquer la composante que vous avez créée (forme, texte, symbole, etc.) plusieurs fois afin d’obtenir plusieurs copies d’un même élément.
Sur Adobe XD, il suffit d’aller sur le panneau de propriété et d’activer la commande « Répéter la grille ». Le logiciel vous dessinera des barres horizontales et verticales et d’un simple clic (glisser), vous pourrez créer plusieurs copies de votre élément de base. Si vous désirez ajuster l’espacement entre les éléments dupliqués, il suffit de faire un clic double sur la grille et d’étirer les zones de marge. Bien qu’elle soit amusante, cette option permet d’aller beaucoup plus vite lorsque vous devez créer des caractères similaires ou presque dans votre prototype.
Le redimensionnement actif
Étant un logiciel qui prône l’expérience utilisateur, Adobe XD vous permet de créer plusieurs éléments de conception et de les étendre de manière intelligente pour s’adapter à tout type d’appareils (mobile et desktop).
Lorsque vous créez un prototype pour le montrer à de futurs prospects, il est important que votre conception soit compatible et visible à la fois sur un écran d’ordinateur classique et sur les différents supports mobiles (tablette, IPhone, appareils Android, etc.). Ça serait dommage de rater ça, mais ne vous inquiétez pas, ce logiciel vous permet de concevoir de manière intelligente. Il suffit d’activer (si ce n’est pas activé par défaut) l’option « Redimensionnement actif » dans votre panneau de propriétés.
Le prototypage
Étant le logiciel numéro 1 pour le prototypage, Adobe XD propose une section dédiée à cet objectif. A partir de cet onglet, vous pouvez choisir parmi les multiples prototypes proposés et commencer à les personnaliser. Pour cela, il suffit de cliquer sur l’élément graphique que vous avez préparé et de le connecter (en le glissant) au prototype afin de définir le type de l’élément, la transition et des tas d’autres options.
N’oubliez pas qu’il est possible de prévisualiser votre design au fur et à mesure de vos modifications afin d’apporter les optimisations nécessaires. Voici même une petite vidéo de démonstration de ce que vous pouvez réaliser avec l’option « prototypage » sur Adobe XD.
Conclusion
Sans aucun doute, cet outil regorge d’options qui facilitent le travail des designers et simplifient toute approche d’innovation au sein d’une entreprise. Avec une bonne dose de motivation et d’inspiration et une formation complète, vous serez capable de maîtriser toutes les commandes d’Adobe XD et de créer de magnifiques maquettes.