Formation UX et Responsive Web Design

Leçon 1 • Processus de design thinking

Présente le cadre du design thinking en cinq étapes comme méthode de résolution de problèmes. Fournit l'état d'esprit itératif appliqué dans tous les chapitres suivants.

Leçon 2 • Ce que le design UX signifie vraiment

Définit l'UX au-delà de l'esthétique, en couvrant la convivialité, l'utilité et l’attrait. Établit le vocabulaire utilisé dans l'ensemble du cours.

Leçon 3 • Accessibilité et design inclusif

Établit l'accessibilité comme une exigence fondamentale du design, et non comme une réflexion après coup. Présente les directives mondiales d'accessibilité du contenu et les principes de design inclusif.

Leçon 1 • Enquêtes et méthodes quantitatives

Présente la conception d'enquêtes, l'analyse comparative de l'utilisabilité et l'interprétation des analyses. Complète les résultats qualitatifs par des données comportementales mesurables.

Leçon 2 • Entretiens et enquête contextuelle

Enseigne les techniques d'entretien structuré et semi-structuré ainsi que l'observation en contexte. Développe des compétences pour capturer le comportement et les motivations authentiques des utilisateurs.

Leçon 3 • Planification d'une étude de recherche

Couvre les objectifs de recherche, la portée et la sélection des méthodes avant le travail sur le terrain. Garantit que les questions de recherche s'alignent sur les décisions de design à prendre.

Leçon 1 • Plans de site et hiérarchies du contenu

Produit des documents formels de plan de site qui communiquent la structure aux parties prenantes et aux développeurs. Aligne la hiérarchie du contenu sur les modèles mentaux des utilisateurs issus de la recherche.

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

Enseigne le tri de cartes ouvert et fermé pour valider les structures de catégories auprès des utilisateurs. Le test d'arborescence vérifie les libellés de navigation avant l'application du design visuel.

Leçon 3 • Conception de systèmes de navigation

Couvre les modèles de navigation globaux, locaux et contextuels pour le web et le mobile. Relie la conception de la navigation aux flux de tâches des utilisateurs établis lors de la recherche.

Leçon 1 • Outils de maquettage filaire numérique

Couvre les outils de maquettage filaire standard de l'industrie pour créer des mises en page écran de moyenne fidélité. Développe la maîtrise des outils appliquée aux étapes de prototypage et de transfert.

Leçon 2 • Esquisse et maquettes filaires basse fidélité

Présente le croquis rapide et le maquettage filaire sur papier comme outils d'idéation rapide. Les artefacts basse fidélité communiquent la mise en page sans distraire les parties prenantes avec une finition visuelle.

Leçon 3 • Création de prototypes interactifs

Relie les maquettes filaires en flux cliquables qui simulent le comportement réel du produit. Les prototypes sont dimensionnés pour tester des tâches utilisateur spécifiques identifiées lors de la recherche.

Leçon 4 • Tests d'utilisabilité avec des prototypes

Applique les prototypes dans des tests d'utilisabilité modérés et non modérés pour valider les décisions de design. Boucle la boucle recherche-design avant l'investissement dans le design visuel.

Leçon 1 • Mise en page, espacement et hiérarchie visuelle

Applique les systèmes de grille, les échelles d'espacement et le poids visuel pour diriger l'attention de l'utilisateur. Un espacement et une hiérarchie cohérents réduisent la charge cognitive et améliorent la lisibilité de lecture.

Leçon 2 • Typographie pour les interfaces numériques

Couvre la sélection de la police de caractères, l'échelle, la hauteur de ligne et le contraste visuel pour la lisibilité à l'écran. Les décisions typographiques affectent directement l'accessibilité et la perception de la marque.

Leçon 3 • Théorie des couleurs et systèmes de couleurs d'interface utilisateur

Enseigne la psychologie des couleurs, les exigences de contraste visuel et la construction systématique de la palette de couleurs. Un système de couleurs structuré garantit la cohérence dans tous les états de l'interface.

Leçon 4 • Iconographie et imagerie

Couvre les principes de conception d'icônes, la sélection d'images et le style d'illustration pour les contextes d'interface utilisateur. Les actifs visuels doivent renforcer le sens sans créer d'ambiguïté.

Leçon 1 • Requêtes média et points de rupture

Applique les requêtes min-width et max-width pour adapter les mises en page à des points de rupture définis. Couvre la syntaxe de plage moderne et les requêtes de conteneur pour la réactivité au niveau des composants.

Leçon 2 • Flexbox CSS pour les mises en page responsives

Enseigne les axes Flexbox, l'alignement et l'habillage pour construire des composants responsives unidimensionnels. Flexbox est appliqué aux barres de navigation, aux rangées de cartes et aux mises en page de formulaires.

Leçon 3 • Images et médias responsives

Enseigne les attributs srcset, sizes et l'élément picture pour fournir des images de taille appropriée. Une diffusion optimisée des médias améliore les performances sur tous les types d'appareils.

Leçon 4 • Grille CSS pour les mises en page complexes

Couvre les zones de modèle de grille, le placement automatique et les lignes nommées pour les mises en page bidimensionnelles. La grille permet une structure au niveau de la page que Flexbox seul ne peut pas atteindre.

Leçon 1 • Sélecteurs avancés et spécificité

Enseigne les pseudo-classes, les pseudo-éléments et la gestion de la spécificité pour un CSS maintenable. Réduit les conflits de style courants dans les grandes bases de code responsives.

Leçon 2 • Architecture et évolutivité CSS

Présente BEM, l'approche utility-first et les modules CSS comme méthodologies pour des feuilles de style évolutives. Une architecture évolutive prévient les conflits de spécificité dans les grands projets responsives.

Leçon 3 • Transitions CSS et micro-animations

Applique les propriétés de transition pour créer des changements d'état fluides qui renforcent le retour d'interaction. Les micro-animations améliorent la performance perçue et guident l'attention de l'utilisateur.

Leçon 4 • Animations d'images clés CSS

Construit des animations complexes en plusieurs étapes à l'aide de @keyframes pour les états de chargement et les flux d'intégration. Couvre les propriétés sans risque pour les performances et l'orchestration des animations.

Leçon 1 • Meilleures pratiques pour le transfert de design

Couvre l'annotation, les spécifications de type « redline » et les flux de travail d'exportation d'actifs qui réduisent l'ambiguïté pour les développeurs. Des documents de transfert précis évitent des erreurs d'implémentation coûteuses.

Leçon 2 • Assurance qualité et tests du design responsive

Applique des tests multi-navigateurs et multi-appareils pour vérifier que le comportement responsive correspond à l'intention du design. L'assurance qualité comble l'écart entre les spécifications de design et l'implémentation en direct.

Leçon 3 • Métriques UX et mesure du succès

Définit des métriques quantitatives et qualitatives qui relient les décisions UX aux résultats commerciaux. Les métriques établies ici guident l'évaluation post-lancement dans le projet final.

Leçon 4 • Projet de synthèse et présentation du portfolio

Synthétise toutes les compétences du cours dans une étude de cas complète en design UX et web responsive. La présentation du portfolio prépare les étudiants aux entretiens professionnels en design.