Adobe XD
Web Design
Objectifs
Acquérir les fondamentaux pour mettre en œuvre des prototypes de vos projets web, pour partager "l’expérience utilisateur" et "valider les choix".
À l'issue de la formation, le stagiaire sera capable de :
- Maîtriser les bonnes pratiques de conception d'interfaces
- Créer 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 pour réaliser des interfaces fonctionnelles.
Methodes et outils pédagogiques
- Alternance exposés théoriques et exercices pratiques (80% pratique)
-
Support de cours adapté au logiciel étudié et au niveau suivi
Evaluation
- Tout au long de la formation, exercices pratiques permettant au formateur la validation des acquis et des compétences
Public concerné
Webmasters, graphistes, concepteurs Web, communication…
Pré-requis
Avoir une bonne connaissance de l'environnement Web. Avoir la pratique courante d'un logiciel de dessin vectoriel et bitmap est un plus
2 jours
Introduction
- Présentation d’Adobe XD
- Les atouts et les enjeux du logiciel
Le prototypage
- Les étapes de conception
- Le design d'interface
- L'architecture de l'information
- Les tendances du design
Découvrir l'interface d'Adobe XD
- L'écran d'accueil
- Barre de menus et barre 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 des formes simples
- Créer des éléments vectoriels avec l'outil Plume
- Créer une icône
Les textes
- Saisir du texte
- Importer des fichiers textes
- Gérer les styles de texte
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
La grille de répétition
- Utiliser et gérer une grille de répétition
Réaliser un écran d'accueil d'application mobile
- Conception d'une version papier ou maquette filaire détaillée
- Réalisation de l'interface sous Adobe XD
Symboles et kit UI
- Créer et manipuler les symboles
- Sélectionner et utiliser des kits UI
- Créer deux écrans d'application mobile (connexion / inscription)
Prototyper
- Créer des interfaces responsives
- Définir un parcours utilisateur
- Créer les liens d'interactions
- Prévisualiser l'interface
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...)
- L'exportation pour les développeurs (Zeplin)
