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)
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
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)
