Tutoriel Adobe XD : Design d'expérience

Langue: Allemand

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

Avec Adobe XD, vos designs d'applications et de sites web deviennent interactifs, sans nécessiter de programmation ! Transformez vos idées en prototypes interactifs que vous pouvez commenter immédiatement, partager avec d'autres et discuter davantage. Dans ce tutoriel Adobe XD de cinq heures de Stefan Riedl, vous apprendrez à utiliser le logiciel pour le design d'expérience et le prototypage - pas à pas et de manière aisée !

De l'idée au prototype : Comment créer des designs interactifs avec Adobe XD
Pour une prise en main facile : Apprenez à manipuler les zones de dessin, les couleurs, les kits d'interface utilisateur, et plus encore.
Prototypage et wireframing : comment relier vos planches à une expérience utilisateur.
Mettre en pratique: Appliquer ce que vous avez appris à travers deux projets d'exemple de manière ciblée
Pour une collaboration fluide : commentez et partagez vos prototypes avec les autres.
Travailler avec Adobe XD, par Stefan Riedl, résumé en 5 heures productives
Bonus : Tout ce qu'il faut savoir sur les nouveautés issues de la mise à jour d'Adobe XD 19.

Montre comment ton application et ton site web doivent fonctionner! - Apprends à utiliser Adobe XD avec le tutoriel, et tes designs sont immédiatement cliquables!

Détails

Utilisable avec:
Contenu: 5 h Formation vidéo
Licence: privée et commerciale Droits d'utilisation

Catégories

Design (Illustration, Mise en page & Impression)

Créé avec amour par:

Stefan Riedl

Exemples d'application

Ouvrir la galerie

Apprends à créer des designs UI et à les relier à des prototypes interactifs.
Ouvrir la galerie

Exemple : Découvrez comment créer des interfaces utilisateur pour les écrans de smartphones et les vues de bureau dans Adobe XD.
Ouvrir la galerie

Exemple : Plongez dans deux projets d'exemple pour une application concrète d'Adobe XD.

Tutoriel Adobe XD : Design d'expérience et prototypage

Gratuit

Tutoriel Adobe XD : 01 | Introduction

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

Adobe XD Tutoriel : 02 | UI & UX et designs de niveaux différents.

Adobe XD - Tutoriel : 02 | UI & UX et différents designs de niveaux

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!

Adobe XD Tutoriel : 03 | Le début, écran de démarrage et fonctionnalités disponibles

Adobe XD Tutoriel : 03 | Le démarrage, l'écran de démarrage et les fonctionnalités disponibles

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.

Adobe XD-Tutoriel : 04 | Créer des zones de dessin avec résolutions différentes

Adobe XD Tutoriel : 04 | Créer des zones de dessin avec des résolutions différentes

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.

Tutoriel Adobe XD : 05 | Paramètres de grille pour les colonnes et les grilles rectangulaires

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.

Adobe XD-Tutoriel : 06 | Préréglages utiles avec kits UI.

Adobe XD Tutoriel : 06 | Préréglages utiles avec kits d'interface utilisateur

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.

Tutoriel Adobe XD : 07 | Gestion des couleurs

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.

Tutoriel Adobe XD : 08 | Importation des assets

Tutoriel Adobe XD : 08 | Import d'actifs

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.

Adobe XD Tutoriel : 09 | Polices et typographie

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.

Adobe XD-Tutoriel : 10 | Formes et symboles

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.

Adobe XD-Tutoriel: 11 | Inspiration pour les designers

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.

Adobe XD Tutorial: 12 | Création d'un onepager, Partie 1 - Apprendre les techniques

Adobe XD-Tutoriel : 12 | Création d'une page unique, Partie 1 - Apprendre les techniques

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

Adobe XD Tutorial : 13 | Créer une page unique, Partie 2 - Grille de répétition

Adobe XD - Tutoriel : 13 | Créer une page unique, Partie 2 - Grille de répétition

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.

Adobe XD-Tutoriel : 14 | Créer une page unique, Partie 3 – Références et Footer

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.

Adobe XD-Tutoriel : 15 | Notions de base en prototypage et wireframing

Tutoriel Adobe XD : 15 | Principes de prototypage et de wireframing.

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.

Adobe XD-Tutorial: 16 | Créez un menu interactif pour ordinateurs de bureau

Adobe XD Tutorial: 16 | Créer un menu interactif pour ordinateurs de bureau

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.

Adobe XD-Tutoriel : 17 | Construire un menu interactif pour smartphones

Tutoriel Adobe XD : 17 | Création interactive de menu pour smartphones

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.

Tutoriel Adobe XD : 18 | La fonction Auto-Animate pour le prototypage interactif.

Adobe XD Tutoriel : 18 | La fonction Auto-Animate pour le prototypage interactif

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.

Adobe XD-Tutoriel : 19 | Création de prototype haute fidélité, Partie 1 - boutique en ligne mobile

Didaktische Adobe XD :19 | Créer un prototype haute-fidélité, Partie 1 - boutique en ligne mobile

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.

