Initiation
S’initier à Adobe XD pour créer des prototypes fonctionnels et collaboratifs
2 jours / 14 heures
Prix : 3 500 € HT
Réf. : W05 (Formation organisée à la demande)
Compétences visées
Définir la place d’XD dans le processus de design d’un site Web ou d’une appli et mettre en œuvre un flux de production efficace pour concevoir, partager et modifier des prototypes interactifs.
Objectifs
- (Re)contextualiser UI et UX
- Produire des éléments graphiques et les mettre en forme
- Partager son projet
- Réaliser un prototype
- Exporter et livrer son projet
Public concerné
Cette formation s’adresse aux directeurs artistiques, graphistes, UI/UX/product designers.
Prérequis
Il est nécessaire d’avoir une bonne culture Web ou d'avoir suivi notre formation « Culture Web : environnement de production et tendances ».
Programme
(Re)contextualiser UI et UX
- Identifier les grands principes du design d’interface
- Intégrer le vocabulaire utile : navigation, wireframe, prototypage, mockup, guideline, design system, atomic design...
- Établir un état des lieux des métiers : product designer / UI designer / UX designer...
-> quiz de compréhension et études de cas
Produire des éléments graphiques et les mettre en forme
Identifier et définir le rôle d’XD
- Situer XD dans le processus de création d’un site Web ou d’une application
- Se familiariser avec l’interface XD
- Illustrer la conception d’une page atomique et sa progression
Créer et agencer des éléments graphiques sur une page
- Créer des formes avec les outils rectangle, rond, texte
- Aligner, regrouper, assembler des formes
- Construire des composants
- Utiliser la bibliothèque du document
- Définir une stratégie de hiérarchie dans les composants
- Grouper et organiser les éléments sur les pages
- Structurer la mise en forme des pages à partir des composants
- Agencer les grilles de répétition
Préparer et utiliser des modèles
- Définir des modèles à partir de pages
- Produire des pages à partir des modèles établis
- Développer une structure de document
-> Exercice : créer la bibliothèque et les composants en vue de monter une structure de page modulaire
Partager son projet
- Analyser les besoins de production pour anticiper la création des livrables
- Documenter le projet via les annotations dans les marges
- Établir une nomenclature de nommage des assets
- Lister les éléments graphiques à fournir
- Élaborer et partager le système de design (design system) avec son équipe
- Combiner les éléments dans une bibliothèque partagée (Styles / Couleurs / Composants…)
-> Exercice : exporter les assets réalisés par l’utilisateur
Réaliser un prototype
- Structurer la navigation des pages du document
- Configurer les options de retour en arrière
- Soigner le défilement vertical des pages longues
- Enchaîner les écrans avec des animations
- Composer un menu pop-up
- Intégrer les interactions au doigt et à la souris
- Générer d’autres interactions : clavier, périphériques USB ou voix
- Tester le prototype interactif
-> Exercice : prototyper une application à partir des composants créés précédemment
Exporter et livrer son projet
- Partager un prototype fonctionnel
- Expliquer le fonctionnement d’un composant via une vidéo
- Rédiger un cahier des charges
- Prendre en compte le responsive
- Exporter dans les formats utilisés en production
- Justifier et recommander une bible graphique
- Déterminer les plugins adaptés aux exports
-> Plan d'action : établir une check-list pour réaliser des prototypes fonctionnels : parcours / parties prenantes (client interne et ou externe, développeurs…) / éléments à assembler / tests / pilotage du cahier des charges
Artistes / Auteurs affiliés à la maison des artistes ?
Découvrez nos conditions préférentielles
Profil de l’intervenant
Graphiste avec plus de 10 ans d’expérience en animation de formation.
Ressources
- Supports de cours dématérialisés
- Supports vidéo (enregistrements, pendant la session, d’une sélection de démonstrations réalisées par l’intervenant)
- Abonnement de 3 mois à tuto.com
- Inscription au forum des swashers
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com
Modalités en présentiel
Parcours pédagogique :
Quiz de positionnement ❯ 2 jours présentiels continus ❯ Évaluation des acquis
Méthode pédagogique :
Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, feedbacks personnalisés
Moyens techniques :
- 1 poste par participant (Mac ou PC, selon votre choix), équipé de la suite Adobe CC dans sa dernière version, fourni par nos soins
- Poste de l’intervenant relié à un grand écran ou vidéoprojecteur
Modalités en distanciel
Parcours pédagogique :
Quiz de positionnement ❯ 2 classes virtuelles discontinues (2 x 1 jour) ❯ Évaluation des acquis
Méthode pédagogique :
Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, travail individuel inter-sessions, feedbacks personnalisés
Moyens techniques :
- Classe virtuelle créée par nos soins
- Chaque apprenant participe à la session avec son ordinateur, connecté à Internet, et équipé :
- d’un micro et d’une caméra
- d’une licence Adobe XD
- d’un double écran (recommandé mais non nécessaire)
Méthodes d'évaluation
- Validation des acquis pendant la formation grâce à des quiz et à la réalisation d’exercices pratiques
- Suivi d'acquisition des objectifs pédagogiques par l'intervenant
- Évaluation à chaud (remplie en fin de formation) et à froid (à 60 jours)
