Adobe XD - UX / UI - Design d'expérience utilisateur
5-066
Besoin d’adapter cette formation à vos besoins ?
N’hésitez pas à nous contacter afin d’obtenir un devis sur mesure !
Formation créée le 13/11/2024. Dernière mise à jour le 16/12/2024.
Version du programme : 1
Programme de la formation Version PDF
Vous aborderez les bases d'Adobe XD afin de concevoir des maquettes rapidement. Vous comprendrez des notions plus avancées telles que la grille de répétition ou encore les symboles. Vous créerez les premières maquettes de vos applications web et mobile et gèrerez l’interactivité de celles-ci. Cette formation a pour but d'amener les apprenants à un niveau SAME "Application" et d'enrichir les compétences : * Réaliser la maquette de la solution informatique répondant au cahier des charges * Assurer la démonstration et argumenter auprès du commanditaire la maquette de la solution * Analyser l’environnement technique et humain du système d’information en réalisant un audit
Objectifs de la formation
- Intégrer l'ergonomie et l'UX Design dans les processus de conception Web
- Appréhender les normes et techniques existantes pour améliorer la qualité des interfaces
- Modéliser les utilisateurs et les tâches liées à une application Web pour adapter son IHM
- Réaliser la maquette d'un écran Web au moyen d'outils de design
- Effectuer l'audit qualité d'une interface Web selon des critères ergonomiques spécifiques
- Monter un scénario de test utilisateurs et recueillir des résultats
Profil des bénéficiaires
- Toute personne impliquée dans la création d'interface utilisateur.
- Avoir des notions de conception d'interface. La connaissance d'outils de retouche d'image est un plus.
Contenu de la formation
-
Découverte de l'interface d'Adobe XD
- Qu'est-ce que Adobe XD ?
- Les atouts et les enjeux du logiciel.
- L'écran d'accueil d'Adobe XD, toutes ses particularités.
- La barre de menus et la barre d'outils.
- Les panneaux de propriétés.
-
Les étapes de conception
- Le design d'interface.
- Utiliser les grilles de répétition.
- L’intégration de la charte graphique dans les wireframes.
- Harmoniser la conception (styles de texte, couleurs…).
- La gestion des différentes transitions et animations.
- Les méthodologies du prototypage rapide.
-
Les outils de dessins et la gestion des textes
- La création de formes simples.
- La création des éléments vectoriels.
- Les icônes et les écrans de matériel.
- La saisie de texte.
- L’importation des fichiers textes.
-
Le paramétrage des images et l’application des couleurs
- L’importation de fichier sources.
- La création de symboles.
- La gestion des calques.
- La création de nuanciers.
-
L’interface d’application mobile et le prototypage
- La création des interfaces responsives.
- La conception d'une maquette détaillée.
- L’organisation des artboards.
- L’utilisation de l’inspecteur.
- Designer avec des UI-Kits.
- Les kits de design d'interfaces, Material Design.
-
Propriétés partagées et communes
- Redimensionnement dynamique des composants.
- Créer deux écrans d'application mobile (connexion/inscription).
-
Partage des conceptions et des prototypes
- Le partage et la mise en place du test.
- Les commentaires et les ressources liées.
- Les tests de support mobile.
- Feuilles de présence
- Quiz
- Mises en situation
- Formulaires d'évaluation de la formation.
- Certificat de réalisation de l’action de formation.
- TP :
- - Incorporation de la charte graphique dans la conception d’une première maquette.
- - Création de menus de navigation et de blocs de contenus avec les outils vectoriels.
- - Importation de fichiers sources (Photoshop, Illustrator) et incorporation dans des calques.
- - Conception d’interface responsive pour les terminaux mobiles.
- - Mise à disposition de partages et de tests utilisateur coté client.
- Certains exercices peuvent nécessiter des PCs