Descriptif
UI design et design system est une formation de 2 jours (14 heures), de niveau intermédiaire, rattachée au domaine « Accessibilité, ergonomie, UX ». Concevoir des interfaces cohérentes avec un design system. Conçue et animée par des praticiens en activité, elle alterne apports ciblés (30 %) et mises en pratique (70 %) sur des laboratoires cloud individuels, avec des cas inspirés des secteurs banque, assurance et services publics. Disponible en inter-entreprises, en intra sur catalogue et en version sur mesure adaptée au contexte de l'entreprise.
Objectifs pédagogiques
À l'issue de la formation, le participant sera capable de :
- Principes
- Composants
- Tokens
- Accessibilité
- Gouvernance
Programme détaillé
| N° | Contenus et activités | Durée |
|---|---|---|
| Jour 1 | ||
| 1 | Ouverture : interfaces et bibliothèques existantes des participants, présentation du produit à habiller | 0,5 h |
| 2 | Fondamentaux du design d'interface : grille et mise en page, échelle typographique, rythme d'espacement, hiérarchie visuelle, densité | 1,5 h |
| 3 | Travaux pratiques : définir les fondations d'un design system — palette, typographie, échelle d'espacement, rayons et élévations | 2 h |
| 4 | Les jetons de design : jetons primitifs, sémantiques et de composant, thèmes clair et sombre, variables et modes sous Figma | 1,5 h |
| 5 | Travaux pratiques : convertir les fondations en jetons Figma et produire un thème sombre cohérent | 1,5 h |
| Jour 2 | ||
| 6 | Travaux pratiques : construire quatre composants réutilisables (bouton, champ de saisie, sélecteur, message d'alerte) avec variantes et propriétés | 2,5 h |
| 7 | Accessibilité des composants : contrastes, taille des cibles, états de focus visibles, libellés, messages d'erreur, ordre de tabulation | 1 h |
| 8 | Travaux pratiques : vérifier contrastes et parcours clavier de la bibliothèque et corriger les états défaillants | 1,5 h |
| 9 | Travaux pratiques : documenter la bibliothèque — règles d'usage, exemples, anti-patrons et passation aux développeurs front-end | 1,5 h |
| 10 | Atelier : gouvernance du design system — versionnage, modèle de contribution, arbitrage des demandes et mesure d'adoption | 0,5 h |
Méthodes pédagogiques
- Pédagogie active : 68 % du temps en pratique encadrée — ateliers de production de livrables, études de cas, mises en situation et soutenances —, le reste en apports structurés, démonstrations commentées, cadrage et évaluation
- répartition calculée sur le déroulé détaillé de cette formation, et non annoncée de façon uniforme
- classe inversée avec prérequis sur le LMS
- apprentissage adaptatif selon le positionnement initial
- travaux en binômes
- classe virtuelle en séquences de 3 h 30 maximum sur Microsoft Teams
- support clair, complet et paginé remis à chaque participant
Technologies et outils mobilisés
Figma, Maze, outils de prototypage
Modalités d'évaluation et de validation
- Positionnement initial en ligne
- quiz de validation à chaque séquence
- évaluation finale des acquis (QCM et mise en situation)
- satisfaction à chaud
- questionnaire de transfert à 30 jours
- attestation de fin de formation
Plateforme, laboratoires et ressources
- LMS DATAROCKSTARS : parcours, supports numériques, quiz, évaluations, émargement par demi-journée
- laboratoires cloud individuels accessibles depuis un navigateur, sans installation, données fictives, détruits en fin de session
- bibliothèque O'Reilly (plus de 60 000 ressources)
- accès aux supports pendant 6 mois