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é du design, et non comme une réflexion a posteriori.

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 transmission. Fournit une carte mentale que les étudiants développeront dans les chapitres suivants.

Leçon 1 • Mener des entretiens utilisateurs

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 • Sondages et enquête contextuelle

Présente la conception de sondages et l'observation sur le terrain comme compléments aux entretiens. Les étudiants apprennent quelle méthode produit les données les plus fiables selon le contexte.

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

Transforme les données brutes en insights exploitables à l'aide du mapping 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 des méthodes avant le début du travail de terrain. Permet aux étudiants d'éviter les pièges de planification courants qui font perdre 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 schémas de navigation

Traduit la recherche en architecture de l'information en sitemaps et sélectionne les schémas 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'arbre

Utilise des méthodes participatives pour valider les étiquettes de catégories et la hiérarchie auprès des utilisateurs réels. Les résultats alimentent directement les décisions du 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 de nombreuses idées de mise en page rapidement, sans s'engager dans les détails. La pensée divergente à ce stade prévient une fixation prématurée sur le design.

Leçon 2 • Annoter les maquettes filaires pour la transmission

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 l'implémentation.

Leçon 3 • Prototypes cliquables pour les tests

Relie les écrans de maquette filaire en prototypes navigables qui simulent les parcours 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 les conventions d'annotation pour la transmission aux développeurs. Les étudiants apprennent ce qu'il faut inclure et ce qu'il faut reporter.

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 accélère le travail de design futur.

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 du design atomique structure les composants des atomes aux templates.

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é en matière d'accessibilité sur tous les écrans.

Leçon 4 • Iconographie et imagerie

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

Leçon 1 • Interactions gestuelles et tactiles

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

Leçon 2 • Principes du design d'interaction

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

Leçon 3 • Interaction vocale et multimodale

Présente les principes de design d'interface vocale et les expériences multimodales combinant le toucher, la voix et le feedback visuel. Prépare les étudiants aux paradigmes d'interaction émergents.

Leçon 4 • Prototypage haute fidélité

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

Leçon 1 • Rédiger des plans de test et des 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 le biais du facilitateur de contaminer les résultats.

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

Couvre les techniques d'animation pour maintenir la neutralité des sessions 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 • Analyser et rapporter les résultats

Synthétise les observations des sessions en problèmes classés par sévérité et en recommandations actionnables. 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 • Utiliser les outils de transmission et d'inspection

Montre comment les outils d'inspection exposent les valeurs CSS, l'espacement et les actifs 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 d'implémentation avant le lancement. Couvre les checklists d'assurance qualité, le signalement des bugs et les procédures de validation.

Leçon 3 • Préparer les fichiers pour la transmission aux développeurs

Organise les fichiers de design avec une dénomination cohérente, une structure de calques et des actifs exportés. Des fichiers propres réduisent la confusion des développeurs et accélèrent l'implémentation.

Leçon 4 • Collaborer avec les développeurs

Construit des relations productives designer-développeur grâce à un vocabulaire partagé et un respect mutuel. Couvre la manière de gérer les écarts d'implémentation de manière constructive.