Formation en conception web

Leçon 1 • Présentation des technologies web fondamentales

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. Garantit un environnement productif avant le début de tout projet.

Leçon 3 • Fonctionnement du web

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

Leçon 1 • Imagerie et iconographie

Aborde la sélection, l'optimisation et le style des images et des icônes pour les contextes web. Les étudiants intègrent des ressources visuelles qui renforcent le contenu plutôt que de distraire.

Leçon 2 • Typographie sur écran

Aborde la sélection des polices, l'échelle, la longueur de ligne et l'espacement pour la lisibilité numérique. Les étudiants établissent des systèmes typographiques fonctionnant sur différentes tailles d'écran.

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 accentuation

Enseigne l'utilisation de la taille, du poids, de la couleur et de 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

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

Leçon 3 • Fondamentaux de l'accessibilité

Introduit les critères de design perceptible, opérable, compréhensible et robuste. Les étudiants auditent les designs par rapport aux directives d'accessibilité et corrigent les défaillances courantes.

Leçon 4 • Méthodes de recherche UX

Introduit les entretiens, les enquêtes et l'observation comme principaux outils de recherche. 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 wireframes 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 • Wireframing basse fidélité

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

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

Aborde la planification, l'animation et l'analyse des 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 • Bases du design d'interaction

Introduit les états, les transitions et les micro-interactions comme outils de communication. Les étudiants conçoivent des boucles de retour 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 refluent sur différentes largeurs. Les étudiants construisent des mises en page qui s'adaptent sans se casser aux tailles intermédiaires.

Leçon 2 • Points de rupture et media queries

Aborde la sélection des points de rupture en fonction des besoins du contenu plutôt que des noms d'appareils. Les étudiants écrivent des media queries qui déclenchent des changements de mise en page à des seuils significatifs.

Leçon 3 • Typographie et espacement responsives

Met à l'échelle la typographie et l'espacement de manière proportionnelle sur les points de rupture pour une lisibilité cohérente. Les étudiants utilisent des techniques de typographie fluide pour éliminer les sauts de taille gênants.

Leçon 4 • Composants et motifs adaptatifs

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

Leçon 1 • Tokens de design et bases stylistiques

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

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

Aborde 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 utiliser sans recréer les éléments.

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

Enseigne la rédaction de directives d'utilisation, d'exemples à faire/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 liées au défilement et parallaxe

Aborde 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 aux performances ou à l'accessibilité.

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

Conçoit les interactions de balayage, pincement, glisser-déposer et appui long pour les interfaces tactiles. Les étudiants font correspondre les gestes à l'intention de l'utilisateur et fournissent un retour visuel clair.

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

Conçoit les transitions entre les pages, les panneaux et les états des composants pour maintenir le contexte spatial. Les étudiants chorégraphient les 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 des 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 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 timing qui maintiennent 60 ips sur les appareils cibles.

Leçon 3 • Audit des performances et itération

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

Leçon 4 • Optimisation des images et des ressources

Aborde la sélection des formats, la compression, le chargement différé et les images responsives pour la performance. Les étudiants réduisent la charge utile des ressources sans dégradation visible de la qualité.