• Comprendre les bases du branding et leur importance dans le design UI
• Apprendre à utiliser Figjam pour la collaboration et la création d’idées
• Développer des compétences en création de chartes graphiques
• Découvrir les différentes typographies et leur impact sur la lisibilité et le design
• Apprendre à utiliser les pictogrammes pour une meilleure communication visuelle
• Acquérir des connaissances sur les compétences d’un designer fullstack

• Acquérir des compétences en brainstorming et benchmark
• Comprendre les différents types de sites web et le design responsive
• Préparer efficacement un environnement de travail de design
• Créer des wireframes HD pour des interfaces mobiles

• Apprendre les tendances actuelles en design UI
• Maîtriser les composants UI et leur utilisation
• Comprendre et appliquer l’atomic design
• Créer et gérer des styles et composants dans Figma
• Développer des compétences en design tactile et responsive
• Utiliser les fonctionnalités avancées de Figma comme les nested components et l’autolayout

• Comprendre et appliquer les principes d’accessibilité dans le design UI
• Apprendre les techniques d’écoconception
• Maîtriser la création de nomenclatures efficaces
• Développer des compétences en prototypage interactif avec Figma
• Créer des animations et micro-animations pour améliorer l’expérience utilisateur
• Appliquer les connaissances acquises dans un exercice pratique final
• Savoir livrer des designs aux développeurs de manière claire et structurée

Un mois après la conclusion de votre formation, nous vous proposons de vous rassembler en promotion avec votre intervenant pour un atelier de mentorat à distance. 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 suivi permet 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.

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

• d’un quiz en fin de formation
• d’exercices évalués tout au long des 4 jours

• Appréhender Figma, son interface, sa structure, ses logiques
• Découvrir les fonctions de bases de Figma
• Atelier Wireframe : créer son premier wireframe simple et bien structuré
• Découvrir la logique de composants atomiques
• Atelier UI kits : créer ses premiers composants responsives

• Atelier Mock-Up : poser des premières intentions graphiques
• Introduction aux fonctions avancées de Figma (autolayout simple)
• Introduction au design accessible dans Figma
• Atelier prototype : créer un prototype hi-fi et l’animer simplement (Smart Animate)
• Collaborer, partager, augmenter son flow de production

• Exercice d’application et d’évaluation

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.

• Introduction : définition, historique, enjeux, composantes, outils
• Concevoir et déployer, une organisation à part entière
• Garder la cohérence des éléments d’interface : identité, contenus, normes
• La pérennité du Design System : maintenir et faire évoluer
• Ateliers pratiques : audit de l’existant, inventaire, vision

• Documenter : architecture et outillage
• Promouvoir et maintenir : KPIs et analytics, gouvernance, optimisation
• Ateliers pratiques : documentation, maintenance

Les acquis de la formation seront validés au moyen d’un QCM sur les enjeux, problématiques et fonctionnement d’un Design System.

• Introduction aux variables
  • Design tokens ou variables ?
  • Les outils de gestion des tokens ou variables : Figma, Token studio, Supernova…
  • Les différents types de variables (colors, string, number)
  • Variables Primitives / Semantic / Component specific
  • Créer des variables (spacing, size, colors, radius, shadows)
• Sur un cas fil rouge, créer les fondations de son UI Kit en utilisant des variables : couleurs, tailles, espaces, typographies, organiser ses variables (primitives, semantic, component specific)
• Conventions de nommage : Bonnes pratiques de structuration des variables
• Conception Responsive : maitriser les Auto-layouts et des Constraints pour une conception responsive efficace.
• Atelier : utiliser les variables pour gérer le Theming (multibrand, dark mode…)
• Tips :
  • Scinder une librairie en 2 : Déplacer des éléments d’une librairie à une autre sans casser les liens dans ses fichiers design
  • Administration d’une équipe dans Figma : gestion des droits, partage et autorisations, identification des points de vigilance.
  • Gestion des librairies : Comprendre les avantages et les inconvénients de One library vs Split libraries.
  • Optimisation du Workflow dans Figma : astuces, raccourcis et plug-ins pour optimiser le workflow dans Figma.

• Constraints et de Autolayout : mise en application directions, wrap, min & max sizes…)
• Variants : maîtriser les bonnes pratiques lors de la création de ses variants
• Components properties : définir des propriétés à ses composants (text, boolean,swap)
• Interactive components : appliquer des comportements interactifs intégrés à ses variants (ex : boutons qui passent de l’état « hover » à l’état « pressed »)
• Introduction au Dev Mode et bonne pratiques designers / devs : S’initier aux meilleures pratiques pour une collaboration efficace entre designers et développeurs.
• Tips
  • Collaboration et Transmission du Travail de Design : Apprendre à collaborer efficacement à travers le feedback et les Design Critique, ainsi que les intégrations dans Figma.
  • Optimisation du Workflow dans Figma : astuces, raccourcis et plug-ins pour optimiser le workflow dans Figma.

• Utiliser les variables dans ses prototypes (text, number,boolean)
• Utiliser les Multiple actions et Conditionals : gérer des résultats multiples ou différents au sein d’une même interaction.
  • Multiple actions : Empilez un nombre illimité d’actions sur le même déclencheur.
  • Conditionals : Vérifier si une condition est remplie avant d’effectuer une action en utilisant une instruction conditionnelle if/else.

