Accueil › Formations › Digital & Multimédia › Les essentiels de la créa › UX Design et Design Thinking ou le Design centré utilisateur › Adobe XD - Design d'interface - Prototypages, mockups, wireframes
Objectifs pédagogiques / Compétences visées
- 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.
Niveau requis
Avoir une bonne connaissance de l'environnement Web. Avoir la pratique courante d'un logiciel de dessin vectoriel et bitmap est souhaitée.
Public concerné
Webmasters, graphistes, directeurs artistiques, responsables de communication, chefs de projets, cadres, consultants, MOA, MOE, AMOA.
Programme
Introduction
- Qu'est-ce qu'Adobe XD ?
- Les atouts et les enjeux du logiciel
Le prototypage
- Les étapes de conception
- Le design d'interface
- Le design atomique
Découvrir l'interface d'Adobe XD
- L'écran d'accueil
- Barre de menus et barre d'outils
- Les panneaux de propriétés
Les plans de travail et repères
- Ajouter et gérer les plans de travail
- Manipuler les grilles et les repères
Les formes
- Créer des formes simples
- Créer des éléments vectoriels avec l'outil Plume
- Créer une icône
Les textes
- Saisir du texte
- Importer des fichiers textes
- Gérer les styles de texte
Les images
- Importer des images
- Créer des masques
Les couleurs
- Utiliser et gérer les couleurs
- Créer des dégradés de couleurs
- Générer des couleurs
La grille de répétition et défilement
- Utiliser et gérer une grille de répétition
- Réaliser des contenus défilants
Réaliser un écran d'accueil d'application mobile
- Conception d'une version papier ou maquette filaire détaillée
- Réalisation de l'interface sous Adobe XD
Composants
- Créer et manipuler des composants simples
- Ajouter des composants imbriqués
- Créer des états multiples de composants
Librairie et kits UI
- Propriétés partagées et communes
- Redimensionnement réactif des composants
- Sélectionner et utiliser des kits UI
- Créer deux écrans d'application mobile (connexion / inscription)
Transformation 3D
- Créer des contenus en 3D
Prototyper
- Créer des interfaces responsives
- Définir un parcours utilisateur
- Créer les liens d'interactions
- Déclencheurs claviers et manettes
- Pilotage vocal
- Prévisualiser l'interface
- Créer des animations
Partager
- Créer et configurer les liens de partage
- Déposer des commentaires
- Visualiser le document en ligne
- Partage spécifique
Tester
- Enregistrer une vidéo des interactions
- Installer l'application Adobe XD
- Tester le prototype en direct
Exporter
- Exporter les plans de travail
- Choisir les formats d'export (PNG, JPEG...)
- Exporter les assets pour l'intégration (spécifications techniques)
- Export vers des logiciels tiers (Zeplin, Avocode...)
Optimiser le processus de travail
- Installer les principaux plug-ins pour augmenter sa productivité
- Utiliser les librairies partagées
- Définir les bonnes conventions de nommage
- Collaborer en temps réel autour d'un prototype
- Installer le plug-in Chat
Réaliser un prototype de site Web ou d'application mobile
- Réaliser un prototype fonctionnel, à partir d'un kit UI ou wireframe fourni
- Organiser la librairie de styles et 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
Modalités d’évaluation des acquis
- En cours de formation, par des productions
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)
