Logo Laptop  MENU
Formations

PARCOURS

Concevoir un Design d’interface utilisateur

CPF

Certifier vos compétences en UI Design : méthodes pour créer des interfaces inspirantes, découverte des outils Figma et les règles d'Accessibilité numérique & éco-conception en e-learning.

En bref

Ce parcours de formation vous permet de valider le bloc de compétences “Concevoir un design d’interface utilisateur” de la certification professionnelle Concepteur designer graphique délivré par LISAA, de niveau 6 – (NSF 320 et 320v) enregistrée au RNCP, sous le numéro RNCP40365, par décision du directeur général de France Compétences en date du 28/03/2025. https://www.francecompetences.fr/recherche/rncp/40365/

2 modules de formation (à distance ou à Paris) : UI design (5 jours + 1 webinar post-formation) – 40h + Figma (2 jours) – 16h

1 module de formation e-learning : Accessibilité numérique & éco-conception16h

Les modules composant la formation sont également disponibles séparément.

Prochaine session

05 au 30 Octobre 2026

Lieu

à distance ou en présentiel + en e-learning

Financement

CPF, OPCO, France Travail

Financements

Participants

16 max.

Rythme

9h - 18h

Prix

4 050€HT 4 860€TTC

Note de nos apprenants

5/5

Voir les avis
Télécharger le programme
Postuler

Programme

UI Design

UI Design

Cette formation couvre le processus complet d’un projet UI — ancré dans les principes UX — du cadrage créatif à la soutenance finale.

Chaque journée alterne apports théoriques et ateliers pratiques sur Figma autour d’un projet fil rouge réaliste (site vitrine ou app mobile). Vous y construirez une identité visuelle, des maquettes HD, un système de composants et un prototype interactif. Vous découvrirez le vibe coding appliqué au design : générer des écrans par prompt avec Figma Make, puis itérer, critiquer et affiner le résultat.

Les principes UX (lois de la Gestalt, critères de Bastien & Scapin, design émotionnel de Don Norman) servent de socle à chaque décision d’interface. Les sujets transversaux — accessibilité (RGAA), éco-conception, tendances UI — sont intégrés à chaque étape plutôt que traités à part.

La formation se conclut par le handoff développeur et une soutenance orale du projet devant le groupe, simulant une présentation client : apprendre à donner du sens à ses choix et à convaincre ses commanditaires.

Une boîte à outils (plugins, ressources, comptes à suivre) est partagée pour continuer à progresser en autonomie.

Ergonomie Cas pratique Interfaces Figma Design System Design produit Branding Eco-conception UI Design Vibe-coding

Prochaine session :

