Formation en UX et Webdesign Responsive

Leçon 1 • Processus de Design Thinking

Présente le cadre de 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, couvrant la facilité d'utilisation, l'utilité et l'attrait. Établit le vocabulaire utilisé tout au long du cours.

Leçon 3 • Accessibilité et Design Inclusif

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

Leçon 1 • Enquêtes et Méthodes Quantitatives

Présente la conception d'enquêtes, l'analyse comparative de la convivialité 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ées et semi-structurées, ainsi que l'observation en contexte. Développe les compétences pour capturer les comportements et motivations authentiques des utilisateurs.

Leçon 3 • Planification d'une Étude de Recherche

Couvre les objectifs, le périmètre et la sélection de la méthode de recherche avant le début du travail sur le terrain. Garantit que les questions de recherche s'alignent sur les décisions de conception à 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 étiquettes 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 utilisateur établis dans 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 d'écran de moyenne fidélité. Développe la maîtrise des outils appliquée dans les phases de prototypage et de livraison.

Leçon 2 • Esquisse et Maquettes Filaires Basse Fidélité

Présente l'esquisse rapide et le maquettage filaire papier comme outils d'idéation rapide. Les artefacts basse fidélité communiquent la mise en page sans distraire les parties prenantes avec un polissage visuel.

Leçon 3 • Construction 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 dans la recherche.

Leçon 4 • Tests de Convivialité avec des Prototypes

Applique les prototypes dans des tests de convivialité modérés et non modérés pour valider les décisions de conception. Boucle la boucle recherche-conception avant l'investissement dans la conception visuelle.

Leçon 1 • Mise en Page, Espacement et Hiérarchie Visuelle

Applique des systèmes de grille, des échelles d'espacement et un 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 scannabilité.

Leçon 2 • Typographie pour Interfaces Numériques

Couvre la sélection de police, l'échelle, la hauteur de ligne et le contraste 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 UI

Enseigne la psychologie des couleurs, les exigences de contraste et la construction systématique de palettes. 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 UI. Les actifs visuels doivent renforcer le sens sans créer d'ambiguïté.

Leçon 1 • Media Queries et Points de Rupture

Applique des 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 • CSS Flexbox pour Mises en Page Responsives

Enseigne les axes, l'alignement et l'encapsulage Flexbox 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 et sizes, ainsi que 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 • CSS Grid pour Mises en Page Complexes

Couvre les zones de modèle Grid, le placement automatique et les lignes nommées pour les mises en page bidimensionnelles. Grid 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 CSS et Évolutivité

Présente les méthodologies BEM, utility-first et les Modules CSS 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 feedback d'interaction. Les micro-animations améliorent la performance perçue et guident l'attention de l'utilisateur.

Leçon 4 • Animations CSS avec Keyframes

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

Leçon 1 • Bonnes Pratiques de Livraison de Design

Couvre l'annotation, les spécifications de type "redlines" et les flux d'exportation d'actifs qui réduisent l'ambiguïté pour les développeurs. Des documents de livraison précis évitent des erreurs de mise en œuvre coûteuses.

Leçon 2 • QA et Tests de Design Responsive

Applique des tests multi-navigateurs et multi-appareils pour vérifier que le comportement responsive correspond à l'intention de conception. Le QA comble l'écart entre les spécifications de conception et la mise en œuvre 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 de Portfolio

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