Formation UI Design et ergonomie : Créez des interfaces et un Design System.

Programme de la formation
UI Design et ergonomie : Créez des interfaces et un Design System.

• Introduction à l'UI Design et l'expérience utilisateur (UX)

  - Définition UI/UX : rôles et différences.
  - Importance de l'UI Design dans les produits numériques.
  - Cycle de vie de la conception d'interface.

• Principes fondamentaux de l'ergonomie des IHM

  - Lois de l'ergonomie : Fitts, Hick, Gestalt.
  - Heuristiques de Nielsen pour l'utilisabilité.
  - Bonnes pratiques d'accessibilité numérique (WCAG).

• Anatomie de l'interface : composants et patterns

  - Éléments fondamentaux : boutons, champs, menus, icônes.
  - Patterns d'interaction usuels : navigation, recherche, formulaires.
  - Analyse d'interfaces existantes réussies.

• Processus de conception UI : de l'idée au prototype

  - De l'esquisse (sketching) au wireframe (fil de fer).
  - Prototypage basse fidélité vs haute fidélité.
  - Outils de wireframing et prototypage (Figma, Adobe XD).

• Théorie des couleurs et typographie en UI
• Espacement, alignement et grille de conception

  - Importance de l'espace blanc (whitespace).
  - Systèmes de grille (grid systems) et leurs applications.
  - Alignement et hiérarchie visuelle.

• Introduction au Design System : pourquoi et comment

  - Définition et avantages d'un Design System.
  - Composantes clés : principes, tokens, composants.
  - Exemples de Design Systems éprouvés (Material Design).

• Création de tokens de Design (Design Tokens)

  - Définir les couleurs, typographies, espacements, ombres.
  - Organisation et nomenclature des tokens.
  - Intégration des tokens dans les outils de design.

• Conception et documentation des composants UI

  - Atomisation des composants (Atoms, Molecules, Organisms).
  - États des composants (actif, désactivé, hover).
  - Documentation des usages et interactions des composants.

• Mise en place et gestion d'une librairie de composants

  - Structuration d'une librairie dans Figma ou Adobe XD.
  - Versions des composants et gestion des mises à jour.
  - Collaboration au sein de l'équipe de design et de dev.

• Intégration du Design System et Design Ops
• Conception d'interface responsive et adaptative

  - Principes du responsive design.
  - Adapter les interfaces à différentes tailles d'écran.
  - Optimisation pour mobile et desktop.