Cours de design UI/UX

Leçon 1 • Accessibilité et design inclusif

Présente les normes d'accessibilité, les rapports de contraste et la navigation au clavier comme exigences de base. Cadre l'inclusion comme une mesure de qualité de design, et non comme une réflexion après coup.

Leçon 2 • Principes fondamentaux du design visuel

Couvre les principes de la Gestalt, la hiérarchie, le contraste et l'alignement en tant que grammaire visuelle des interfaces. Relie la théorie visuelle aux décisions pratiques de mise en page.

Leçon 3 • Aperçu du processus de design

Présente le cycle de vie complet du design, de la découverte à la remise. Fournit une carte mentale que les étudiants développeront dans les chapitres suivants.

Leçon 1 • Mener des entretiens utilisateur

Enseigne les techniques d'entretien structuré et semi-structuré qui révèlent les besoins latents des utilisateurs. Les étudiants pratiquent l'écoute active et le questionnement neutre.

Leçon 2 • Enquêtes et enquête contextuelle

Présente la conception d'enquêtes et l'observation sur le terrain en complément des entretiens. Les étudiants apprennent quand chaque méthode fournit les données les plus fiables.

Leçon 3 • Synthétiser la recherche en insights

Transforme les données brutes en insights exploitables à l'aide du diagramme d'affinités et de l'analyse thématique. Les résultats alimentent directement les personas et les cartes de parcours.

Leçon 4 • Planifier une étude de recherche

Couvre les objectifs de recherche, le périmètre et la sélection de méthode avant le début du travail de terrain. Garantit que les étudiants évitent les pièges de planification courants qui gaspillent du temps et du budget.

Leçon 1 • Inventaire et audit de contenu

Enseigne le catalogage et l'évaluation systématiques du contenu existant avant la restructuration. Les étudiants identifient les lacunes, les redondances et le contenu prioritaire.

Leçon 2 • Sitemaps et modèles de navigation

Traduit la recherche en architecture de l'information en sitemaps et sélectionne les modèles de navigation adaptés à la profondeur du contenu et aux objectifs des utilisateurs. Couvre la navigation globale, locale et contextuelle.

Leçon 3 • Tri de cartes et test d'arborescence

Utilise des méthodes participatives pour valider les étiquettes de catégories et la hiérarchie avec de vrais utilisateurs. Les résultats informent directement les décisions de sitemap.

Leçon 4 • Recherche et trouvabilité

Couvre le design UX de la recherche, y compris les filtres, les facettes et les états sans résultat. Relie la trouvabilité à la qualité globale de l'architecture de l'information.

Leçon 1 • Techniques de croquis et d'idéation

Les méthodes de croquis rapide génèrent rapidement de nombreuses idées de mise en page sans s'engager dans les détails. La pensée divergente à ce stade évite une fixation prématurée sur le design.

Leçon 2 • Annotation des maquettes filaires pour la remise

Documente la logique d'interaction, les états et les cas limites pour que les développeurs comprennent l'intention. Réduit les allers-retours lors de la mise en œuvre.

Leçon 3 • Prototypes cliquables pour les tests

Lie les écrans de maquettes filaires en prototypes navigables qui simulent les flux utilisateur sans code. Permet des tests d'utilisabilité précoces avant l'investissement visuel.

Leçon 4 • Anatomie et normes des maquettes filaires

Définit les niveaux de fidélité des maquettes filaires et établit des conventions d'annotation pour la remise aux développeurs. Les étudiants apprennent ce qu'il faut inclure et ce qu'il faut différer.

Leçon 1 • Documentation du système de design

Regroupe les composants, les tokens et les directives d'utilisation dans un document de système de design vivant. Permet la cohérence entre les équipes et un travail de design futur plus rapide.

Leçon 2 • Conception de composants et variantes

Construit des composants d'interface réutilisables avec tous les états et variantes documentés dans un outil de design. La méthodologie de design atomique structure les composants, des atomes aux modèles.

Leçon 3 • Systèmes de couleurs et alignement de marque

Construit une palette de couleurs évolutive avec des tokens primaires, secondaires, sémantiques et neutres. Garantit la cohérence de la marque et la conformité d'accessibilité sur tous les écrans.

Leçon 4 • Iconographie et imagerie

Définit le style, le dimensionnement et les règles d'utilisation des icônes ainsi que les directives de traitement des images. La cohérence des éléments visuels renforce l'identité de marque.

Leçon 1 • Interaction gestuelle et tactile

Conçoit pour le balayage, le pincement, l'appui long et d'autres gestes tactiles sur les plateformes mobiles. Couvre le dimensionnement des cibles, la découvrabilité des gestes et les modèles de repli.

Leçon 2 • Principes du design d'interaction

Couvre le retour, l'affordance, le mapping et les contraintes en tant que vocabulaire fondamental du design d'interaction. Applique chaque principe à des décisions d'interface réelles.

Leçon 3 • Interaction vocale et multimodale

Introduit les principes de conception UI vocale et les expériences multimodales combinant le toucher, la voix et le retour visuel. Prépare les étudiants aux paradigmes d'interaction émergents.

Leçon 4 • Prototypage haute fidélité

Construit des prototypes interactifs et précis au pixel près à l'aide de fonctionnalités de prototypage avancées dans les outils de design. Simule le comportement réel du produit pour les démonstrations aux parties prenantes et les tests d'utilisabilité.

Leçon 1 • Rédaction de plans de test et de tâches

Construit des plans de test avec des objectifs clairs, des tâches réalistes et des résultats mesurables. Des tâches bien rédigées empêchent les biais du facilitateur de contaminer les résultats.

Leçon 2 • Animation des sessions d'utilisabilité

Couvre les techniques du facilitateur pour maintenir les sessions neutres tout en recueillant des données comportementales riches. Les étudiants pratiquent le protocole de réflexion à voix haute et les questions de sondage.

Leçon 3 • Analyse et rapport des résultats

Synthétise les observations des sessions en problèmes classés par sévérité et recommandations exploitables. Les rapports sont structurés à la fois pour les équipes de design et les parties prenantes non techniques.

Leçon 4 • Fondamentaux des tests d'utilisabilité

Définit les objectifs, les types de tests d'utilisabilité et le moment d'utiliser chacun. Distingue les tests formatifs des tests sommatifs et fixe des attentes réalistes quant aux résultats.

Leçon 1 • Utilisation des outils de remise et d'inspection

Montre comment les outils d'inspection exposent les valeurs CSS, l'espacement et les éléments aux développeurs sans accès à l'outil de design. Couvre les fonctionnalités de commentaires et d'historique des versions.

Leçon 2 • Assurance qualité du design et préparation au lancement

Établit un processus d'assurance qualité du design pour détecter les erreurs de mise en œuvre avant le lancement. Couvre les listes de vérification QA, le signalement de bogues et les procédures de validation.

Leçon 3 • Préparation des fichiers pour la remise aux développeurs

Organise les fichiers de design avec une dénomination cohérente, une structure de calques et des éléments exportés. Des fichiers propres réduisent la confusion des développeurs et accélèrent la mise en œuvre.

Leçon 4 • Collaboration avec les développeurs

Construit des relations productives designer-développeur grâce à un vocabulaire partagé et un respect mutuel. Couvre la façon de gérer de manière constructive les écarts de mise en œuvre.