Formation UI Designer

Leçon 1 • Principes de la Gestalt en UI

Applique la psychologie de la Gestalt — figure-fond, clôture, continuité — aux décisions de mise en page d'interface. Les étudiants apprennent à prédire comment les utilisateurs perçoivent les éléments groupés.

Leçon 2 • Fondamentaux de la Typographie

Présente la classification des polices, l'échelle typographique et les règles de lisibilité pour les écrans numériques. Les étudiants appliquent ces règles pour créer des mises en page de texte lisibles et hiérarchisées.

Leçon 3 • Principes Fondamentaux du Design Visuel

Couvre le contraste, l'alignement, la répétition et la proximité en tant que règles structurelles de la composition visuelle. Ces principes sous-tendent chaque décision de mise en page dans les chapitres suivants.

Leçon 4 • Théorie des Couleurs pour les Interfaces

Enseigne la teinte, la saturation, la valeur et les relations de couleurs appliquées au design sur écran. Les étudiants construisent des palettes qui communiquent le sens et soutiennent l'utilisabilité.

Leçon 1 • Édition de Formes et de Trajets Vectoriels

Enseigne les courbes de Bézier, les opérations booléennes et l'utilisation de l'outil plume pour créer des formes UI précises. Ces compétences permettent le travail d'icônes et d'illustrations personnalisées dans les chapitres suivants.

Leçon 2 • Mise en Page Automatique et Contraintes

Couvre les règles de mise en page automatique et les contraintes réactives pour créer des éléments UI adaptatifs. Les étudiants produisent des cadres qui se redimensionnent correctement sur plusieurs tailles d'écran.

Leçon 3 • Bases de l'Exportation et de la Passation

Explique les formats d'exportation, les paramètres de résolution et les annotations de passation pour les développeurs. Une passation correcte réduit les problèmes de communication entre designers et ingénieurs.

Leçon 4 • Travailler avec les Composants

Présente les composants réutilisables, les instances et les surcharges pour créer des systèmes de design évolutifs. La maîtrise des composants est un prérequis pour le travail sur les systèmes de design dans le Chapitre 5.

Leçon 1 • Échelles d'Espacement et de Taille

Présente les systèmes d'espacement 4pt et 8pt et les échelles de taille proportionnelles pour une densité UI cohérente. Un espacement systématique réduit le bruit visuel et accélère les décisions de design.

Leçon 2 • Anatomie et Configuration de la Grille

Définit les colonnes, les gouttières, les marges et les grilles de base et montre comment les configurer dans les outils de design. Une base de grille solide garantit une cohérence visuelle sur tous les écrans.

Leçon 3 • Modèles de Mise en Page pour les Écrans Courants

Examine les modèles de mise en page pour tableaux de bord, listes, cartes et formulaires avec des exemples d'application réels. La reconnaissance des modèles accélère les décisions de design dans les chapitres de projet appliqué.

Leçon 4 • Stratégies de Mise en Page Réactive

Couvre les grilles fluides, les points de rupture fixes et les modèles de mise en page adaptative pour mobile, tablette et ordinateur de bureau. Les étudiants conçoivent une seule UI sur trois points de rupture comme exercice pratique.

Leçon 1 • Composants de Navigation

Construit des barres de navigation supérieures, des tiroirs latéraux, des onglets et des fils d'Ariane pour l'orientation entre les écrans. Les modèles de navigation sont appliqués directement dans le projet multi-écrans du Chapitre 7.

Leçon 2 • Éléments de Formulaire et Saisies

Conçoit des champs de texte, des listes déroulantes, des cases à cocher, des boutons radio et des interrupteurs avec une couverture complète des états. L'utilisabilité des formulaires a un impact direct sur les taux d'achèvement des tâches dans les produits réels.

Leçon 3 • Composants d'Affichage de Données

Couvre les tableaux, les badges, les tags, les avatars et les indicateurs de progression pour présenter des informations structurées. Les composants d'affichage de données sont essentiels pour le travail sur les tableaux de bord et l'UI d'analyse.

Leçon 4 • Composants de Retour et de Superposition

Conçoit des modales, des toasts, des infobulles et des indicateurs de chargement qui communiquent l'état du système. Les composants de retour ferment la boucle entre l'action de l'utilisateur et la réponse du système.

Leçon 1 • Architecture du Système de Design

Explique le modèle de design atomique — atomes, molécules, organismes — et comment il structure une bibliothèque de composants. Comprendre l'architecture évite la duplication et l'incohérence à grande échelle.