Les acquis de la formation seront validés au moyen d’un exercice de prototypage complexe sur Figma.

Comprendre l’Accessibilité Numérique

• Qu’est-ce que l’accessibilité numérique ?
• Obligation morale et arguments commerciaux
• Exploration de l’environnement légal :
  • Contexte juridique international, européen et français
  • Obligations théoriques et sanctions pénales
  • Normes et référentiels : WCAG et RGAA
• Autres enjeux : Innovation, Référencement, Image de marque, Culture, Impact écologique…
• Atelier : votre pitch pour vendre l’Accessibilité à son entreprise/client
• UX et Accessibilité : 10 critères heuristiques de Jakob Nielsen
• Exercice de mise en pratique

Comprendre le handicap et son impact sur l’utilisation du numérique

• Handicap Visuel, auditif, physique, cognitif
• Handicap temporaire ou situationnel
• Debrief et exercices collectifs
  

Comprendre le fonctionnement des technologies d’assistance

• Aperçu des dispositifs d’aide : Reconnaissance vocale, loupe et agrandisseur d’écran…
• Ateliers : Empathy lab

Maîtriser les principaux critères d’Accessibilité

• Exercice – Les 4 piliers de l’Accessibilité
• Assurer des contenus alternatifs PERCEPTIBLE par tous
• Rendre l’Interface UTILISABLE par tous
• Assurer un contenu COMPRÉHENSIBLE par tous

Maîtriser les principaux critères d’Accessibilité (suite)

• Développer une interface ROBUSTE

Stratégie Accessibilité

• Les niveaux de maturité de l’entreprise
• Mise en place de l’Accessibilité
• Étude de cas réel et mise en situation

Conception Inclusive

• Personas
• Design System Accessible
• Annotations des maquettes
• Exercices

Tests et Évaluations

• Évaluations automatiques
• Vérifications manuelles et fonctionnelles
• Exercice: Flash Audit
• Tests Utilisateurs
• Surveillance et maintien de l’Access

Surveillance et maintien de l’Accessibilité

• Audits (échantillonnage, livrables et résultats)
• Certifications
• Maintenir l’accessibilité numérique
• Mesure et Indicateurs
• Étude de casMise en pratique : Construction d’une roadmap pour votre entreprise/client

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

• d’exercices pratiques durant la formation
• d’un QCM en fin de formation

Découvertes des grands domaines de la psychologie

• Les champs et domaines de la psychologie 
• Les mythes et fausses croyances en psychologie
• Neuroanatomie (cerveau, hormones, …)

Introduction à la psychologie cognitive

• Perception / Gestalt
• L’attention / Charge cognitive
• La mémoire et apprentissage
• Première impression
• Langage 

Introduction à la psychologie différentielle 

• La personnalité et ses modèles
• La mise en application dans la recherche et les personas
• Lien entre personnalité, émotion et motivation 

La psychologie sociale et expérimentale 

• Les grands thèmes de la psychologie sociale expérimentale 
• Les biais cognitifs et dissonances cognitives 
• Les basiques de l’attribution causale 

Mesurer l’expérience utilisateur et l’esprit humain

•  La recherche en psychologie 
•  Les questionnaires
•  La psychométrie 
•  La biométrie

Application de la Psychologie et Neurosciences aux émotions 

Comprendre les différents champs de la psychologie pertinents pour le design émotionnel (cognitive, expérimentale, sociale, différentielle)​​.

• Définition et spécification des émotions (valence, typologie, intensité, granularité)​​
• Explications biologiques et pathologiques 
• Modèle d’émotions primaires (hypothèse universaliste de Ekman)​​.
• Importance des émotions dans les performances cognitives et la décision

Description et Spécification des émotions

• Décrire de manière précise et adaptée les émotions​​
• Utiliser l’Altas des émotions pour enrichir son vocabulaire
• Créer ses propres modèles 

Créer des expériences émotionnelles

• Techniques pour provoquer des émotions positives et durables (effet wow/mémorable)​​
• Importance de la cohérence dans l’expérience utilisateur (storytelling, gamification, micro-interactions)​​
• Approche holistique : Perception et intégration des 5 sens.

Évaluer et mesurer les émotions

• Les questionnaires classiques dans la mesure des émotions
• Méthodes de mesure des émotions biométriques (imagerie cérébrale, biométrie, eye tracking, rythme cardiaque, … )​​

Introduction à l’UX Writing

• L’interaction homme – machine
• Naissance de la microcopie
• Le rôle, le scope et les phases d’intervention de l’UX Writer
• Différence entre UX Writer et copywriter
• Différence entre UX Writer et Content Designer
• L’importance de l’approche design en UX Writing

Design émotionnel et UX Writing

• Les 3 niveaux de Design Émotionnel
• Application des 3 niveaux de Design Émotionnel en UX Writing
• Dark pattern et biais cognitifs
• Bonnes pratiques et biais cognitifs

Parler comme les utilisateurs

• Identifier leurs styles de langage à travers leurs verbatims
• Évaluer leur contexte, leurs besoins émotionnels et leur charge cognitive
• Adapter le contenu à leurs besoins émotionnels

Humaniser le contenu

• Définir l’identité de la marque
• Concevoir un brand persona
• Créer le Tone of Voice de la marque