49,00

Tuto Formation complète sur Adobe XD avec XD

49,00

  • Une formation vidéo de 9h13m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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 : 9h13m)

  • 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
    • 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
    • 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
    • Ombre transparence et modes de fusion 00:06:53
    • Sélection et panneau calques 00:06:54
    • Transformations 00:09:26
    • 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
    • Bibliothèques CC 00:05:10
    • Manipulation des images dans leur bloc 00:05:12
    • Masquer les images et les formes 00:06:14
    • Le texte 00:07:05
    • 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
    • Les défilements 00:05:54
  • Les actifs
    • 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
    • Lier les actifs 00:09:37
  • 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
    • 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
  • 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
  • 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:13:51
    • 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
  • Conclusion
    • Conclusion 00:00:44



Formateur : Emmanuel Correia

Emmanuel Correia a publié 19 tutoriels et obtenu une note moyenne de 4,9/5 sur 6 146 tutoriels vendus. Voir les autres formations de Emmanuel Correia

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de graphicaline laissé le 02/10/2020
    Bravo, pour ce tutoriel complet et bien expliqué sur Adobe XD. Les notions abordées sont clairs et précises. Également, merci à la réactivité du formateur qui a rectifié son oublie en nous fournissant le fichier manquant pour suivre cette formations au complet. Au plaisir de le suivre sur une nouvelle formation !
    "Merci ! Le fichier viens d'être ajouté, merci d'avoir soulever ce problème ! Emmanuel Correia "

  • 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 Bipbip59
    Bonjour, 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
accédez à plus de 1242 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données