Module 4 : Design UI/UX et Prototypage

Module 4 : Design UI/UX et Prototypage

Durée

8 jours (56 h)

Objectifs pédagogiques

• Comprendre les principes fondamentaux de l’interface utilisateur (UI) et de l’expérience utilisateur (UX).
• Mettre en œuvre une démarche design centré‐utilisateur : recherche, idéation, prototypage, tests.
• Concevoir des wireframes basse et haute fidélité et les transformer en prototypes interactifs avec Figma.
• Créer et documenter un design system cohérent et accessible (WCAG 2.1).
• Assurer un hand‑off fluide avec les équipes de développement dans un contexte DevOps.

Contenu détaillé

1. Introduction UI/UX
   ‑ UI vs UX, heuristiques de Nielsen, design thinking.
2. Recherche & empathie utilisateur
   ‑ Interviews, personas, parcours utilisateur, tri de cartes.
3. Architecture de l’information & wireframing
   ‑ Zoning, wireframes low‑fi, principes de gestalt.
4. Prototypage interactif (Figma)
   ‑ Frames, autolayout, composants, variables, prototypes, animations.
5. Design system & accessibilité
   ‑ Atomic design, librairies, contrastes, ARIA, documentation.
6. Tests utilisateurs & itérations
   ‑ Plan de test, métriques (SUS, NPS), amélioration continue.
7. Handoff to Dev & DevOps
   ‑ Inspect, exports CSS, intégration dans pipeline CI/CD.

Méthodes pédagogiques

Exposés illustrés, ateliers pratiques en binôme, études de cas sur le projet fil rouge. Feedback collectif et revues de design quotidiennes.

Modalités d’évaluation

• Quiz de validation en fin de journée.
• Projet final : prototype haute fidélité, soutenance basée sur ergonomie, cohérence graphique, accessibilité et viabilité technique.

Livrables attendus

Personas, wireframes, prototype Figma interactif, documentation du design system.

Public visé / prérequis

Développeurs, chefs de projet, graphistes souhaitant acquérir une compétence UI/UX. Connaissances de base en HTML/CSS recommandées.

Compétences visées

1. Concevoir l’interface d’une application en respectant l’ergonomie.
2. Définir et optimiser l’expérience utilisateur.
3. Produire des prototypes fonctionnels pour validation.
4. Garantir l’accessibilité et la cohérence graphique.

Financement

Autofinancement (paiement échelonné possible).

Modalités d’inscription & d’accès (communes au parcours Full‑Stack)

1. Formulaire en ligne → RDV Calendly
2. Entretien individuel + test logique / anglais technique (réponse immédiate)
3. Accès à la formation : J+14 après délai de rétractation (envoi des accès plateforme onboarding)

Accessibilité handicap : supports et évaluations adaptables. Contact : handicap@digitalfactoryacademy.com