Adobe XD-Tutoriel - Conception d'expérience et prototypage

Bienvenue au grand tutoriel Adobe XD. Dans cette introduction, je me présente comme ton formateur.

Quelle est la différence entre l'expérience utilisateur (UX) et l'interface utilisateur (UI) ? Quels types de design de niveau existent et à quoi sert Adobe XD le mieux ? La réponse se trouve ici!

La première fois que j'ai ouvert Adobe XD - et déjà de nombreuses possibilités se présentent, que l'on peut sélectionner. Dans cette vidéo, il y a un petite mise en forme pour Adobe XD, une vue d'ensemble du programme ainsi qu'une introduction à l'écran de démarrage de XD et de ses fonctionnalités.

Les calques d'art (artboards) peuvent être créés en un instant dans Adobe XD pour différentes résolutions et appareils. Les particularités à prendre en compte sont expliquées dans ce tutoriel.

Des paramètres de grille différents facilitent le placement propre d'éléments et d'objets les uns par rapport aux autres. Pour cela, nous disposons d'une grille rectangulaire et d'une répartition en colonnes pour les colonnes.

Google, Apple et Microsoft fournissent des kits d'UI pratiques pour un démarrage rapide. Ces maquettes préfabriquées nous aident énormément dans la conception ultérieure de prototypes pour différentes plateformes.

Les couleurs jouent un rôle extrêmement important dans presque tous les designs - dans cette vidéo, tu apprendras comment travailler avec les couleurs dans Adobe XD, comment les importer et quelles sont les sources pratiques pour collecter des harmonies de couleurs prêtes à l'emploi.

Il existe de nombreuses méthodes pour importer des ressources telles que des images, des fichiers, des documents texte, etc. dans Adobe XD. Dans cette vidéo, je présente quelques procédures. Cependant, XD faisant partie de la Creative Cloud d'Adobe, il est bien sûr possible de travailler de manière extrêmement confortable et pratique avec les bibliothèques.

Le thème des polices et de la typographie est un élément majeur de notre voyage à travers Adobe XD. Dans cette vidéo, tu apprendras comment gérer les polices de manière correcte et efficace.

Les formes peuvent être facilement importées dans Adobe XD ou créées elles-mêmes à l'aide de l'outil de tracé. Si un objet est utilisé plus de deux fois, il est recommandé de le cadrer comme symbole dans la liste des ressources.

Designer a beaucoup à voir avec l'inspiration et l'input extérieur. Cela inclut l'environnement analogique ainsi que le monde numérique. Ici, je présente quelques portails que j'aime visiter.

Commençons par un petit projet pratique. Dans ce tutoriel et les deux vidéos à venir, nous allons créer une page unique.

La grille de répétition est l'une des fonctionnalités les plus importantes d'Adobe XD. Elle nous aide à redimensionner et remplir individuellement des groupes d'objets créés une fois.

Dans la dernière partie de la conception de la page unique, nous nous occupons du pied de page et d'une section pour les références. Nous utilisons ici des fichiers SVG pratiques et nous apprenons à connaître d'autres techniques de design.

Dans cette leçon, nous nous occupons de la question de savoir comment les différents artboards peuvent être connectés de manière interactive. Les options de transition et les autres modifications que nous pouvons apporter au prototype seront clarifiées ici.

Chaque site web a besoin d'un point d'ancrage pour la navigation. Dans cette vidéo, nous nous concentrons uniquement sur la création d'une navigation principale dans l'en-tête et sur la connexion interactive entre elles.

Cette formation repose sur le chapitre précédent et montre comment nous adaptons le menu de bureau créé pour un smartphone. L'icône de Hamburger et les éléments du menu sont améliorés avec des animations intéressantes.

Un des outils les plus puissants pour une visualisation optimale est la fonction d'Auto-Animate d'Adobe XD. Dans cet exemple, j'explique comment vous pouvez adapter le principe de la fonction Auto-Animate de manière adaptative pour tous les scénarios possibles.

Dans les vidéos suivantes, nous apprenons à créer un prototype pour une boutique en ligne. Nous apprenons à créer des prototypes haute-fidélité visuellement attrayants à partir de simples ardoises. Partie 1 sur 4.

Dans la deuxième partie, nous nous occupons de la présentation des descriptions détaillées, intégrons des sliders pour les images et interconnectons les artboards entre eux.

La fonction de superposition pour le prototypage interactif nous offre des possibilités passionnantes, comme la capacité à afficher et à masquer directement des informations.

Un bon design d'expérience utilisateur donne toujours à l'utilisateur un retour sur l'état du système. Ce retour sera intégré dans une jolie animation à la fin du projet.

Adobe XD maîtrise également dans son processus de prototypage l'interaction par commande vocale. Les commandes verbales déclenchent donc des actions système que nous pouvons définir nous-mêmes. Je vais vous montrer comment cela fonctionne dans ce tutoriel.

Lors de la collaboration avec d'autres départements et personnes impliquées, le commentaire audio est une fonctionnalité précieuse pour expliquer de manière compréhensible l'état du projet.

Tester un prototype dans un environnement virtuel est une chose - le présenter en direct sur un appareil final en est une tout à fait différente. Et c'est précisément ce qui peut être facilement résolu avec Adobe XD, que ce soit via USB ou via une connexion à Creative Cloud. Pour ce faire, nous utilisons l'application Adobe XD disponible sur l'App Store.

Pendant la collaboration, il est indispensable de dialoguer avec d'autres services sur l'avancement du projet. À l'aide de la fonction de publication, le prototype peut être libéré pour que les évaluateurs, les développeurs et les clients aient des impressions visuelles du projet. C'est à ce moment-là que débute le cycle de correction entre les différentes divisions spécialisées pour finaliser le projet.

Adobe XD évolue comme un programme encore très jeune à chaque mise à jour : Dans cette vidéo, j'explique les nouveautés résultant du passage de la version 18 à la version 19, comment utiliser les fonctionnalités et dans quelles situations elles sont utiles. Cela inclut : les composants à la place des symboles, le redimensionnement responsive, les repères, l'outil polygone, plus d'options pour la mise en forme du texte et bien plus encore. Amusez-vous bien !