Pendant longtemps, Sketch était le meilleur outil pour un designer. Beaucoup ont utilisé Adobe Photoshop, qui présente un certain nombre d’inconvénients : un grand nombre d'outils inutiles et une interface complexe.
Adobe XD – est l’un des logiciels gratuits les plus populaires pour la conception d’UI / UX et la création de prototypes pour la conception mobile . Interface intuitive, tous les outils nécessaires, Adobe Creative Cloud.
Pour utiliser ce programme, vous n'avez pas besoin de connaître l'intégralité de la boîte à outils Adobe Photoshop et d'apprendre à l'utiliser, grâce à une leçon que vous pouvez ouvrir lorsque vous commencez à utiliser le programme.
Fenêtre initiale d'Adobe XD
Espace de travail du tutoriel Adobe XD
Le guide traitera des outils de base et des prototypes. Après avoir étudié la question:
"Wow! Pourquoi n'ai-je pas rencontré ce programme auparavant?"
1. Aperçu
Comme indiqué dans le manuel : cliquez sur le bouton de lecture pour ouvrir un aperçu de l'application. Une nouvelle fenêtre s'ouvrira affichant le premier écran de l'application ou du site.
Fenêtre d'aperçu de l'application Campvives
Aperçu vous permet de tester l’application en cliquant sur les boutons et en vous déplaçant d’un écran à l’autre. Si quelque chose a changé dans le fichier, l'aperçu sera mis à jour sans redémarrer.
2. Plans de travail
En sélectionnant l'outil artboard (touche «A»), vous pouvez créer un champ de travail manuellement ou sélectionner l'une des tailles dans le panneau de droite, ce qui est très pratique.
Espace de travail Adobe XD Design. Options de l’artboard
Les options du programme facilitent le déplacement, le changement de nom et la copie des plans de travail.
Menu de la palette de couleurs, à partir des options d'apparence
3. Grilles
Visualisation de la disposition et de la grille
4. Instructions / Manuels
Cette option est apparue assez récemment et a rendu le travail encore plus pratique. Les manuels peuvent être copiés et collés sur un autre plan de travail.
Travailler avec des instructions / manuels
5. Images
Interface pratique pour travailler avec des images d'arrière-plan. Pour créer l'arrière-plan du bloc, vous devez faire glisser l'image depuis l'ordinateur.
Masquage d'images et édition de formes
6. Répéter la grille
Cet outil vous permet de copier des éléments en double. Tels que des entrées de blog, des menus, des listes.
Grille extensible
Prototypes
XD a un mode de prototypage.
Chaque objet peut être associé à un écran ou à un élément d'écran différent. L'interface de prototypage vous permet de créer des graphiques simples ou des compteurs d’animation.
Poste d'ouverture
Connexion au menu de superposition et aperçu
Autres caractéristiques
Adobe XD vous permet d'exporter à partir d'Adobe Photoshop et Illustrator. Vous pouvez partager votre conception avec l'équipe, enregistrez-la sous une image .png ou .svg.
En conclusion, je voudrais dire qu’il n’y a aucune volonté de reprendre le travail sur les dessins dans Adobe Photoshop après l’apparition de XD en raison de la série d’avantages de ce programme. Le programme évolue rapidement et offre de grandes possibilités de travailler avec des formes et du texte.