Formation Webdesigner

Leçon 1 • Aperçu des outils de design essentiels

Passe en revue les outils standard du secteur pour le wireframing, le prototypage et la création d'actifs. Les étudiants sélectionnent les outils appropriés pour chaque phase du processus de design.

Leçon 2 • Flux de travail et processus de design

Présente les étapes de découverte, d'idéation, de design et de transfert. Établit un processus reproductible que les étudiants appliquent tout au long du cours.

Leçon 3 • Fonctionnement du web

Couvre les navigateurs, serveurs, DNS et HTTP pour expliquer comment les pages sont demandées et livrées. Ancre toutes les futures décisions de design dans la réalité technique.

Leçon 1 • Théorie des couleurs pour le web

Enseigne la teinte, la saturation, le contraste et les modèles d'harmonie des couleurs. Les étudiants créent des palettes accessibles qui renforcent l'identité de marque et guident l'attention de l'utilisateur.

Leçon 2 • Fondamentaux de la typographie

Couvre la classification des polices, la hiérarchie et la lisibilité sur écran. Les étudiants composent un texte qui communique clairement sur toutes les tailles d'écran.

Leçon 3 • Mise en page et composition

Applique les systèmes de grille, l'alignement et les espaces blancs pour organiser le contenu des pages. Les étudiants produisent des mises en page équilibrées et faciles à parcourir en utilisant des règles de composition éprouvées.

Leçon 4 • Imagerie et iconographie

Guide la sélection, le recadrage et le style des photos, illustrations et icônes. Les étudiants associent les actifs visuels au ton de la marque et au contexte fonctionnel.

Leçon 1 • Texte, liens et listes

Couvre les paragraphes, les éléments en ligne, les balises d'ancrage et les types de listes. Les étudiants balisent correctement un contenu textuel riche pour l'affichage et les technologies d'assistance.

Leçon 2 • Anatomie d'un document HTML

Explique les éléments doctype, head et body ainsi que leurs rôles. Les étudiants écrivent des documents HTML valides à partir de zéro en utilisant un imbrication et une syntaxe correctes.

Leçon 3 • Images, médias et intégrations

Enseigne les éléments img, figure, video, audio et iframe avec les attributs appropriés. Les étudiants intègrent des médias de manière accessible en utilisant le texte alternatif et les légendes.

Leçon 4 • Formulaires et éléments de saisie

Crée des formulaires accessibles à l'aide de labels, fieldsets et types d'input. Les étudiants créent des formulaires de contact et de saisie de données avec une structure sémantique correcte.

Leçon 1 • Syntaxe CSS et cascade

Explique les sélecteurs, propriétés, spécificité et héritage. Les étudiants déboguent les conflits de styles en comprenant comment la cascade résout les règles concurrentes.

Leçon 2 • Modèle de boîte et espacement

Couvre les marges, bordures, padding et dimensions du contenu. Les étudiants contrôlent l'espacement avec précision et évitent les bugs de mise en page courants causés par une mauvaise compréhension du modèle de boîte.

Leçon 3 • CSS Grid pour les mises en page bidimensionnelles

Présente les pistes de grille, les zones et le placement pour des mises en page complexes. Les étudiants recréent des designs multi-colonnes à l'aide de Grid sans utiliser de flottements.

Leçon 4 • Flexbox pour les mises en page unidimensionnelles

Enseigne les propriétés du conteneur flex et des éléments flex pour les dispositions en lignes et en colonnes. Les étudiants construisent des barres de navigation, des rangées de cartes et des mises en page centrées avec Flexbox.

Leçon 1 • Test et débogage de la responsive

Utilise les outils de développement du navigateur et des appareils réels pour trouver et corriger les problèmes de mise en page. Les étudiants créent une checklist de test appliquée à chaque projet ultérieur.

Leçon 2 • Grilles fluides et images flexibles

Convertit les mises en page à pixels fixes en unités fluides basées sur des pourcentages. Les étudiants utilisent des unités relatives et max-width pour éviter les débordements sur n'importe quel écran.

Leçon 3 • Media queries et points de rupture

Enseigne les requêtes min-width et max-width et comment choisir les points de rupture. Les étudiants écrivent des media queries qui répondent aux besoins du contenu plutôt qu'aux noms d'appareils.

Leçon 4 • Stratégie de design mobile-first

Établit la philosophie mobile-first et ses avantages en termes de performance. Les étudiants restructurent des designs existants pour partir du plus petit viewport et monter en gamme.

Leçon 1 • Architecture de l'information

Couvre les plans de site, le tri par cartes et le libellé de la navigation pour organiser logiquement le contenu. Les étudiants créent une IA qui réduit la charge cognitive et facilite la trouvabilité.

Leçon 2 • Wireframing et prototypage basse fidélité

Produit des croquis et des wireframes numériques pour explorer la mise en page avant le design visuel. Les étudiants itèrent rapidement en fonction des retours des pairs et des parties prenantes.

Leçon 3 • Personas utilisateur et cartes de parcours

Construit des personas fondés sur des preuves et cartographie les parcours utilisateur pour identifier les points de friction. Les étudiants utilisent ces artefacts pour justifier les décisions de design tout au long d'un projet.

Leçon 4 • Fondamentaux des tests d'utilisabilité

Planifie et réalise des tests d'utilisabilité modérés pour valider les décisions de design. Les étudiants analysent les résultats et priorisent les corrections à l'aide de niveaux de gravité.

Leçon 1 • Maintenance et passage à l'échelle du système

Couvre le versioning, les flux de contribution et la gouvernance pour les systèmes de design en croissance. Les étudiants établissent des processus qui maintiennent la cohérence du système à mesure que les équipes s'agrandissent.

Leçon 2 • Documentation des composants et transfert

Rédige des directives d'utilisation, des exemples de bonnes et mauvaises pratiques, et des annotations de code pour chaque composant. Les étudiants préparent des fichiers de transfert que les développeurs peuvent implémenter sans ambiguïté.

Leçon 3 • Schémas de composants UI principaux

Conçoit des boutons, cartes, modales, alertes et contrôles de formulaire selon des normes cohérentes. Les étudiants documentent les états des composants, y compris les états par défaut, survol, focus et désactivé.

Leçon 4 • Tokens de design et guides de style

Crée des tokens nommés pour la couleur, l'espacement et la typographie qui pilotent l'ensemble du système. Les étudiants produisent un guide de style qui sert de source unique de vérité.

Leçon 1 • Mesure de la performance et Core Web Vitals

Utilise des outils d'audit de performance pour mesurer le chargement, l'interactivité et la stabilité visuelle. Les étudiants interprètent les scores et priorisent les correctifs qui ont le plus d'impact sur l'expérience utilisateur.

Leçon 2 • Optimisation des images et des actifs

Compresse les images, choisit des formats modernes et applique le chargement différé des actifs hors écran. Les étudiants réduisent le poids de la page sans perte de qualité visible.

Leçon 3 • Audit d'accessibilité et correction

Effectue des audits automatisés et manuels conformément aux directives d'accessibilité des contenus web. Les étudiants corrigent les problèmes de contraste, de navigation au clavier et d'ARIA trouvés dans leurs projets.

Leçon 4 • Déploiement et checklist de mise en ligne

Couvre les options d'hébergement, la configuration du domaine, le SSL et les contrôles de qualité avant le lancement. Les étudiants remplissent une checklist de mise en ligne avant de publier leur projet de fin d'études.