UI Design
Date de mise à jour :
Identifiant Offre Info : 14_AF_0000163753
Organisme responsable :
Le Laptop
(ouvre dans un nouvel onglet)
Présentation de la formation
Objectifs
1. Acquisition des fondamentaux du design d'interface Définir les bases théoriques du design d'interface à partir d'un cadre donné Identifier les concepts essentiels du branding, du positionnement et de l'identité visuelle appliqués au digital Traduire une identité de marque : couleurs, typographies, formes et iconographie Appliquer les principes du design émotionnel Structurer un écran selon des principes de hiérarchie visuelle, de lisibilité et de clarté 2.…
- Définir les bases théoriques du design d'interface à partir d'un cadre donné
- Identifier les concepts essentiels du branding, du positionnement et de l'identité visuelle appliqués au digital
- Traduire une identité de marque : couleurs, typographies, formes et iconographie
- Appliquer les principes du design émotionnel
- Structurer un écran selon des principes de hiérarchie visuelle, de lisibilité et de clarté
- Analyser un brief et identifier les enjeux du secteur et du projet
- Comparer des interfaces lors de benchmarks ciblés et construire une direction créative
- Identifier les objectifs fonctionnels et émotionnels d'une interface
- Construire les fondations graphiques d'un projet : couleurs, typographie, grilles et espacements
- Concevoir et décliner des interfaces cohérentes sur différents supports
- Utiliser Figma pour organiser, concevoir et collaborer autour d'un projet
- Créer et gérer des composants selon la logique d'Atomic Design
- Concevoir des interfaces adaptatives et responsives pour différents supports
- Produire des maquettes respectant les principes d'accessibilité et d'éco-conception
- Utiliser les fonctionnalités IA de Figma pour générer, affiner et critiquer des propositions d'interface
- Créer et harmoniser des assets visuels adaptés à une interface
- Organiser et nommer efficacement ses fichiers de design
- Prototyper et créer des animations et micro-interactions
- Appliquer les bonnes pratiques de handoff et de QA pour collaborer efficacement avec des développeurs
- Présenter et argumenter ses choix de conception à travers un récit structuré
- Livrer un projet UI structuré et documenté
- Comprendre les principes du design-to-code et expérimenter l'utilisation d'un LLM pour faciliter le passage de la maquette au code
- Identifier les tendances actuelles du design UI
- Découvrir des ressources, outils et comptes de référence pour continuer à progresser
- Développer une pratique critique des outils de conception assistée par IA
Programme de la formation
Jour 1 · Cadrer — Branding, identité visuelle et direction créative Les fondamentaux du branding appliqué à l'UI Design Les briques de l'identité visuelle Prendre en main l'écosystème Figma Lire et décoder un brief Atelier fil rouge : Cadrage, moodboard, benchmark sectoriel et direction créative Jour 2 · Fonder — Design émotionnel et premières maquettes Design émotionnel Fondations d'un projet dans Figma Accessibilité Générer une première maquette avec Figma Make…
Les fondamentaux du branding appliqué à l'UI Design
Les briques de l'identité visuelle
Prendre en main l'écosystème Figma
Lire et décoder un brief
Atelier fil rouge : Cadrage, moodboard, benchmark sectoriel et direction créative
Jour 2 · Fonder — Design émotionnel et premières maquettes
Design émotionnel
Fondations d'un projet dans Figma
Accessibilité
Générer une première maquette avec Figma Make
Atelier fil rouge : Mise en place des fondations et génération des premiers écrans via Figma Make
Jour 3 · Structurer — Mise en page, responsive et consistance
Tendances actuelles en UI
Mise en page et Atomic Design dans Figma
Design tactile et responsive
Produire ses assets UI
Atelier fil rouge : Écrans clés, système de composants et production des assets
Jour 4 · Animer — Micro-interactions, éco-conception et storytelling
Les micro-interactions comme vecteur émotionnel
Prototyper au plus près du réel
Figma Motion
Éco-conception appliquée
Présenter son travail et convaincre
Atelier fil rouge : Ajout d'interactions et d'animations, passe d'éco-conception, préparation de la soutenance
Jour 5 · Livrer — Collaboration dev, soutenance et ouverture
Prototypage interactif avancé
Collaborer et transmettre aux développeurs
Design System
Design-to-code
Continuer à progresser
Atelier fil rouge : Finalisation du prototype et du handoff, soutenance orale du projet devant le groupe
Suivi post-formation : webinar de 2 h
Validation et sanction
Type de formation
Non certifiante
Niveau de sortie
Sans niveau spécifique
Durée, rythme, financement
Durée
En centre
40 h
Financement
- Conventionnement
- Non
Conditions d'accès
Public visé
- Tout public
Informations sur les publics
Les métiers du design et de la création : UX Researcher, UX Designer débutant ou autodidacte, étudiants en Design, Directeur(rice) Artistique Les autres métiers du digital : Chef de projet, Développeur, Product Owner, Product Managers
Niveau d'entrée
Bac + 3 et 4
Conditions spécifiques et prérequis
Connaissances de base en UX ou sensibilité aux enjeux de l'expérience utilisateur Bonne culture du numérique et de ses usages Parler français Un ordinateur (Mac ou PC) et un compte Figma (gratuit). Figma est un logiciel disponible sur Mac et PC, utilisable directement via un navigateur récent (Chrome, Firefox, Safari). Les logiciels (gratuits et cross-plateforme) qui seront demandés en amont (outils collaboratifs, visioconférence, etc)
Lieu de réalisation de l'action
Modalités d'enseignement
Formation entièrement en présentielle
Adresse
7 Rue Geoffroy l'Angevin75004 Paris 4e
Responsable : Le Laptop
Périodes prévisibles de déroulement des sessions
Début
Fin
- Adresse d'inscription
-
Le Laptop
75004 Paris 4e - État du recrutement
- Ouvert
- Modalités
- Entrées / Sorties à dates fixes