Adobe XD

Adobe XD

• Prise en charge

  Nos équipes s’engagent à vous rappeler sous 24 à 72 heures.

• Durée et prix:

  En distanciel
  Durée: 35 heures
  1750€ ht, 2100€ ttc.
  Entrée permanente.

  En présentiel
  Durée: 5 jours.
  Intra: à partir de 1050€ ht la journée.

• Objectifs :

  Comprendre les enjeux de la conception d’interfaces
  Maquetter 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 avec votre équipe et vos clients

• Niveau requis :

  Être familier de l’environnement Web. Les connaissances de base d’Illustrator et de Photoshop seraient un plus.

• Public :

  Webdesigners, webmasters, graphistes, directeurs artistiques, directeurs de création, chefs de projets.

• Moyens pédagogiques :

  Explications, démonstrations, exercices, vérification des acquis.

• Moyens techniques :

  En distanciel : le stagiaire doit disposer du logiciel enseigné, du logiciel permettant la connexion à distance avec le formateur et d’une connexion de bonne qualité.
  En présentiel : Un ordinateur par personne – Vidéo projecteur – Connexion Internet.

• Modalités d’évaluation :

  Questionnaire d’évaluation en fin de session.

• Version PDF :

  PDF

• Programme :

  • Rappel sur le processus de conception

    Veille et benchmarking
    Ciblage et personas
    Architecture de l’information
    Expression des besoins
    Description fonctionnelle
    

  • Les livrables, arborescence

    Zoning et Wireframes
    Mockups storyboard vs prototype
    

  • Le prototypage

    Les étapes de conception
    IA: l’architecture de l’information
    UI / UX: le design d’interface
    Les tendances du design (Flat, material, Atomic,…)
    

  • L’application

    Adobe XD dans le workflow
    Objectifs du logiciel
    

  • L’interface d’Adobe XD

    Accueil, les barres de menus et 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 une icône

    Utiliser les formes simples
    Créer des éléments vectoriels avec l’outil Plume
    

  • Les textes

    Saisir du texte, importer des fichiers textes
    Gérer les styles de texte
    Formatage et enrichissement
    Enregistrer les styles typographiques
    

  • 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
    Enregistrer les couleurs
    

  • Créer des éléments répétés

    Gérer les récurrences, utiliser les grilles de répétition
    

  • Combinaison d’objets et masques

    Grouper, verrouiller et dupliquer
    Déplacer, aligner et empiler
    Sélection, redimensionnement et rotation
    Contour, remplissage et ombre portée
    Masque de floutage
    

  • Travailler avec des sources externes

    Sélectionner et utiliser des kits UI
    Importer depuis Illustrator
    Importer depuis Photoshop
    Importer depuis Sketch
    Importer depuis les navigateurs Web
    

  • Composants

    Créer et manipuler les composants
    Variantes des composant
    Propriétés partagées et communes
    Redimensionnement réactif des composants
    Créer deux écrans d’application mobile (connexion / inscription)
    

  • Etendre Adobe XD

    Plugins, configuration requise
    Affichage et installation des plug-ins
    Sélections de plugins utiles
    

  • Prototyper

    Créer des interfaces responsives
    Définir un parcours utilisateur
    Créer les liens d’interactions, prévisualiser l’interface
    Déclencheurs claviers et manettes, iPilotage vocal
    

  • Partager

    Créer des liens de partage
    Déposer des commentaires
    

  • 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…)
    ressources liées composants (anciennement symboles) documents en ligne
    

  • Partager le projet

    Partager les écrans et les prototypes
    Créer des liens de partage
    Supprimer les liens précédemment partagés
    Indicateurs d’utilisation
    Visualiser les prototypes en plein écran
    

  • Mettre en pratique

    Définir une approche autour d’un projet
    Conception d’une version filaire
    Mock-up et mock-up Hi-Fi
    Réalisation de l’interface sous Adobe XD
    Insertion des animations et de l’interactivité
    Partage du projet