CONCEPTEUR DESIGNER UI

PLAN DE FORMATION

Objectifs et contexte de la certification :

Le concepteur designer UI détermine comment un utilisateur interagit avec une interface homme-machine. Pour cela, il conçoit et réalise des outils de communication numériques adaptés à différents supports de publication et de communication, en tenant compte de l'utilisateur, des standards, de l'accessibilité, de l'ergonomie et de la bonne visibilité du produit.


Programme de formation : CONCEPTEUR DESIGNER UI

Module 1 : Introduction au Design et aux Fondamentaux du Numérique

Sous-module 1.1 : Découvrir le métier de Designer UI

• 1.1.1 Comprendre les rôles et missions d'un Designer UI dans une équipe digitale

• 1.1.2 Identifier les différences entre UI UX et Webdesign

• 1.1.3 Explorer les contextes d'application du design (web mobile logiciel publicité)

• 1.1.4 Comprendre le cycle de vie d'un projet digital (brief → maquette → développement)

• 1.1.5 Découvrir les outils incontournables du métier (Figma Illustrator Framer Notion)

• 1.1.6 Étude de cas : analyser une interface existante et détecter les points forts/faibles
  
  

Sous-module 1.2 : Bases de l'ergonomie et de la psychologie visuelle

• 1.2.1 Comprendre la perception visuelle et son impact sur l'expérience utilisateur

• 1.2.2 Découvrir les lois de la Gestalt et leur application dans l'UI design

• 1.2.3 Étudier la hiérarchie visuelle : tailles contrastes couleurs espacements

• 1.2.4 Savoir guider l'œil de l'utilisateur grâce à la mise en page

• 1.2.5 Identifier les erreurs d'ergonomie les plus fréquentes et comment les éviter
  
  

Sous-module 1.3 : Typographie et lisibilité numérique

• 1.3.1 Comprendre les familles de polices et leurs usages

• 1.3.2 Choisir et associer des typographies cohérentes

• 1.3.3 Gérer la hiérarchie typographique (titres sous-titres paragraphes)

• 1.3.4 Adapter la lisibilité selon les supports (desktop mobile tablette)
  1.3.5 Étude de cas : analyser et améliorer une mise en page typographique
  
  

Sous-module 1.4 : Couleur et identité visuelle

• 1.4.1 Découvrir la théorie des couleurs appliquée au design numérique

• 1.4.2 Comprendre la psychologie des couleurs et leur impact sur l'utilisateur

• 1.4.3 Construire une palette cohérente et accessible

• 1.4.4 Gérer les contrastes pour garantir l'accessibilité

• 1.4.5 Étude de cas : décliner une identité visuelle pour une interface digitale
  
  

Sous-module 1.5 : Iconographie et éléments graphiques

• 1.5.1 Comprendre le rôle des icônes dans l'UI design

• 1.5.2 Créer et choisir des icônes cohérentes avec une charte graphique

• 1.5.3 Étudier les différents styles d'iconographie (flat outline filled custom)

• 1.5.4 Intégrer des éléments visuels (illustrations pictogrammes photos) dans une interface

• 1.5.5 Bonnes pratiques pour garantir cohérence et lisibilité
  
  

Sous-module 1.6 : Grilles, mise en page et structuration visuelle

• 1.6.1 Comprendre l'importance des grilles dans le design d'interface

• 1.6.2 Construire une grille responsive pour web et mobile

• 1.6.3 Organiser une page avec rythme équilibre et marges

• 1.6.4 Appliquer la règle des tiers et autres principes de composition visuelle

• 1.6.5 Étude de cas : comparer plusieurs mises en page et les améliorer
  
  

Sous-module 1.7 : Introduction aux outils et workflow du Designer

• 1.7.1 Découvrir Figma pour le prototypage et la collaboration

• 1.7.2 Découvrir Illustrator pour les éléments vectoriels

• 1.7.3 Comprendre le rôle de Notion dans la gestion de projet

• 1.7.4 Organiser ses fichiers et structurer son workflow design

• 1.7.5 Étude de cas : mini-projet d'initiation en binôme (reproduire une maquette simple)
  
  

Module 2 : Développer des interfaces numériques responsives et interactives avec le No-Code et Framer

1.3.5 Étude de cas : analyser et améliorer une mise en page typographique

Sous-module 1.4 : Couleur et identité visuelle

• 1.4.1 Découvrir la théorie des couleurs appliquée au design numérique

• 1.4.2 Comprendre la psychologie des couleurs et leur impact sur l'utilisateur

