Cette série de tutos en vidéo est une formation complète sur le fonctionnement du logiciel Adobe XD.
Ce n’est pas un cours sur le web design ou le design d’applications, bien que des notions y soient évidements évoquées notamment lors de la réalisation d’une partie d’une application à la fin de la partie théorique.
Pré-requis pour suivre ce cours dans de bonnes conditions
Cette formation concerne à la fois les débutants et les initiés.
Il est préférable au préalable, mais pas nécessaire d’avoir des notions en web design ou en design d’application. £
Une connaissance du système Adobe sera la bienvenue mais là aussi ce n’est pas un pré-requis obligatoire.
Adobe XD permet la création et le prototypage de design d'interfaces utilisateur pour les sites web et les applications mobiles. Il permet aussi le partage de ces prototypes avec les parties prenantes et les équipes de développement.
Xd est devenu tellement pratique qu’il peut aussi servir de logiciel de mise en page pour des petits projets. Il peut aussi servir à créer des présentations de document interactifs.
Xd est un logiciel qui est mis à jour tous les mois, la dernière version utilisée est la version XD 32, mais comme XD dispose d’une version gratuite, vous pourrez facilement mettre à jour votre version si vous n’avez pas la même que moi.
Au programme de cette formation Adobe XD Complète
Plus de 9h de formation 100% à distance ! La formation sera également mise à jour en fonction des prochaines nouveautés ajoutées.
Voici en attendant, les notions couvertes dans ce cours Adobe XD :
- Nous aborderons l’ensemble des fonctionnalités du logiciels, d’abord celles du module Design c’est à dire la partie création à proprement parler.
- Nous verrons ensuite comment réaliser des prototypes en créant des interactions
- Puis nous aborderons le thème du partage en ligne des prototypes.
- Pour réaliser nos exercices pratiques, des fichiers sources vous seront bien évidement fournis.
A la fin de cette formation vous saurez utiliser Adobe XD ce qui vous permettra de réaliser vos propres Designs et prototypes.
Vous saurez aussi partager ces prototypes avec les parties prenantes et avec votre équipe de développement !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Table des matières de cette formation XD (durée : 9h58m)
-
Introduction
- Introduction gratuit 00:02:25
- Présentation de l'exercice gratuit 00:00:35
- Installation d'XD gratuit 00:02:36
- Page d'accueil 00:03:01
- Interface d'XD 00:06:54
- Menu principal PC (Version 38 Mars 2021) 00:04:05
- Navigation dans un document gratuit 00:03:50
-
Module design
- Création et manipulation des plans de travail 00:09:48
- Nouveaux formats gratuit 00:01:23
- Nouveaux formats (XD 47 Janvier 2022) 00:00:29
- Grilles et repères dans les plans de travail 00:09:58
- Couleur de fond des plans de travail 00:03:13
- Sauvegardes 00:04:10
- Création des objets primitifs gratuit 00:07:30
- L'outil plume 00:08:15
- Couleurs fond et contour 00:07:47
- Vectoriser le contour (XD 41) 00:04:01
- Dégradé angulaire (XD 41) 00:02:31
- Ombre transparence et modes de fusion 00:06:53
- Ombres internes (XD 41) 00:05:23
- Sélection et panneau calques 00:06:54
- Transformations 00:09:26
- Transformations 3D (Mise à Jour Octobre 2020) 00:02:34
- Copier et Coller 00:04:04
- Création et manipulation des groupes 00:11:48
- Aspect dans les groupes et Dissocier 00:02:44
- Les Opérations Booléennes 00:11:30
- Les Alignements 00:08:46
- Importations et ouvertures 00:12:21
- Modifications dans Photoshop 00:02:30
- Manipulation des images dans leur bloc 00:05:12
- Masquer les images et les formes 00:06:14
- Le texte 00:07:05
- Hauteur Automatique pour le texte (Mise à Jour Octobre 2020) 00:01:50
- Grille de répétition 1/2 00:08:56
- Grille de répétition 2/2 00:04:47
- Les kits d'interface utilisateur 00:06:59
- Redimensionnement réactif 1/2 00:08:24
- Redimensionnement réactif 2/2 00:06:58
- Les marges et les piles 1/2 00:06:20
- Les marges et les piles 2/2 00:03:22
- Hauteur automatique et Piles (Mise à Jour Octobre 2020) 00:02:39
- Les défilements 00:05:54
- Importation de vidéos (XD 45 - Octobre 2021) 00:04:43
- Importation d'animations vectorielles de type Lottie (XD 45 - Octobre 2021) 00:04:51
- Animations simultanées (XD 47 Janvier 2022) 00:01:00
-
Les actifs
- Le panneau Bibliothèques (Mise à Jour Octobre 2020) 00:08:07
- Couleurs dans les actifs 00:08:24
- Les styles de caractères 00:06:10
- Les composants 1/3 00:09:54
- Les composants 2/3 00:06:10
- Les composants 3/3 00:05:04
- Composants imbriqués (Mise à Jour Octobre 2020) 00:01:43
- Survol des composants imbriqués (Mise à Jour Octobre 2020) 00:01:50
- Etat de bascule (mise à jour XD40) 00:03:22
- Faire des groupes (XD 45 - Octobre 2021) 00:00:21
-
Exportations
- Exporter dans After Effects 00:00:49
- Exporter 00:13:26
-
Plug-ins
- Plug_ins installation et gestion 00:06:05
- Artboardplus, Calendar et Lorem_Ipsum 00:04:15
- UnDraw et Stark 00:04:59
- UI Faces et Repetor 00:04:24
-
Module prototype
- Interactions basiques 1/2 00:11:28
- Interactions basiques 2/2 00:04:52
- Onglet Flux 00:01:59
- Position de défilement fixe 00:04:40
- Défiler pour 00:03:50
- Les incrustations 00:07:09
- Lecture audio 00:01:25
- Déclencheur voix 00:02:27
- Plusieurs déclencheurs 00:08:57
- Plusieurs actions 00:03:22
- Animations automatiques 00:07:19
- Animation des contours et les pointillés 00:02:57
- Délais 00:05:56
- Touches et manettes de jeu 00:04:02
- Etat de survol 00:04:15
- Lier les états de composants 00:07:08
- Micro interactions 00:06:36
- Créer un Menu déroulant avec des composants 00:13:39
- Faire glisser et animation automatique 00:08:38
- Carrousel faire glisser et animation automatique 00:06:05
- Carrousel avec des composants 00:14:22
- Flux de travail multiples 00:02:37
- Hyperliens (XD 47 Janvier 2022) 00:01:18
-
Partager
- Principes de base du partage 00:04:55
- Partage pour examen de la conception 00:04:04
- Sécuriser un partage 00:03:28
- Partager pour l'équipe de développement 00:04:16
- Partager pour un test utilisateur 00:01:32
- Co-création 00:05:48
- Partager sur Behance.net (XD 45 - Octobre 2021) 00:00:20
-
Exercice
- Exercice introduction - 1/13 00:02:50
- Création de la première page et vérification des actifs - 2/13 00:07:45
- Création de la barre de menu principale - 3/13 00:13:31
- Menu du bas - 4/13 00:14:41
- Design de la page principales - 5/13 00:09:06
- Design de la page "Les plus vus" - 6/13 00:03:17
- Design de la page d'un spot - 7/13 00:05:33
- Design de la page de la carte - 8/13 00:06:33
- Création du carrousel - 9/13 00:14:23
- Création de la zone des commentaires - 10/13 00:04:32
- Création de la zone de saisie des commentaires - 11/13 00:03:20
- Prototypage - 12/13 00:05:35
- Animation automatique - 13/13 00:04:33
- Faire un cœur avec des micros interactions ((XD 45 - Octobre 2021)) 00:04:32
-
Conclusion
- Conclusion 00:00:44
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Emmanuel Correia
-
J'ai apprécié la formation : la voix ne fatigue pas l'apprenant, le rythme m'a convenu, et je suis arrivé au bout sans effort, en ayant l'impression d'avoir compris et ne pas avoir laissé de zones d'ombres. L'exercice final, expliqué, permet d'appliquer la formation pour construire une application déjà évoluée. Je recommande !
-
J'ai apprécié car il va pas trop vite et explique clairement. merci
-
La formation très complète et précise, le potentiel de l'application est bien expliqué et pas seulement énoncé. Je recommande!
-
Avec quelle version de logiciel ce tuto est-il compatible ?XD
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Bonjour, je souhaite savoir si dans ce tuto qui a l'air très complet sur XD une fois que nus avons créé une appli ou un site.
Ma question est donc est-ce que vous nous apprenez aussi comment faire pour le traduire directement en html et CSS pour mettre en ligne.
Car jusqu'à présent j'ai beau lire la documentation XD voir les vidéo de démo d'Adobe, je ne comprend pas comment faire, je suis débutant sur ce logiciel, mais ayant pas mal de notions sur les logiciels Photoshop, illustrator, Indesign, After Effect, Dreamweaver ...
je souhaite savoir si une fois le projet réalisé il faut le refaire sur Dreamweaver ou si on peut directement le mettre en ligne.
Merci d'avance pour votre réponse.
Cordialement
Bipbip59Bonjour,
Merci pour votre question.
Adobe Xd ne sert qu'au Design et au Prototypage. Il ne génère pas de code (sauf un peu de CSS).
Il faut donc coder ensuite le design pour qu'il soit opérationnel en ligne.
Il existe cependant une appli qui permet de convertir un Design fait dans XD en code. Ce plug-ins se nomme Anima. Je ne l'ai pas personnellement essayer.
Bien cordialement.
Emmanuel Correia
note moyenne
avis laissés