À propos

À propos de cette formation

Bienvenue sur la plateforme de formation Production Web & Interface.

Cette formation en collaboration avec Ynov est conçue pour vous accompagner dans votre apprentissage du métier de Product Designer UX/UI.

Les 5 modules de formation

Objectif

Donner aux Étudiants en Product Design une base technique solide pour comprendre, concevoir et challenger l’intégration web.

Programme du module

  • Fonctionnement technique du web
    Hébergement, domaines, serveurs, navigateurs, requêtes, CDN, HTTPS.
  • HTML avancé
    Structure sémantique, accessibilité, ARIA, organisation des contenus pour l’UX.
  • CSS — De la mise en forme à l’animation
    • Bases : sélecteurs, box model, typo, couleurs, spacing
    • Mises en page : Flexbox, Grid
    • Animations et transitions pour micro‑interactions
    • Introduction aux variables CSS (design tokens)
  • Responsive Design avancé
    Adaptation mobile / desktop, grilles fluides, typographie responsive, tests multi‑devices.
  • JavaScript intermédiaire pour designers
    DOM, événements, interactions simples (accordéons, sliders, menus), compréhension de la logique d’un composant interactif.

Objectif

Rendre les Étudiants en Product Design autonomes sur la structuration et la gestion de contenus dans des CMS modernes.

Programme du module

  • WordPress
    Installation, thèmes, pages, articles, menus, widgets, extensions clés, logique de templates.
  • Gestion avancée
    Types de contenus, organisation de l’information, bonnes pratiques UX dans un CMS.
  • Shopify
    Structure d’une boutique, produits, collections, thèmes, sections, personnalisation visuelle.
  • SEO & performance de base
    URLs, métadonnées, poids des médias, impact sur l’expérience utilisateur.
  • Vision Product Designer
    Comment penser l’architecture de contenu pour servir l’UX et le parcours utilisateur.

Objectif

Concevoir des expériences produit complètes, du besoin utilisateur à l’interface détaillée.

Programme du module

  • UX — Fonctionnalités du produit, ergonomie & utilisateurs
    • Compréhension du produit, des fonctionnalités clés, des besoins utilisateurs
    • Personas, scénarios d’usage, parcours, priorisation des fonctionnalités
    • Ergonomie web appliquée aux interfaces complexes
  • UI — Design System (Illustrator / Figma)
    • Création de styles : couleurs, typo, iconographie, grilles
    • Composants UI : boutons, formulaires, cartes, navigation
    • Usage combiné Illustrator / Figma pour assets (icônes, SVG, visuels)
  • UI avancée — Atomic Design (Illustrator / Figma)
    • Composants dynamiques, templates et pages dynamiques
    • Déclinaisons d’états : hover, focus, disabled, error, success
    • Intégration des SVG (icônes, illustrations) dans les composants
    • Cohérence visuelle et interactionnelle à l’échelle du produit

Objectif

Transformer les interfaces en expériences interactives réalistes, testables et partageables.

Programme du module

  • Prototypage Figma avancé
    • Auto‑layout, variants, composants imbriqués
    • Interactions : clic, hover, drag, keypress
    • Transitions, smart animate
  • Scénarios interactifs
    • Parcours complets : onboarding, checkout, dashboard, etc.
    • Gestion des états : loading, erreur, vide, succès
  • Préparation aux tests utilisateurs
    • Prototypes réalistes, navigation fluide
    • Storytelling produit à partir du prototype
  • Handoff orienté dev
    • Inspection des propriétés, contraintes, redlines
    • Export d’assets (PNG, SVG), organisation des pages et frames

Objectif

Connecter design, intégration et livrables finaux autour d’un projet fil rouge complet.

Programme du module

  • Intégration avancée (Bolt + IA VSC)
    • Compréhension du lien design → code
    • Génération de composants à partir de maquettes
    • Ajustements UI/UX après intégration
    • Vérification de la cohérence entre Figma et rendu navigateur
  • Atelier fil rouge continu
    • Projet long : de la définition du produit à l’interface intégrée
    • Itérations successives sur UX, UI, prototypage et intégration
    • Travail en conditions quasi‑réelles (contraintes, délais, arbitrages)
  • Préparation des livrables & intégration technique
    • Documentation du design system
    • Exports optimisés (SVG, images, assets)
    • Préparation des supports pour soutenance (dossier, démo, storytelling)

Épreuves

Réalisation et soutenance d’un projet complet d’interface web :

  • Soutenance technique intermédiaire (présentation de l’état du projet, choix UX/UI, intégration)
  • Soutenance finale (parcours complet, démonstration, justification des décisions)
  • Remise des épreuves et bilan

Votre formateur

Cette formation est dispensée par Frédéric Moitry, expert en conception d’interfaces et expérience utilisateur.

Les fiches pédagogiques sont alimentées par une veille automatisée des meilleures sources francophones du web design et de l’UX.