Formation Adobe XD : Design d'interface - Prototypages, mockups, wireframes

Durée 2 jours
Niveau Fondamental
Classe à distance
Possible

Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...

Référence AXDD
Éligible CPF Non

Adobe XD est un outil de conception et de prototypage d'interfaces web et mobiles. Intégré à l'abonnement Adobe Creative Cloud, Adobe XD permet notamment de créer de la profondeur et de la perspective, d'ajouter des animations, de travailler à plusieurs sur un même document ou encore d'enregistrer des ressources dans le cloud. Il est bien évidemment compatible avec Illustrator, Photoshop, After Effects ainsi qu'avec la bibliothèque Creative Cloud.

Cette formation Adobe XD vous apprend à maîtriser la conception d'interfaces interactives de sites Web et d'applications mobiles avec Adobe XD.

Objectif opérationnel :

Maîtriser la conception d'interfaces interactives de sites Web et d'applications mobiles.

Objectifs pédagogiques :

À l'issue de cette formation Adobe XD vous aurez acquis les connaissances et les compétences nécessaires pour :

  • Identifier les bonnes pratiques de conception d'interfaces
  • Créer des interfaces interactives de sites Web et d'applications mobiles
  • Réaliser des parcours de navigation répondant aux besoins des utilisateurs
  • Partager et tester des prototypes pour réaliser des interfaces fonctionnelles

Public :

Ce cours s'adresse aux webmasters, graphistes, directeurs artistiques, responsables de communication, chefs de projets, cadres, consultants, MOA, MOE, AMOA.

Prérequis :

Il est recommandé d'avoir une bonne connaissance de l'environnement web pour suivre cette formation Adobe XD. Une pratique courante d'un logiciel de dessin vectoriel et bitmap est également souhaitée.

Adobe XD

Introduction à Adobe XDQu'est-ce qu'Adobe XD ?
Les atouts et les enjeux du logiciel
Les logiciels phares de la création d'interface
Découvrir les nouveautés du logiciel Adobe XDLe prototypageLes étapes de conception
Les principes de l'Atomic DesignDécouvrir Adobe XDL'écran d'accueil
Les différentes zones de l'interface
Barre de menus et barre d'outils
Les panneaux de propriétés

Design d'interfaces web et d'applications avec Adobe XD

Les plans de travail et repèresCréer des plans de travail
Manipuler les plans de travail et les calques
Manipuler les grilles et les repèresLes formesCréer des formes simples
Créer des éléments vectoriels avec l'outil Plume
Importer des logos, icônes, illustrationsLes textesÉditer du texte
Importer des fichiers texte
Installer les plug-ins pour générer de la Data
Gérer les styles de texteLes imagesImporter des images
Créer des masques
Utiliser les plug-ins spécifiques d'imagesLes couleurs et les effetsUtiliser et gérer les couleurs
Créer des dégradés de couleurs
Appliquer des effets d'ombres / flousLa grille de répétition et défilementUtiliser et gérer une grille de répétition
Réaliser des contenus défilantsLes vidéos et les contenus animésImporter et incorporer des vidéos
Intégrer des animations de plug-ins LottieComposantsCréer des composants
Manipuler les instances
Créer des composants imbriqués
Créer des états multiples de composantsLibrairie et kits UICréer et éditer des styles de textes
Créer et éditer des styles de couleurs
Installer et utiliser des kits UITransformation des framesComprendre les principes du redimensionnement
Utiliser les contraintes automatiques et manuelles

Design d'un prototype interactif

PrototyperCréer les liens d'interactions entre frames
Découvrir les types d'interactions et d'animations
Utiliser les déclencheurs tactiles et vocaux
Appliquer les actions d'interactions (animation auto, lien hypertexte, lecture audio...)VisualiserPrévisualiser l'interface
Enregistrer une vidéo des interactions
Installer l'application Adobe XD
Tester le prototype en direct

Partage et exportation d'un fichier XD

PartagerCréer et configurer les liens de partage
Configurer les modes de partage
Visualiser le document sur le Cloud
Déposer des commentairesExporterPréparer les éléments pour l'exportation
Exporter les frames en PNG, JPEG, PDF...
Exporter les assets pour l'intégration via le Cloud
Exporter via le plug-in ZeplinOptimiser le processus de travailIdentifier les principaux plug-ins
Utiliser les librairies UI partagées
Définir une bonne convention de nommage
Organiser les composants et les styles
Collaborer en temps réel autour d'un prototype
Mémoriser les raccourcis principauxRéaliser un prototype de site Web ou d'application mobileRéaliser un prototype interactif, à partir d'un kit UI ou wireframe fourni
Organiser la librairie de styles et de composants
Préparer le fichier pour l'exportation des images vectorielles ou bitmap
Partager un fichier sécurisé pour un client et l'intégration
Date de mise à jour du programme : 14/05/2024

Ces formations peuvent aussi vous intéresser :

Figma : Concevoir des maquettes UX/UI à l'aide du logiciel Figma

- 2 jrs

  • Niveau : Fondamental
  • Référence : FIGM
1100 € HT
lieu
(4)

Penpot : Concevoir des maquettes UX/UI à l'aide du logiciel Penpot

- 2 jrs

  • Niveau : Fondamental
  • Référence : PENP
1590 € HT
lieu

Responsive Web Design

- 2 jrs

Enjeux, stratégies et bonnes pratiques de mise en œuvre du Responsive Web Design

  • Niveau : Intermédiaire
  • Référence : TRWE
En intra uniquement
lieu

Progressive Web App (PWA)

- 3 jrs

  • Niveau : Intermédiaire
  • Référence : TPWA
1650 € HT
lieu
> D'autres formations sur le même thème


Formations Informatique
et Management
en ligne à ce jour

+
Stagiaires dans nos salles
de cours sur
l'année

%
De participants satisfaits
ou très satisfaits de nos
formations


Formateurs experts
validés par
PLB