About

About this training

Welcome to the training platform Web Production & Interface. This online training is designed to support you in your learning of the profession of Product Designer UX/UI.

The 5 training modules

Objective

To give Product Design students a solid technical foundation to understand, design and challenge web integration.

Module program

  • Technical operation of the web
    Hosting, domains, servers, browsers, requests, CDN, HTTPS.
  • Advanced HTML
    Semantic structure, accessibility, ARIA, content organization for UX.
  • CSS — From formatting to animation
    • Basics: selectors, box model, typography, colors, spacing
    • Layouts: Flexbox, Grid
    • Animations and transitions for micro-interactions
    • Introduction to CSS variables (design tokens)
  • Advanced Responsive Design
    Mobile/desktop adaptation, fluid grids, responsive typography, multi-device testing.
  • Intermediate JavaScript for designers
    DOM, events, simple interactions (accordions, sliders, menus), understanding the logic of an interactive component.

Objective

To empower Product Design students to independently structure and manage content in modern CMS.

Module program

  • WordPress
    Installation, themes, pages, articles, menus, widgets, key extensions, template logic.
  • Advanced Management
    Content types, information organization, UX best practices in a CMS.
  • Shopify
    Structure of a store, products, collections, themes, sections, visual customization.
  • SEO & basic performance
    URLs, metadata, media size, impact on user experience.
  • Vision Product Designer
    How to design content architecture to serve UX and the user journey.

Objective

Designing complete product experiences, from user needs to detailed interfaces.

Module program

  • UX — Product features, ergonomics & users
    • Understanding of the product, key features, and user needs
    • Personas, use cases, user journeys, feature prioritization
    • Web ergonomics applied to complex interfaces
  • UI — Design System (Illustrator / Figma)
    • Creating styles: colors, typography, iconography, grids
    • UI components: buttons, forms, maps, navigation
    • Combined use of Illustrator / Figma for assets (icons, SVGs, visuals)
  • Advanced UI — Atomic Design (Illustrator / Figma)
    • Dynamic components, templates, and dynamic pages
    • State variations: hover, focus, disabled, error, success
    • Integrating SVGs (icons, illustrations) into components
    • Visual and interactional consistency across the product

Objective

Transforming interfaces into realistic, testable and shareable interactive experiences.

Module program

  • Advanced Figma prototyping
    • Auto-layout, variants, nested components
    • Interactions: click, hover, drag, keypress
    • Transitions, smart animation
  • Interactive scenarios
    • Complete journeys: onboarding, checkout, dashboard, etc.
    • State management: loading, error, empty, success
  • Preparing for user testing
    • Realistic prototypes, smooth navigation
    • Storytelling produced from the prototype
  • development-oriented handoff
    • Property inspection, constraints, redlines
    • Export of assets (PNG, SVG), organization of pages and frames

Objective

Connecting design, integration and final deliverables around a comprehensive, overarching project.

Module program

  • Advanced integration (Bolt + VSC AI)
    • Understanding the link between design and code
    • Component generation from mockups
    • UI/UX adjustments after integration
    • Checking consistency between Figma and browser rendering
  • Continuous thread workshop
    • Long-term project: from product definition to integrated interface
    • Successive iterations on UX, UI, prototyping and integration
    • Working in near-real-world conditions (constraints, deadlines, trade-offs)
  • Preparation of deliverables & technical integration
    • Design system documentation
    • Optimized exports (SVG, images, assets)
    • Preparation of materials for presentation (dossier, demo, storytelling)

Tests

Creation and presentation of a complete web interface project:

  • Intermediate technical presentation (project status presentation, UX/UI choices, integration)
  • Final presentation (complete presentation, demonstration, justification of decisions)
  • Handing over the exams and summary

Your training

The training courses were designed by LMSPro, by experts in interface design and user experience. The teaching materials are powered by automated monitoring of the best French-language resources on Product Design and UX/UI.