Formation Design UI
Concevez des interfaces web agréables et accessibles : culture du design, ergonomie, expérience utilisateur et charte graphique.
Notre équipe vous conseille
Est-ce la bonne formation pour vous ?
Votre objectif, votre niveau, votre financement : notre équipe vérifie avec vous que cette formation vous correspond, ou vous oriente vers celle qui vous conviendra mieux.
- Pour qui
- Maquettistes, infographistes, webmasters, responsables communication, chefs de projet...
- Prérequis
Bonne connaissance de l’environnement informatique (pratique courante d’OS X ou de Windows)
- Durée
- 70 h · 10 jours
En bref
Ce que vous saurez faire
- Acquérir la culture du design web et les principes de l’ergonomie.
- Prendre en compte l’expérience utilisateur, l’accessibilité et le facteur humain.
- Créer ou adapter une charte graphique web et un design system.
- Concevoir des wireframes et des maquettes pour ordinateur, tablette et mobile.
- Réaliser des prototypes interactifs et les tester.
- Partager et transmettre ses maquettes aux développeurs.
Programme
Formation en Design UI
01Culture du design web
- Histoire du webdesign, évolution des outils et des langages
- Tendances actuelles et processus de conception
02Ergonomie et UX
- Vocabulaire UX / UI ; lois de l’ergonomie
- Personas et parcours utilisateurs
- Démarche itérative : comprendre, explorer, concrétiser, tester
- Accessibilité numérique (RGAA, WCAG)
03Charte graphique web
- Contenu d’une charte ; identité graphique et contraintes d’usage
- Inventaire des contenus, style d’images, iconographie, moodboard
- Grilles, zoning, marges et adaptation aux écrans
- Éléments interactifs : navigation, boutons, appels à l’action, formulaires
- Typographie : classifications, hiérarchie, licences, accessibilité
- Couleurs et contrastes conformes
04Figma — Prise en main
- Interface, fichiers, pages et frames
- Formes, outil Plume, icônes ; textes et styles
- Images et masques ; couleurs, dégradés, palettes
05Figma — Construire une interface
- Grilles, contraintes et auto layout
- Composants, variantes, variables et bibliothèques
- Kits d’interface et design system
- Écran d’accueil d’une application mobile ; écrans de connexion et d’inscription
06Prototypage interactif
- Liens d’interaction, superpositions, animations intelligentes, gestes tactiles
- Interfaces responsives et parcours utilisateur
07Partager et tester
- Partage, commentaires et présentation au client
- Tests utilisateurs et aperçu sur smartphone et tablette
- Transmission aux développeurs avec le mode Dev
- Plug-ins utiles
08Ouverture aux outils d’IA
- Fonctions d’IA de Figma et outils de génération d’interfaces : intérêt et limites
- Garder la maîtrise des choix de conception
Prochaines sessions
Les dates peuvent s'adapter : en individuel, la formation démarre quand vous êtes prêt(e).
- 9 décembre 2026 – 22 décembre 2026
- 13 avril 2027 – 26 avril 2027
- 27 juillet 2027 – 9 août 2027
- 13 décembre 2027 – 24 décembre 2027
Financer cette formation
Selon votre situation, tout ou partie de la formation peut être pris en charge. Notre équipe vérifie vos droits avec vous.
Votre employeur (OPCO), France Travail, la Région ou un financement personnel peuvent prendre en charge cette formation.
Notre équipe identifie la bonne solution et monte le dossier avec vous.
Informations pratiques
- Type de reconnaissance
- Attestation de fin de formation
- Accessibilité
- Locaux accessibles aux personnes à mobilité réduite (PMR) et aux personnes en situation de handicap (PSH).
Référent handicap : Bénédicte Guilloteau, benedicte@mandyben.com
Fiche mise à jour le 29 octobre 2026
En savoir plus sur cette formation
Cette formation complète prépare à la conception d’interfaces web et mobiles : culture du design, ergonomie et UX, charte graphique web, puis maquettage et prototypage avec Figma, l’outil de référence du secteur (qui remplace Adobe XD, dont le développement est arrêté). Prérequis : pratique courante de Windows ou macOS.
Objectifs :
• Acquérir la culture du design web et les principes de l’ergonomie.
• Prendre en compte l’expérience utilisateur, l’accessibilité et le facteur humain.
• Créer ou adapter une charte graphique web et un design system.
• Concevoir des wireframes et des maquettes pour ordinateur, tablette et mobile.
• Réaliser des prototypes interactifs et les tester.
• Partager et transmettre ses maquettes aux développeurs.
Culture du design web
• Histoire du webdesign, évolution des outils et des langages
• Tendances actuelles et processus de conception
Ergonomie et UX
• Vocabulaire UX / UI ; lois de l’ergonomie
• Personas et parcours utilisateurs
• Démarche itérative : comprendre, explorer, concrétiser, tester
• Accessibilité numérique (RGAA, WCAG)
Charte graphique web
• Contenu d’une charte ; identité graphique et contraintes d’usage
• Inventaire des contenus, style d’images, iconographie, moodboard
• Grilles, zoning, marges et adaptation aux écrans
• Éléments interactifs : navigation, boutons, appels à l’action, formulaires
• Typographie : classifications, hiérarchie, licences, accessibilité
• Couleurs et contrastes conformes
Figma — Prise en main
• Interface, fichiers, pages et frames
• Formes, outil Plume, icônes ; textes et styles
• Images et masques ; couleurs, dégradés, palettes
Figma — Construire une interface
• Grilles, contraintes et auto layout
• Composants, variantes, variables et bibliothèques
• Kits d’interface et design system
• Écran d’accueil d’une application mobile ; écrans de connexion et d’inscription
Prototypage interactif
• Liens d’interaction, superpositions, animations intelligentes, gestes tactiles
• Interfaces responsives et parcours utilisateur
Partager et tester
• Partage, commentaires et présentation au client
• Tests utilisateurs et aperçu sur smartphone et tablette
• Transmission aux développeurs avec le mode Dev
• Plug-ins utiles
Ouverture aux outils d’IA
• Fonctions d’IA de Figma et outils de génération d’interfaces : intérêt et limites
• Garder la maîtrise des choix de conception
Avis
Ils sont passés par là. Des stagiaires.
J'ai pu créer ma boutique en ligne et réaliser des ventes en lançant ma marque :-)
Ce stage m'a permis de tester plusieurs appareils photo, et de me mettre en situation pour mieux comprendre les problématiques.
Les explications claires et bien ciblées ont permis à notre collaborateur à la fois de se former et de rectifier ses procédures. Objectif atteint donc et nous en remercions le formateur.
Je vous confirme que la formation s’est excellemment bien déroulée. Le contenu était très intéressant et devrait m’apporter beaucoup dans mon travail à venir. J’en profite pour vous féliciter sur le choix de vos formateurs, le formateur fait preuve d’une grande pédagogie et d’une extrême gentillesse.
Questions fréquentes
WordPress ou Wix : que choisir ?
WordPress offre plus de liberté et de fonctionnalités, Wix est plus simple pour démarrer. Nous vous conseillons selon votre projet et votre budget.
Faut-il savoir coder ?
Non pour WordPress, Wix, Webflow ou PrestaShop en tant qu'utilisateur. Pour le développement de thèmes, des bases en HTML et CSS sont utiles (voir le domaine Développement et informatique).
Peut-on travailler sur son propre site pendant la formation ?
Oui, en formation individuelle notamment, nous travaillons volontiers sur votre projet réel.
Qu'est-ce que l'UX/UI design ?
L'UX (expérience utilisateur) et l'UI (interface) consistent à concevoir des sites et applications simples et agréables à utiliser. Nos formations utilisent notamment Figma.
Où se déroulent les formations ?
Dans nos locaux au 146 rue Paradis, à Marseille (6e), dans vos locaux pour les formations intra-entreprise, ou à distance en visio, en direct avec le formateur. Les modalités possibles sont indiquées sur chaque fiche.
Pas sûr(e) d'être fait(e) pour ça ?
Chacun sa façon d'atteindre son objectif. Notre équipe vous rappelle pour trouver la formation et le financement adaptés à votre situation.
- QualiopiOrganisme certifié
- 1 780personnes formées en 2026
- 98 %de satisfaction
- Depuis 2006à Marseille, 146 rue Paradis