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...
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
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…)
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
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
Artistes / Auteurs affiliés à la maison des artistes ?
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
Découvrez Swash #2, notre nouveau magazine !
Retours d'expérience, interviews et nouvelles formations à découvrir : 40 pages pour explorer notre univers.
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)