05 au 09 Octobre 2026

  • Jour 1 Cadrer un projet : branding, identité visuelle et différenciation

    Les fondamentaux du branding et leur rôle en UI Design

    • Positionnement et différenciation de marque
    • Comprendre pourquoi le branding conditionne les décisions d’interface
    • Les briques de l’identité visuelle : logo, couleurs, typographies, formes et iconographie
    • Images, illustrations et vidéos au service de l’identité

    Prendre en main l’écosystème Figma

    • Découverte de Figma Design et FigJam
    • Collaboration, idéation et organisation des fichiers

    Lire et décoder un brief

    • Cerner le secteur et les enjeux à partir d’un brief
    • Enrichir sa recherche avec les bons mots-clés
    • Réaliser un benchmark ciblé du secteur

    Atelier fil rouge : Cadrage & direction créative

    • Choix du projet – site vitrine ou application mobile – à partir de deux briefs
    • Conception d’un moodboard et définition d’une première intention visuelle
    • Réalisation d’un benchmark ciblé
  • Jour 2 Poser les fondations : design émotionnel et conception d'interface

    Design émotionnel

    • Les trois niveaux du design émotionnel de Don Norman : viscéral, comportemental et réflexif
    • Psychologie des couleurs et des formes
    • Construire une hiérarchie émotionnelle dans une interface

    Construire les fondations d’un projet dans Figma

    • Styles de couleurs et hiérarchie typographique
    • Grilles, espacements et principes de mise en page
    • Poser des fondations graphiques cohérentes et réutilisables

    Accessibilité

    • Les règles essentielles du RGAA
    • Intégrer les principes d’accessibilité dès la conception visuelle

    Générer une première maquette avec Figma Make

    • De l’idée à une première maquette haute définition
    • Découverte d’un workflow de conception par vibe coding
    • Générer, affiner et critiquer une proposition par le prompt

    Atelier fil rouge : Fondations & première maquette

    • Mise en place des styles et fondations du projet
    • Génération de premiers écrans via Figma Make
    • Itérations et amélioration des propositions par le prompt
  • Jour 3 Structurer : mise en page, responsive et consistance visuelle

    Tendances actuelles en UI

    • Découverte et analyse des tendances contemporaines
    • Développer son regard critique et enrichir sa culture visuelle

    Mise en page dans Figma Design

    • Structurer et hiérarchiser ses écrans
    • Organiser efficacement ses éléments d’interface

    Atomic Design et composants

    • Comprendre la logique de l’Atomic Design
    • Créer, organiser et réutiliser des composants
    • Assurer la cohérence entre les différents écrans

    Design tactile et responsive

    • Concevoir pour différents supports
    • Adapter les interfaces aux usages web, mobile et tablette

    Produire ses assets UI

    • Trouver, créer et décliner des visuels
    • Utiliser Figma Weave pour assurer la cohérence entre les différents assets
    • Explorer Figma Community et les principales ressources utiles

    Atelier fil rouge : Écrans clés & système de composants

    • Amélioration et déclinaison des écrans principaux du projet
    • Création des composants et adaptation responsive
    • Production et mise en cohérence des assets avec Figma Weave
  • Jour 4 Donner vie et sens : micro-interactions, éco-conception et présentation

    Les micro-interactions comme vecteur émotionnel

    • Comprendre leur rôle dans l’expérience et la perception d’une interface
    • Donner du feedback, guider et engager l’utilisateur

    Prototyper au plus près du réel dans Figma Design

    • Créer des interactions et des parcours réalistes
    • Faciliter les tests utilisateurs et la projection dans l’expérience
    • Travailler le réalisme perçu d’un prototype

    Créer des animations avancées avec Figma Motion

    • Enrichir ses interfaces par le mouvement
    • Concevoir des animations cohérentes avec l’identité et l’expérience

    Éco-conception appliquée à la conception visuelle

    • Comprendre les principaux enjeux de sobriété numérique
    • Identifier les choix visuels ayant un impact sur la conception responsable
    • Effectuer une passe d’éco-conception sur une interface

    Présenter son travail en lui donnant du sens

    • Argumenter ses choix de conception
    • Construire un récit autour de son projet
    • Créer des slides de présentation efficaces

    Atelier fil rouge : Interactions & récit

    • Ajout de micro-interactions et d’animations sur les écrans clés
    • Passe d’éco-conception sur le projet
    • Construction du fil narratif de la présentation
  • Jour 5 Livrer et transmettre : collaboration dev, restitution et progression

    Prototypage interactif avancé

    • Finaliser les interactions et le parcours du prototype
    • Vérifier la cohérence globale de l’expérience

    Collaborer et transmettre aux développeurs

    • Les bonnes pratiques de handoff
    • Préparer et documenter ses fichiers
    • QA : accompagner l’intégration et contrôler la qualité de la réalisation

    Design System

    • Structuration d’un Design System
    • Adapter ses fondations et composants à différents univers de marque
    • Comprendre les enjeux du multi-branding

    Design-to-code

    • Comprendre et lire ce que Figma produit
    • Explorer le passage de la maquette au code
    • Travailler avec un LLM tel que Claude ou Cursor pour générer du code à partir d’une maquette et de données structurées / JSON

    Continuer à progresser

    • Comptes à suivre et sites de référence
    • Ressources et outils pour développer sa pratique
    • Ouverture et débat sur l’évolution du métier et des outils

    Atelier fil rouge : Restitution finale

    • Finalisation du prototype
    • Préparation du handoff
    • Finalisation des slides de présentation
    • Présentation du projet et restitution collective
  • +30j Suivi post formation : Webinar de 2h

    Suivi post formation : Webinar de 2h 

    Un mois après la conclusion de votre formation, nous vous proposons de vous rassembler en promotion avec votre intervenant pour un webinar de suivi. Cette session, de deux heures en visioconférence, sera l’occasion de réaliser un retour d’expérience (REX) approfondi, permettant à chacun de partager ses progrès, ses défis et ses réussites depuis la fin de la formation. Cela vous permettra de poser toutes les questions qui ont pu émerger lors de la mise en application des compétences acquises.

    Ce webinar devrait ainsi renforcer votre apprentissage, approfondir votre compréhension et vous aider à intégrer plus efficacement les connaissances et les compétences développées durant notre programme. 

    Nous sommes convaincus que cette session enrichira votre expérience d’apprentissage et consolidera les liens au sein de notre communauté de professionnels.

Figma

Figma

Maîtriser rapidement Figma grâce à des cas pratiques centrés sur la prise en main de l’outil. Vous approfondirez l’interface, la création de maquettes jusqu’au prototype fonctionnel. Apprenez à structurer vos fichiers, utiliser les composants de base et l’AutoLayout. L’objectif : acquérir des bases solides pour une collaboration efficace et devenir autonome sur la conception d’interfaces.

Tests Pratique Interfaces Prototypage Interactif Fondamentaux Librairies Vibe-coding