Leçon 2 • Gouvernance du Système de Design

Établit des modèles de contribution, de versioning et des workflows de dépréciation pour maintenir un système vivant. La gouvernance empêche la dérive du design à mesure que les équipes et les produits grandissent au fil du temps.

Leçon 3 • Documentation des Composants

Couvre les directives d'utilisation, les exemples à faire/ne pas faire et la documentation des propriétés pour chaque composant. Une documentation claire conduit à une adoption cohérente par les designers et les développeurs.

Leçon 4 • Plongée Approfondie dans les Tokens de Design

Définit les tokens de couleur, de typographie, d'espacement et d'élévation et montre comment ils relient le design au code. Les tokens permettent des mises à jour à source unique de vérité sur toutes les plateformes.

Leçon 1 • Construction de Prototypes Cliquables

Relie les cadres avec des zones actives, des superpositions et des comportements de défilement pour simuler les flux de navigation. Les prototypes cliquables sont l'artéfact principal pour les tests d'utilisabilité dans le Chapitre 7.

Leçon 2 • Techniques Avancées de Prototypage

Utilise des variables, des conditionnelles et des interactions de composants pour prototyper des comportements dynamiques avec état. Les prototypes avancés réduisent l'ambiguïté lors de la passation aux développeurs pour les fonctionnalités complexes.

Leçon 3 • Conception de Micro-Interactions

Conçoit des boucles de rétroaction pour les états de survol, les pressions de boutons, les interrupteurs et la validation de formulaires. Les micro-interactions augmentent la qualité perçue et guident efficacement l'attention de l'utilisateur.

Leçon 4 • Principes de Mouvement et d'Animation

Applique les courbes d'assouplissement, les directives de durée et la chorégraphie aux transitions UI et aux changements d'écran. Le mouvement communique la hiérarchie et la continuité entre les états de l'interface.

Leçon 1 • Accessibilité des Couleurs et du Contraste

Couvre les exigences de rapport de contraste, les palettes adaptées au daltonisme et la conception d'informations ne dépendant pas de la couleur. Les étudiants testent et corrigent les échecs de contraste dans leur bibliothèque de composants existante.

Leçon 2 • Modèles de Composants Accessibles

Applique les rôles ARIA, les étiquettes et les régions live aux modales, formulaires et composants de contenu dynamique. Les étudiants mettent à jour leur bibliothèque de composants avec des annotations d'accessibilité pour les développeurs.

Leçon 3 • Accessibilité du Focus, du Clavier et du Toucher

Conçoit des indicateurs de focus visibles, un ordre de tabulation logique et des tailles de cible tactile adéquates pour toutes les méthodes de saisie. Ces éléments garantissent l'opérabilité pour les utilisateurs de clavier et ceux ayant des déficiences motrices.

Leçon 4 • Typographie et Lisibilité

Applique les règles de taille de police minimale, d'espacement des lignes et de redimensionnement du texte pour garantir des interfaces lisibles. Une typographie lisible réduit la charge cognitive pour les utilisateurs ayant des différences visuelles ou cognitives.

Leçon 1 • Conception d'Écran Haute Fidélité

Applique le système de design, la typographie, la couleur et les composants pour produire des écrans soignés et prêts pour la production. Les écrans haute fidélité sont le livrable principal examiné par les parties prenantes.

Leçon 2 • Architecture de l'Information et Flux

Crée des plans de site, des flux utilisateurs et des flux de tâches pour définir la structure de navigation avant de commencer le design visuel. Une IA solide évite les révisions structurelles coûteuses pendant le design haute fidélité.

Leçon 3 • Prototyper, Tester et Itérer

Construit un prototype navigable, mène un test d'utilisabilité modéré et itère sur la base des résultats. Cette section ferme la boucle de design et démontre une prise de décision fondée sur des preuves.

Leçon 4 • Cahier des Charges Créatif et Découverte

Analyse un cahier des charges créatif réaliste, définit le périmètre du projet et identifie les objectifs utilisateurs et les contraintes métier. Les résultats de la découverte façonnent directement l'architecture de l'information et les flux dans la section suivante.

Leçon 5 • Passation et Présentation de l'Étude de Cas

Prépare des spécifications prêtes pour les développeurs, un document de spécifications rouges et un récit d'étude de cas de portfolio structuré. Une étude de cas convaincante est l'outil principal pour décrocher un poste en design UI.