Formation UI Designer

Leçon 1 • Principes de la Gestalt en design d'interface

Applique la psychologie de la Gestalt — figure-fond, fermeture, continuité — aux décisions de mise en page d'interface. Les étudiants apprennent à prédire comment les utilisateurs perçoivent des éléments regroupé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 textuelles 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 entre les couleurs appliquées au design sur écran. Les étudiants construisent des palettes qui communiquent du sens et soutiennent l'utilisabilité.

Leçon 1 • Édition de formes et de tracés vectoriels

Enseigne les courbes de Bézier, les opérations booléennes et l'utilisation de l'outil Plume pour créer des formes d'interface précises. Ces compétences permettent la création 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 responsives pour la création d'éléments d'interface 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 transmission

Explique les formats d'exportation, les paramètres de résolution et les annotations de transmission aux développeurs. Une transmission appropriée 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 remplacements pour créer des systèmes de design évolutifs. La maîtrise des composants est un prérequis pour le travail sur le système de design au chapitre 5.

Leçon 1 • Échelles d'espacement et de dimensionnement

Présente les systèmes d'espacement 4pt et 8pt ainsi que les échelles de dimensionnement proportionnelles pour une densité d'interface 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 la 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 les tableaux de bord, les listes, les cartes et les formulaires avec des exemples d'application concrets. 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 responsive

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 interface utilisateur unique sur trois points de rupture dans le cadre d'un exercice pratique.

Leçon 1 • Composants de navigation

Crée 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 champs de saisie

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 étiquettes, les avatars et les indicateurs de progression pour la présentation d'informations structurées. Les composants d'affichage de données sont essentiels pour le travail sur les tableaux de bord et l'interface d'analyse.

Leçon 4 • Composants de retour et de superposition

Conçoit des fenêtres modales, des notifications toast, 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 empêche 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 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 se développent au fil du temps.

Leçon 3 • Documentation des composants

Couvre les consignes d'utilisation, les exemples de bonnes et mauvaises pratiques, et la documentation des propriétés pour chaque composant. Une documentation claire favorise une adoption cohérente par les designers et les développeurs.

Leçon 4 • Plongée dans les jetons de design

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

Leçon 1 • Création de prototypes cliquables

Relie les cadres avec des zones réactives, des superpositions et des comportements de défilement pour simuler des flux de navigation. Les prototypes cliquables sont le principal artefact pour les tests d'utilisabilité du chapitre 7.

Leçon 2 • Techniques de prototypage avancées

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

Leçon 3 • Conception de micro-interactions

Conçoit des boucles de rétroaction déclencheur-règle-feedback pour les états de survol, les pressions de bouton, les interrupteurs et la validation de formulaire. 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'atténuation, les consignes de durée et la chorégraphie aux transitions d'interface 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 ratio de contraste, les palettes adaptées au daltonisme et la conception d'informations ne reposant pas uniquement sur 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 fenêtres modales, aux formulaires et aux 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 • Accès par focus, clavier et 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 ayant un handicap moteur ou utilisant le clavier.

Leçon 4 • Typographie et lisibilité

Applique des 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 des utilisateurs ayant des différences visuelles ou cognitives.

Leçon 1 • Conception d'écrans 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 utilisateur et des flux de tâches pour définir la structure de navigation avant la conception visuelle. Une bonne architecture de l'information évite des révisions structurelles coûteuses lors de la conception 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 en fonction des résultats. Cette section boucle le processus de design et démontre une prise de décision fondée sur des preuves.

Leçon 4 • Cahier des charges créatif du projet et phase de découverte

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

Leçon 5 • Transmission et présentation de l'étude de cas

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