Prochaine session :

15 au 16 Octobre 2026

  • Jour 1 Fondations et organisation

    Découverte de la suite Figma

    • FigJam, Figma Design, Dev Mode, Figma Make, panorama de l’écosystème
    • Interface et raccourcis clés à maîtriser
    • Différence entre fichiers, pages, frames et calques

    Création d’un guide de style efficace

    • Créer et organiser ses styles : couleurs, typographies, ombres, effets
    • Grilles de mise en page et colonnes
    • Logique de la base 4 et application aux espacements
    • Préparer un guide de styles réutilisable

    Auto-layout & Contraintes

    • Logique d’empilement, padding, gap
    • Auto-layout imbriqués pour créer des sections et des pages
    • Contraintes et comportement au redimensionnement
  • Jour 2 Structurer son workflow dans Figma

    Composants & Atomic Design

    • Logique Atomic Design appliquée à Figma
    • Créer un composant, variants, component properties
    • Publier et organiser une bibliothèque partagée

    Responsive Design

    • Breakpoints et frames adaptatifs
    • Combiner auto-layout et contraintes pour des layouts flexibles

    Prototyper vos maquettes

    • Liaisons, triggers et transitions
    • Smart Animate : logique et cas d’usage
    • Tester et partager un prototype

    Collaborer sur Figma

    • Commentaires, partages, co-édition
    • Handoff développeurs : Dev Mode, inspect, exports

    Aller plus loin avec l’outil

    • Plugins incontournables
    • Figma Community : templates et ressources
    • Introduction aux variables (aperçu)
    • Introduction aux outils IA (aperçu)
  • ✔︎ Validation des acquis

    Les acquis de la formation seront validés au moyen d’un exercice de création de prototype interactif et d’animation d’une interface.

Accessibilité & Eco-conception

Accessibilité & Eco-conception

Maîtrisez les deux piliers incontournables du numérique responsable : l’Accessibilité et l’Éco-conception.

Ce module est essentiel pour concevoir des solutions véritablement inclusives et durables. Vous développerez une expertise pratique des normes (WCAG, RGAA) et des méthodes de sobriété numérique. Devenez un acteur du changement, capable de réaliser des audits d’accessibilité et d’éco-conception concrets, et de transformer vos projets en interfaces éthiques et centrées sur l’humain.

 

Tests Ergonomie Cas pratique Fondamentaux Stratégie Eco-conception

Prochaine session :

Immédiat

  • Les grands principes de l’Accessibilité Numérique

    • Qu’est-ce que l’accessibilité numérique ?
    • Obligation morale et arguments commercial
    • Exploration de l’environnement légal : Contexte juridique, obligations théoriques et sanctions pénales
    • Autres enjeux : Innovation, Référencement, Image de marque, Culture, Impact écologique…
  • Comprendre le handicap et son impact sur l’utilisation du numérique

    • Handicap Visuel, auditif, physique, cognitif
    • Handicap temporaire ou situationnel
    • Ateliers : Empathy lab
      Les Empathy labs permettent aux apprenants de se mettre à la place des utilisateurs ayant des besoins spécifiques en matière d’accessibilité, favorisant ainsi la compréhension des enjeux et des défis auxquels ils font face.
  • Comprendre le fonctionnement des technologies d’assistance

    • Aperçu des dispositifs d’aide : Reconnaissance vocale, loupe, lecteur d’écran…
    • Ateliers : Empathy lab
  • Les principaux critères d’Accessibilité

    • Normes et référentiels : WCAG et RGAA
    • Assurer des contenus alternatifs PERCEPTIBLE par tous
    • Rendre l’Interface UTILISABLE par tous
    • Assurer un contenu COMPRÉHENSIBLE par tous
    • Exercices et empathy lab
  • La conception Inclusive

    • Personas
    • Annotations des maquettes
    • Exercices
  • Comprendre les enjeux du design numérique responsable

    • Pollution numérique : état des lieux et enjeux environnementaux et sociaux
    • Les risques pour la santé physique et l’équilibre mental liés aux usages numériques
    • Lien entre performance, sobriété et expérience utilisateur
    • Impacts business : anticipation des régulations, attentes des utilisateurs et image de marque
    • Introduction aux indicateurs clés de mesure de l’impact environnemental d’un service numérique
  • Les principes du design éco-responsable

    • Les fondements d’une interface sobre, accessible et éthique
    • Éco-conception et design centré sur l’humain : une approche complémentaire
    • Bonnes pratiques pour réduire l’empreinte carbone tout en améliorant la performance et la lisibilité
    • Étude de cas : exemples de stratégies de conception durable
  • Exercice pratique - Cartographie des parties prenantes

    • Lister et cartographie les parties prenantes et les relations
    • Imaginer les risques avec le design fiction
    • Choisir la cible prioritaire
  • Exercice pratique - Diagnostic d’un parcours numérique

    • Analyse d’un parcours numérique réel à l’aide d’une grille d’évaluation
    • Les bonnes pratiques UX à adopter
    • Identification des points d’amélioration sous l’angle de l’éco-responsabilité
    • Discussion collective sur les leviers de sobriété et d’accessibilité
  • Exercice pratique - Repenser une interface

    • Étude de cas : refonte d’un parcours numérique
    • Les bonnes pratiques UI à adopter
    • Application concrète des principes de design éco-responsable
    • Restitution collective et partage des apprentissages
  • Sensibiliser et embarquer les équipes

    • Comment convaincre des bénéfices du design numérique responsable
    • Mise en place d’actions concrètes dans les projets et au sein des équipes
    • Outils et ressources pour poursuivre la démarche
  • ✔︎ Tests et évaluations

    Les acquis de la formation seront validés au moyen :

    • Évaluations automatiques
    • Vérifications manuelles et fonctionnelles
    • Exercice: Flash Audit
    • Tests Utilisateurs

    Le travail individuel est estimé à une dizaine d’heures pour réaliser les exercices.

