Module 1 : Prise en main d’Adobe XD et fondamentaux UI/UX
- Panorama de l’outil, interface, espaces de travail, réglages utiles.
- Différences wireframe / UI / prototype et place d’Adobe XD dans un flux de production.
- Bonnes pratiques de nommage, d’organisation et de versioning des fichiers.
- Création d’un document : plans de travail, formats (web, iOS, Android), repères.
- Mises en application encadrées : reproduction d’une interface simple à partir d’un brief générique.
Module 2 : Wireframing et structuration des écrans
- Méthodes de wireframing : hiérarchie, zoning, priorisation de contenus.
- Grilles, alignements, espacements et règles de cohérence visuelle.
- Utilisation des formes, textes, images et contraintes de lisibilité.
- Gestion multi-écrans : états, variantes de pages, scénarios de parcours.
- Mises en application encadrées : création d’un wireframe de page d’accueil + page contenu.
Module 3 : Conception UI (styles, composants, cohérence graphique)
- Construction d’une UI : typographies, échelles, couleurs, contrastes.
- Styles de caractères et de couleurs : normalisation et réutilisation.
- Composants : création, duplication, édition et bonnes pratiques de structure.
- États et variantes de composants (hover, actif, désactivé, erreur).
- Mises en application encadrées : déclinaison du wireframe en maquette UI.
Module 4 : Design system et bibliothèques (niveau avancé)
- Principes d’un design system : atomes, molécules, organismes, templates.
- Bibliothèques et assets : organisation, mise à jour, cohérence inter-projets.
- Composants réutilisables : patterns (navigation, cartes, formulaires, CTA).
- Gestion des versions et gouvernance : règles d’usage, documentation légère.
- Mises en application encadrées : création d’une mini-bibliothèque de composants standard.
Module 5 : Prototypage interactif et parcours utilisateur
- Liens et interactions : navigation, ancres, retours, zones cliquables.
- Transitions, animations, overlays, modales et micro-interactions.
- États d’écrans et scénarios : onboarding, tunnel d’achat, formulaire, compte.
- Prévisualisation, tests rapides et itérations sur la base de retours.
- Mises en application encadrées : prototypage d’un parcours complet multi-écrans.
Module 6 : Collaboration, feedback et validation
- Partage de prototypes : modes de diffusion, droits d’accès, commentaires.
- Gestion des retours : consolidation, priorisation, traçabilité.
- Préparation d’ateliers de revue : critères UX (clarté, friction, cohérence).
- Bonnes pratiques de travail en équipe (designer/PM/marketing).
- Mises en application encadrées : revue croisée et amélioration d’écrans selon une grille de critères.
Module 7 : Responsive, accessibilité et qualité d’interface
- Principes responsive : grilles, breakpoints, adaptation des composants.
- Bonnes pratiques d’accessibilité : contrastes, tailles, focus, libellés.
- Gestion des contenus : états vides, erreurs, chargements, messages système.
- Vérifications qualité : cohérence, alignements, lisibilité, comportements.
- Mises en application encadrées : adaptation d’un écran desktop en version mobile..
Module 8 : Handoff développeurs, exports et préparation à l’intégration
- Spécifications : mesures, styles, propriétés et éléments réutilisables.
- Exports d’assets : formats, résolutions, nommage, optimisation (SVG/PNG/JPG).
- Anticiper les contraintes d’intégration : composants, variables, design tokens (principes).
- Documentation de base : règles d’usage, états, comportements attendus.
- Mises en application encadrées : préparation d’un handoff complet sur un mini-parcours.