• 1.4.3 Construire une palette cohérente et accessible

• 1.4.4 Gérer les contrastes pour garantir l'accessibilité

• 1.4.5 Étude de cas : décliner une identité visuelle pour une interface digitale
  
  

Sous-module 1.5 : Iconographie et éléments graphiques

• 1.5.1 Comprendre le rôle des icônes dans l'UI design

• 1.5.2 Créer et choisir des icônes cohérentes avec une charte graphique

• 1.5.3 Étudier les différents styles d'iconographie (flat outline filled custom)

• 1.5.4 Intégrer des éléments visuels (illustrations pictogrammes photos) dans une interface

• 1.5.5 Bonnes pratiques pour garantir cohérence et lisibilité
  
  

Sous-module 1.6 : Grilles, mise en page et structuration visuelle

• 1.6.1 Comprendre l'importance des grilles dans le design d'interface

• 1.6.2 Construire une grille responsive pour web et mobile

• 1.6.3 Organiser une page avec rythme équilibre et marges

• 1.6.4 Appliquer la règle des tiers et autres principes de composition visuelle

• 1.6.5 Étude de cas : comparer plusieurs mises en page et les améliorer

Sous-module 1.7 : Introduction aux outils et workflow du Designer

• 1.7.1 Découvrir Figma pour le prototypage et la collaboration

• 1.7.2 Découvrir Illustrator pour les éléments vectoriels

• 1.7.3 Comprendre le rôle de Notion dans la gestion de projet

• 1.7.4 Organiser ses fichiers et structurer son workflow design

• 1.7.5 Étude de cas : mini-projet d'initiation en binôme (reproduire une maquette simple)
  
  

Module 2 : Développer des interfaces numériques responsives et interactives avec le No-Code et Framer

Sous-module 2.1 : Introduction au No-Code et bases essentielles

• 2.1.1 Comprendre le mouvement No-Code et ses avantages

• 2.1.2 Découvrir les bases de données et leur rôle dans les projets No-Code

• 2.1.3 Utiliser Notion pour organiser un projet de design digital

• 2.1.4 Découvrir Make et Zapier pour automatiser des workflows simples

• 2.1.5 Étude de cas : créer un mini-système de gestion de projet design avec Notion et Make

Sous-module 2.2 : Introduction à Framer

• 2.2.1 Comprendre l'écosystème No-Code et la place de Framer

• 2.2.2 Identifier les cas d'usage adaptés à Framer (landing page site vitrine e-commerce simple portfolio)

• 2.2.3 Découvrir l'interface de Framer et ses logiques de conteneurs

• 2.2.4 Gérer les styles globaux : typographie couleurs layout

• 2.2.5 Bonnes pratiques pour structurer un projet Framer

Sous-module 2.3 : Construire des sites responsives avec Framer

• 2.3.1 Créer une page d'accueil responsive étape par étape

• 2.3.2 Structurer un header et une navigation flexible

• 2.3.3 Mettre en page une landing page orientée conversion

• 2.3.4 Intégrer des sections modulaires réutilisables

• 2.3.5 Tester et ajuster le responsive design (desktop tablette mobile)

Sous-module 2.4 : Systèmes de design et composants réutilisables

• 2.4.1 Créer un design system complet dans Framer

• 2.4.2 Définir et appliquer des styles globaux cohérents

• 2.4.3 Construire des composants interactifs réutilisables

• 2.4.4 Mettre en place des variantes de composants (boutons cartes formulaires)

• 2.4.5 Gérer la cohérence visuelle et l'évolutivité du projet

Sous-module 2.5 : Animations et interactions avancées dans Framer
2.5.1 Créer des transitions fluides entre les pages

• 2.5.2 Animer les micro-interactions (hover clic scroll)

• 2.5.3 Construire des effets parallaxe et scroll animations

• 2.5.4 Intégrer des vidéos et animations Lottie dans Framer

• 2.5.5 Optimiser la performance et la fluidité des animations

Sous-module 2.6 : Gestion de contenu et CMS avec Framer

• 2.6.1 Découvrir le CMS intégré de Framer

• 2.6.2 Créer et gérer des collections de contenu dynamiques

• 2.6.3 Construire un blog avec Framer CMS

• 2.6.4 Créer un portfolio dynamique relié au CMS

• 2.6.5 Optimiser la mise à jour et la maintenance des contenus

Sous-module 2.7 : Publication et optimisation SEO avec Framer

• 2.7.1 Connecter un domaine personnalisé à un site Framer