Image prise lors d'un workshop sur l'IA
Entretiens pendant une formation à Le Laptop UX research discovery
Entretiens pendant une formation à Le Laptop UX research discovery

Prochaines sessions

05 au 30 Octobre 2026

Postuler
Paris et à distance
  • UI Design

    5 au 9 octobre 2026 + 12 novembre 2026 (Webinar) - à distance

  • Figma

    15 au 16 octobre 2026 - à Paris

Postuler

Postuler
Aucune donnée pour cet index.
  • UI Design

    Aucune donnée pour cet index.

  • Figma

    Aucune donnée pour cet index.

Postuler

Intervenants

Voir tous les intervenants

Modalités

Toute la FAQ

« Formation complète, avec de la théorie et de la pratique, des formateurs très pédagogues et sympathiques. Je recommande ! »

Camille Delabre

Camille Delabre

Ui designer & artistic director

« J’ai beaucoup apprécié la qualité de l’animation et les thématiques abordées afin de bien saisir les bases mais aussi pour pouvoir voir plus loin dans sa réflexion et pratique »

Julia Gualdi

Julia Gualdi

UI designer

« Très satisfait à la fois du formateur et du contenu de la formation »

 

Michaël Mérignargues

Michaël Mérignargues

Graphic Designer / Illustrator

« La formation correspond tout à fait à l’idée que je m’en faisais. Interactive, dynamique et avec des modules permettant d’être dans l’opérationnel. »

Rémi Peyre

Rémi Peyre

Directeur UX & design

« Claire, nette, concise, pas trop longue ni trop courte, les formateurs sont top, le lieu et tout ce qui va avec est top aussi, la possibilité de faire en distanciel.»

Laurie CHONAVEL

Laurie CHONAVEL

UX/UI Designer - Session Janvier 2025

« Le formateur est très compétent (pédagogue et expert de son sujet) et le contenu est très complet »

Morgane MASSIMI

Morgane MASSIMI

Product Designer - Session Janvier 2025

« Formation géniale, intervenant de qualité, vraiment je suis super contente. J’ai appris énormément de choses.»

Julie POUPAT

Julie POUPAT

Product Designer - Session Janvier 2025

« La qualité des explications et le sujet UI abordé en profondeur.»

Elise TRUONG

Product Owner - Session Juin 2025

« Très réticente au début de faire une formation en visio pendant une semaine mais le fait d’être en petit groupe permet une bonne interaction avec l’animateur et de suivre un planning rythmé m’a permis de progresser en UI design L’avantage du Laptop est de rencontré des animateurs qui n’hésitent pas à partager leurs expériences, la manière dont il travaille sur leur projet »

Virginia DELANSAY

Virginia DELANSAY

UX/UI Designer - Session Février 2026

En lien

Comprendre l’accessibilité numérique Blog

Comprendre l’accessibilité numérique

6 idées de cadeaux à mettre sous le sapin des UX/UI designers Blog

6 idées de cadeaux à mettre sous le sapin des UX/UI designers

UX, UI, Product Design : pourquoi tout le monde s’y met Blog

UX, UI, Product Design : pourquoi tout le monde s’y met

Communauté

Rejoignez les Designers de Laptop

Connectez-vous

FAQ

Les questions fréquentes

Parcourir la FAQ
Dernière modification de cette page : 09-09-2026 à 16:32:33

Devenir membre du Laptop club

Rejoindre la communauté

carte membre

👉 Découvrez nos formations IA mises à jour tous les mois : concevoir avec l'IA tout en maintenant l’humain au centre du processus créatif ✨

En savoir plus