Initiation

Adobe XD : réussir sa prise en main


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
Image
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com

Partager :

Image

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)

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)

Dernière mise à jour le 3 septembre 2024