• 2.7.2 Optimiser le SEO on-page (titres balises images)

• 2.7.3 Configurer les meta-tags et l'Open Graph

• 2.7.4 Optimiser les performances (poids des images vitesse de chargement)

• 2.7.5 Préparer et publier un site professionnel sur Framer

Sous-module 2.8 : Projet de synthèse Framer

• 2.8.1 Analyser un brief client pour un projet Framer

• 2.8.2 Concevoir un site complet (homepage pages internes CMS)

• 2.8.3 Intégrer animations et interactions avancées

• 2.8.4 Optimiser le responsive et le SEO

• 2.8.5 Soutenir le projet devant jury ou client et appliquer les retours

Module 3 : Stratégies avancées de Marketing Digital et Acquisition

Sous-module 3.1 : Psychologie et fondements de l'influence

• 3.1.1 Comprendre les leviers psychologiques et émotionnels dans l'acte d'achat

• 3.1.2 Identifier les biais cognitifs appliqués au marketing digital

• 3.1.3 Construire des personas précis et des cartes d'empathie

• 3.1.4 Définir le parcours client et ses points de friction

• 3.1.5 Étude de cas : analyse psychologique d'une publicité virale

Sous-module 3.2 : Copywriting et storytelling appliqués au digital

• 3.2.1 Comprendre les fondamentaux du copywriting en 2025

• 3.2.2 Structurer un texte de vente avec AIDA PAS et 4P

• 3.2.3 Utiliser les mots de pouvoir et les déclencheurs émotionnels

• 3.2.4 Créer un storytelling de marque puissant et cohérent
  3.2.5 Écrire des hooks irrésistibles pour réseaux sociaux

Module 4 : Gestion de projet, professionnalisation et insertion

Sous-module 4.1 : Gestion de projet digital

• Comprendre les méthodologies classiques (cycle en V, cascade) et agiles (Scrum, Kanban)

• Définir les objectifs et livrables d’un projet digital

• Planifier et prioriser les tâches avec Notion, Trello ou Jira

• Suivre les jalons et gérer les imprévus

• Étude de cas : gestion d’un projet UI pour une startup

Sous-module 4.2 : Collaboration en équipe et communication client

• Mettre en place des workflows collaboratifs fluides

• Gérer la relation avec un client ou un commanditaire

• Construire et présenter des maquettes en mode collaboratif (Figma, Framer)

• Préparer et animer des réunions de suivi projet

• Gérer les feedbacks et les itérations constructives

• Étude de cas : refonte d’un site institutionnel en équipe

Sous-module 4.3 : Gestion budgétaire et modèles économiques

• Établir un devis et un budget projet

• Comprendre les modèles tarifaires (TJM, forfait, abonnements, valeur perçue)

• Calculer la rentabilité d’un projet digital

• Optimiser les coûts en fonction des outils et ressources disponibles

• Étude de cas : budgétiser un projet e-commerce complet

Sous-module 4.4 : Légalité, conformité et accessibilité

• Comprendre les obligations légales (RGPD, droit d’auteur, licences)

• Respecter l’accessibilité numérique (WCAG 2.2, RGAA en France)

• Gérer les contrats de prestation et la propriété intellectuelle

• Mettre en place une politique de sécurité et de protection des données

• Étude de cas : mise en conformité d’un site avec le RGPD

Sous-module 4.5 : Présentation et soutenance de projet

• Structurer un pitch clair et convaincant

• Créer une présentation visuelle impactante (Keynote, Canva, Google Slides)

• Adopter les techniques oratoires pour convaincre un jury ou un client

• Répondre aux objections et défendre ses choix créatifs

• Étude de cas : simulation de soutenance de projet final devant un client

Sous-module 4.6 : Insertion professionnelle et développement de carrière

• Construire un portfolio en ligne professionnel (Framer, Webflow, Notion)

• Optimiser son CV et profil LinkedIn pour le secteur du design et du digital

• Développer son personal branding et se positionner comme expert

• Comprendre les statuts juridiques (freelance, micro, SASU, portage salarial)

• Étude de cas : plan de carrière d’un UI Designer freelance ou salarié
  
  Sous-module 4.7 : Projets transverses et mise en pratique
  
  

• Réaliser un projet fil rouge mobilisant toutes les compétences du cursus

• Travailler en équipe sur une problématique réelle apportée par une entreprise partenaire

• Présenter les livrables finaux lors d’une soutenance

• Évaluer et auto-évaluer la progression

• Étude de cas : projet réel encadré de A à Z