Formation en conception web

Leçon 1 • Aperçu des technologies Web de base

Présente HTML, CSS et JavaScript comme les trois piliers de la production Web. Clarifie le rôle de chaque technologie afin que les designers comprennent ce qu'ils façonnent.

Leçon 2 • Configuration d'un espace de travail de design

Guide les étudiants dans la sélection d'outils, l'organisation des fichiers et la configuration des navigateurs pour le travail de design. Assure un environnement productif avant le début de tout projet.

Leçon 3 • Comment fonctionne le Web

Couvre l'architecture client-serveur, les requêtes HTTP et les pipelines de rendu du navigateur. Établit le contexte technique dans lequel chaque décision de design opère.

Leçon 1 • Imagerie et iconographie

Couvre la sélection, l'optimisation et la mise en forme des images et des icônes pour les contextes Web. Les étudiants intègrent des actifs visuels qui renforcent le contenu plutôt que de le distraire.

Leçon 2 • Typographie à l'écran

Couvre la sélection des polices de caractères, l'échelle, la longueur de ligne et l'espacement pour la lisibilité numérique. Les étudiants établissent des systèmes typographiques qui fonctionnent sur différentes tailles d'appareils.

Leçon 3 • Mise en page, grille et espacement

Présente les systèmes de grille, les espaces blancs et l'alignement comme outils d'ordre visuel. Les étudiants conçoivent des mises en page structurées qui guident l'œil de manière prévisible.

Leçon 4 • Hiérarchie visuelle et emphase

Enseigne la taille, le poids, la couleur et la position comme signaux de hiérarchie. Les étudiants dirigent l'attention des utilisateurs vers le contenu prioritaire grâce à des choix visuels délibérés.

Leçon 1 • Personas utilisateur et cartes de parcours

Enseigne la construction de personas à partir de données de recherche et la cartographie des parcours utilisateur de bout en bout. Les étudiants utilisent ces artefacts pour aligner les équipes autour des objectifs des utilisateurs.

Leçon 2 • Architecture de l'information

Couvre la structure du site, les modèles de navigation et les stratégies de catégorisation du contenu. Les étudiants organisent l'information pour que les utilisateurs trouvent ce dont ils ont besoin avec un minimum d'effort.

Leçon 3 • Fondements de l'accessibilité

Présente les critères de design perceptibles, utilisables, compréhensibles et robustes. Les étudiants audient les designs par rapport aux directives d'accessibilité et corrigent les défaillances courantes.

Leçon 4 • Méthodes de recherche UX

Présente les entrevues, les sondages et l'observation comme outils de recherche principaux. Les étudiants recueillent des données qualitatives et quantitatives pour orienter la direction du design.

Leçon 1 • Prototypage haute fidélité

Applique le design visuel aux fils de fer et relie les écrans en prototypes cliquables. Les étudiants produisent des artefacts suffisamment proches du produit final pour des tests utilisateur significatifs.

Leçon 2 • Fil de fer basse fidélité

Construit des fils de fer en niveaux de gris qui définissent la structure sans mise en forme visuelle. Les étudiants se concentrent sur la logique de mise en page et le placement du contenu avant l'esthétique.

Leçon 3 • Tests d'utilisabilité des prototypes

Couvre la planification, l'animation et l'analyse de tests d'utilisabilité sur des prototypes. Les étudiants itèrent les designs en fonction du comportement observé des utilisateurs plutôt que d'hypothèses.

Leçon 4 • Notions de base du design d'interaction

Présente les états, les transitions et les micro-interactions comme outils de communication. Les étudiants conçoivent des boucles de rétroaction qui rendent les interfaces réactives et intuitives.

Leçon 1 • Grilles fluides et mises en page flexibles

Enseigne les grilles basées sur des pourcentages et les conteneurs flexibles qui se réorganisent sur différentes largeurs. Les étudiants construisent des mises en page qui s'adaptent sans se briser aux tailles intermédiaires.

Leçon 2 • Points de rupture et requêtes média

Couvre la sélection de points de rupture basés sur les besoins du contenu plutôt que sur les noms d'appareils. Les étudiants écrivent des requêtes média qui déclenchent des changements de mise en page à des seuils significatifs.

Leçon 3 • Typographie et espacement réactifs

Dimensionne la typographie et l'espacement proportionnellement entre les points de rupture pour une lisibilité constante. Les étudiants utilisent des techniques de typographie fluide pour éliminer les sauts de taille brusques.

Leçon 4 • Composants et motifs adaptatifs

Conçoit des composants qui changent de structure, pas seulement de taille, à différents points de rupture. Les étudiants construisent une navigation, des cartes et des tableaux qui s'adaptent intelligemment.

Leçon 1 • Jetons de design et fondations de style

Définit les jetons de design comme la couche atomique d'un système de design pour la couleur, la typographie et l'espacement. Les étudiants structurent les jetons afin qu'ils propagent les changements de manière efficace dans tout le système.

Leçon 2 • Construction d'une bibliothèque de composants

Couvre la construction de boutons, formulaires, cartes et composants de navigation dans un outil de design. Les étudiants produisent une bibliothèque que les équipes peuvent consommer sans recréer d'éléments.

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

Enseigne la rédaction de directives d'utilisation, d'exemples à faire et à ne pas faire, et de justifications pour chaque composant. Les étudiants produisent une documentation qui permet une adoption cohérente dans toutes les équipes.

Leçon 4 • Architecture des composants

Enseigne la méthodologie de design atomique pour construire des composants des atomes aux organismes. Les étudiants structurent les composants pour une réutilisation maximale et une redondance minimale.

Leçon 1 • Principes du design de mouvement

Applique les principes d'animation tels que l'assouplissement, l'anticipation et le suivi aux contextes UI. Les étudiants distinguent le mouvement décoratif du mouvement fonctionnel qui facilite la compréhension.

Leçon 2 • Interactions de défilement et de parallaxe

Couvre les animations déclenchées par le défilement et les effets de parallaxe comme outils narratifs et d'engagement. Les étudiants appliquent ces techniques sans nuire à la performance ou à l'accessibilité.

Leçon 3 • Conception d'interactions gestuelles et tactiles

Conçoit des interactions de balayage, pincement, glissement et appui long pour les interfaces tactiles. Les étudiants associent les gestes à l'intention de l'utilisateur et fournissent une rétroaction visuelle claire.

Leçon 4 • Conception de transitions et de changements d'état

Conçoit des transitions entre les pages, les panneaux et les états des composants pour maintenir le contexte spatial. Les étudiants chorégraphient des changements d'état qui semblent logiques et continus.

Leçon 1 • Métriques de performance pour les designers

Présente les Core Web Vitals et la performance perçue comme métriques pertinentes pour le design. Les étudiants relient des choix de design spécifiques à des résultats mesurables de chargement et d'interaction.

Leçon 2 • Performance des animations et des interactions

Enseigne la conception d'animations qui s'exécutent sur le thread de composition pour éviter les saccades. Les étudiants choisissent des propriétés CSS et un rythme qui maintiennent 60 images par seconde sur les appareils cibles.

Leçon 3 • Audit et itération de la performance

Utilise les outils du navigateur et les services d'audit en ligne pour mesurer et diagnostiquer la performance. Les étudiants établissent un cycle répétable d'audit-correction-vérification pour une optimisation continue.

Leçon 4 • Optimisation des images et des actifs

Couvre la sélection de format, la compression, le chargement différé et les images réactives pour la performance. Les étudiants réduisent le poids des actifs sans dégradation visible de la qualité.