Did you mean: Adobe XD Tutoriel : 20 | Création d'un prototype haute fidélité, Partie 2 - Détails du produit

Adobe XD Tutoriel : 20 | Créer un prototype haute fidélité, Partie 2 – Détails du produit

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.

Adobe XD-Tutoriel : 21 | Création de prototype haute-fidélité, Partie 3 - Fonction overlay

Adobe XD Tutorial : 21 | Créer un prototype haute fidélité, Partie 3 - Fonction overlay

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

Adobe XD-Tutoriel: 22 | Création d'un prototype haute-fidélité, Partie 4 - Animation de fin

Adobe XD Tutoriel : 22 | Créer un prototype haute-fidélité, Partie 4 - Animation de clôture

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 Tutoriel : 23 | Contrôle vocal

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.

Adobe XD-Tutorial : 24 | Commentaires audio des aperçus

Adobe XD Tutorial: 24 | Commentaire audio des aperçus

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.

Tutoriel Adobe XD : 25 | Prévisualisation sur les appareils finaux via l'application.

Tutoriel Adobe XD : 25 | Affichage sur appareils via l'application

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.

Adobe XD tutoriel : 26 | Publier le projet avec les spécifications de design.

Adobe XD-Tutoriel : 26 | Publier un projet avec des spécifications de conception

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.

Nouveautés dans Adobe XD 19

Adobe XD-Tutoriel : 27 | Nouvelles fonctionnalités dans la version 19

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 !

Détails sur le contenu

Applique Adobe XD pour que tes designs soient compris

Commence le tutoriel et laisse-toi guider en cinq heures illustratives vers tes premiers designs interactifs Adobe XD. Ton formateur, Stefan Riedl, a en tête l'interface utilisateur, les fonctionnalités et le flux de travail pour utiliser le logiciel - et il a compilé de manière concise tout ce qui est essentiel pour toi.

Pourquoi tu es au bon endroit dans ce tutoriel Adobe XD

Que l'UX et l'UI soient encore nouveaux pour toi ou non - ce tutoriel Adobe XD s'adresse aussi bien aux débutants qu'aux personnes en reconversion. Les objectifs du tutoriel sont clairs : Apprends tout d'abord à connaître Adobe XD en tant que tel. Deuxièmement, découvre les bases du design d'expérience, du wireframing et du prototypage. Et enfin, acquiers les connaissances et les compétences pour présenter tes designs de manière interactive à l'avenir :

Parfait pour passer à Adobe XD : Utilise ce tutoriel pour passer rapidement d'un programme UX alternatif à Adobe XD.
Idéal pour commencer avec Adobe XD : Fais tes premiers pas dans le design d'expérience et crée directement tes propres interfaces utilisateur.
Meilleure collaboration en équipe : Apprends comment partager tes prototypes avec d'autres à l'aide de Adobe XD. Un énorme avantage pour ta collaboration avec des programmeurs et développeurs, par exemple !
Exploite pleinement le potentiel de la Creative Cloud : Comme Adobe Dimension CC, Adobe XD est aussi un programme assez récent. Essaie-le et explore les possibilités offertes par ton abonnement CC !

Les contenus : Interface et design d'expérience, wireframing et prototypage

Le tutoriel Adobe XD commence par les bases, t'emmène régulièrement dans des applications concrètes et te laisse avec la compétence de concevoir toi-même de manière interactive tes designs d'applications et de sites web à l'avenir.

Au départ, tu apprends à connaître Adobe XD de manière générale. Regarde avec ton formateur l'interface utilisateur et découvre ce qui est important dans l'utilisation des zones de dessin, des grilles, des couleurs, des ressources, des formes et des kits d'interface utilisateur disponibles. Ce sont ces éléments à partir desquels tu conçois tes designs. Pratique : Stefan Riedl crée dans le tutoriel le design d'une page unique, où toutes les bases sont présentées de manière concise.

Ensuite, tu t'attaques au deuxième grand thème d'Adobe XD - la liaison de tes designs. Avec le wireframing, tu définis ce qui devrait se passer dans l'application ou sur le site web lorsque les utilisateurs appuient sur un bouton, par exemple. Animations dynamiques incluses ! Cette partie est particulièrement importante pour les clients afin de comprendre rapidement comment se présente concrètement le flux d'une application. Ton formateur aborde à la fois la conception de menus pour les écrans de smartphones et pour les vues sur bureau, et termine cette section avec la création d'une maquette haute-fidélité basée sur un exemple de boutique.

Enfin, tu exploitat le véritable avantage de Adobe XD : tu visualises d'abord pour toi-même et ensuite pour les autres comment fonctionne ton design - comment il interagit avec l'utilisateur. Crée une prévisualisation commentée par toi-même. Ou : Partage ton design UX avec les parties prenantes du projet, afin qu'elles puissent tester et commenter ton prototype directement. Ainsi, vous atteindrez ensemble votre objectif beaucoup plus rapidement ! En outre, tu pourras visualiser et examiner ton prototype en direct sur ton smartphone ou tablette pour avoir une sensation très réaliste de l'application dans un environnement naturel.