Programme de Formation Figma : Approfondissement

Créer des prototypes animés

Découvrir les différents types d’interaction

Découvrir les différents types d’actions

Comprendre et gérer les différents paramètres d’animations

Visualiser et tester les prototypes

Tester sur Téléphone avec l’application mobile Figma

Atelier : Créer l’ensemble des liens dynamiques et interactifs sur les écrans de l’atelier précédentCollaborer avec Figma

Partager et commenter une maquette

Travailler en simultané

Utiliser les widgets

Partager son fichier sous forme de librairie

Exporter et sauvegarder ses projets

Travailler avec HTML et CSS

Inspecter le code de ses maquettes

Les plugins pour exporter en HTML/CSS

Programme de Formation Figma : Initiation + Approfondissement

Comprendre les bases de l’UI Design

Présentation de l'interface utilisateur (UI)

La place de l’UI au sein de l’UX

Le rôle de l’UI Designer

Installer Figma

Créer un compte

Les différentes formules Figma

Les fichiers, équipes et projets d’équipes

Gérer et organiser ses projets avec la version gratuite

Comprendre la suite Figma

Faire le tour d’horizon des outils Figma : Design, Figjam, Slides, Buzz, Sites et Make

Comprendre les liens entre les outils

Lier les outils au travers de l’utilisation de la communauté Figma

Prendre en main Figma Design

Comprendre l’interface Design et ses outils

Comprendre l’interface Prototype et ses outils

Comprendre le principe des pages

Découvrir le panneau Layers et Assets

Découvrir les outils essentiels de Figma Design

Comprendre l’outil essentiel des Frames

Utiliser et paramétrer les grilles de mise en page

Utiliser les repères

Naviguer dans la zone de travail

Créer des formes de bases

Créer des courbes avec la plume

Transformer une forme standard en tracé

Ajouter ou soustraire des formes

Gérer la couleur

Créer et éditer du texte

Transformer la boîte de texte

Redimensionner avec l’outil Scale

Manipuler les objets

Importer une ou plusieurs images

Déplacer des images

Créer un masque sur une image

Ajouter des effets

Copier des tracés vectoriels depuis Illustrator

Répéter des éléments et les aligner

Créer et organiser des styles

Comprendre le principe des styles pour automatiser nos actions

Créer des styles de texte, les appliquer et les modifier

Créer des styles de couleurs ou d’effets

Créer des styles de grilles de mise en page

Créer des groupes de style avec le renommage

Atelier : Créer une illustration sur FigmaTravailler avec l’Autolayout

Comprendre la différence entre frame simple et frame avec option Autolayout

Activer l’autolayout sur des éléments d’interface

Découvrir les paramètres et fonctionnement de l’autolayout

Paramétrer un autolayout

Travailler avec les composants

Créer et modifier des composants

Découvrir les propriétés possibles sur les composants

Ajouter et appliquer des propriétés aux composants

Comprendre le lien entre Composant principal et Instances

Animer ses composants

Atelier : Réaliser de premiers éléments d’interface avec les outils Autolayout et composantsUtiliser les plugins

Choisir et installer un plugin

Découvrir les plugins indispensables

Utiliser les plugins dans ses projets

Atelier : Création d’une onepagePremiers outils indispensables du prototypage

Maîtriser les contraintes des éléments d’interface

Gérer les défilements verticaux et horizontaux

Comprendre les comportements scroll, fixed et sticky

Définir les comportements scroll, fixed et sticky d’un élément d’interface

Atelier : Création d’un ou plusieurs écrans d’une application mobile PodcastsCréer des prototypes animés

Découvrir les différents types d’interaction

Découvrir les différents types d’actions

Comprendre et gérer les différents paramètres d’animations

Visualiser et tester les prototypes

Tester sur Téléphone avec l’application mobile Figma

Atelier : Créer l’ensemble des liens dynamiques et interactifs sur les écrans de l’atelier précédentCollaborer avec Figma

Partager et commenter une maquette

Travailler en simultané

Utiliser les widgets

Partager son fichier sous forme de librairie

Exporter et sauvegarder ses projets

Travailler avec HTML et CSS

Inspecter le code de ses maquettes

Les plugins pour exporter en HTML/CSS

Programme de Formation Figma : Avancé

Les essentiels Figma Design à maîtriser

Récapituler les outils indispensables Design

Maîtriser les styles

Rappel des plugins importants

Récapituler les outils indispensables Prototype

Appréhender les différents types d’interactions et d’animations

Manipuler les liens standards indispensables

Travailler avec l’auto layout

Comprendre la différence entre frame simple et frame avec option auto layout

Activer l’auto layout sur des éléments d’interface

Découvrir les paramètres et fonctionnement de l’auto layout

Paramétrer un auto layout

Travailler avec les composants

Créer et modifier des composants

Découvrir les propriétés possibles sur les composants

Ajouter et appliquer des propriétés aux composants

Comprendre le lien entre Composant principal et Instances

Animer ses composants

Atelier : Réaliser de premiers éléments d’interface avec les outils auto layout et composantsIntroduction aux variables

Découvrir le principe des variables

Créer ses premières variables

Utilisation des variables (1) : les modes

Comprendre les modes

Créer les variables adaptées aux modes

Appliquer les variables et modes

Atelier : Créer ses premiers modes et appliquer les variables associées dans son projetUtilisation des variables (2) : prototypage

Créer les variables adaptées au prototypage

Comprendre le lien crucial entre variables et composants

Prototyper avec l’action Set variable

Prototyper avec l’action Set variable mode

Prototyper avec l’action Conditionnal

Atelier : Créer et appliquer les différents types de variables pour prototyper avec les actions Set variable, Set variable mode et ConditionnalTravailler en responsive

Travailler le responsive sans les variables

Travailler le responsive avec les variables et breakpoints

Appréhender les Design systems

Créer et organiser ses variables pour son Design system

Utiliser les widgets et plugins essentiels

Partager son Design system sous forme de librairie Figma

Atelier : Concevoir 3 écrans avec un Design system complet : variables, modes et breakpoints inclusCollaborer avec Figma et maîtriser la phase d’Hand-off

Découvrir le Dev Mode

Travailler avec les plugins HTML et CSS

Maîtriser les différents types de partage

Découvrir les possibilités de Figma Sites

Découvrir et comprendre l’apport de l’IA dans Figma

S’appuyer sur les outils IA Figma

Découvrir les plugins IA tiers

Découvrir les possibilités de Figma Make

Programme de Formation UX Design Fondamentaux

Définir l'eXpérience Utilisateur

Définition de l'UX Design

Les chiffres à connaître

Le diagramme de Jesse James Garrett

Le rôle de l'UX Designer

Histoire et UX

Comprendre la clé de l'UX : le facteur humain

Interaction homme-machine (IHM)

"L'expérience" utilisateur

Le modèle de Mahlke

Les composantes de l'expérience utilisateur

Dynamique temporelle de l'expérience utilisateur

"UX Design" : la conception centrée sur l'utilisateur

Le processeur humain

Les biais cognitifs

La mémoire

La densité informationnelle et ses interférences

La hiérarchie des composants visuels

Les neurones miroirs

L'attention du cerveau

Focus 1 : Les lois en UX

La théorie de la Gestalt, l'extraction d'un schéma

Les lois de la Gestalt

Les lois complémentaires à connaître

Pourquoi utiliser l'UX ?

L'importance de l'UX

Les domaines d'application

L'objectif ultime

Maîtriser le processus de conception UX

Les différentes phases du processus de conception UX

Cycle de conception des systèmes interactifs

Présentation du processus

Etape 1 : Planification > Définir le projet et réaliser des recherches préliminaires

Définir son projet

Mener ses recherches

Recruter des utilisateurs

Déontologie et éthique

Atelier : Benchmark

Atelier : Empathy mapEtape 2 : Exploration > Recueillir les besoins des utilisateurs

Les entretiens

Le focus group

L'observation

Le questionnaire exploratoire

Les sondes culturelles

Atelier : EntretienFocus 2 : Phase d'analyse et de synthétisation

Les personas

L'experience map

Atelier : Persona et experience mapFocus 3 : L'architecture de l'information

Définir l'architecture de l'information

La hiérarchisation

La taxonomie / l'étiquetage

La méthode OOUX

Exemple d'outils

Etape 3 : Idéation > Produire des idées de conception

Le brainstorming

Les cartes d'idéation

Le design studio

Le tri de cartes

Etape 4 : Génération > Formaliser des solutions de conception

Le storyboarding

Le maquettage

La gamification

Le tri de cartes

Etape 5 : Evaluation > Evaluer de façon itérative les solutions générées

Journal de bord

Complétion de phrases

Courbes d'évaluation UX

Echelles UX

Echelles d'utilisabilité

Test des 5 secondes

A/B Testing

Evaluation des émotions

Réaliser un audit UX / UI ou “Audit ergonomique”

Utiliser les heuristiques

Connaître sa cible

Définir les objectifs de l’audit

Etablir un plan d’actions

Atelier : Réaliser un audit

Programme de Formation UX Design Fondamentaux + Mises en situation

Définir l'eXpérience Utilisateur

Définition de l'UX Design

Les chiffres à connaître

Le diagramme de Jesse James Garrett

Le rôle de l'UX Designer

Histoire et UX

Comprendre la clé de l'UX : le facteur humain

Intéraction homme-machine (IHM)

"L'expérience" utilisateur

Le modèle de Mahlke

Les composantes de l'expérience utilisateur

Dynamique temporelle de l'expérience utilisateur

"UX Design" : la conception centrée sur l'utilisateur

Le processeur humain

Les biais cognitifs

La mémoire

La densité informationnelle et ses interférences

La hiérarchie des composants visuels

Les neurones miroirs

L'attention du cerveau

Focus 1 : Les lois en UX

La théorie de la Gestalt, l'extraction d'un schéma

Les lois de la Gestalt

Les lois complémentaires à connaître

Pourquoi utiliser l'UX ?

L'importance de l'UX

Les domaines d'application

L'objectif ultime

S'initier à l'UX Design par la méthode du Design Thinking

L'empathie

La problématique

L'idéation

Le prototypage

Le test

Atelier : Idéation > Comprendre un besoin et proposer une ou plusieurs solution(s)

Maîtriser le processus de conception UX

Les différentes phases du processus de conception UX

Cycle de conception des systèmes intéractifs

Présentation du processus

Etape 1 : Planification > Définir le projet et réaliser des recherches préliminaires

Définir son projet

Mener ses recherches

Recruter des utilisateurs

Déontologie et éthique

Atelier : Benchmark

Atelier : Empathy map

Etape 2 : Exploration > Recueillir les besoins des utilisateurs

Les entretiens

Le focus group

L'observation

Le questionnaire exploratoire

Les sondes culturelles

Atelier : Entretien

Focus 2 : Phase d'analyse et de synthétisation

Les personas

L'experience map

Atelier : Persona et experience map

Focus 3 : L'architecture de l'information

Définir l'architecture de l'information

La hiérarchisation

La taxonomie / l'étiquetage

La méthode OOUX

Exemple d'outils

Etape 3 : Idéation > Produire des idées de conception

Le brainstorming

Les cartes d'idéation

Le design studio

Le tri de cartes

Etape 4 : Génération > Formaliser des solutions de conception

Le storyboarding

Le maquettage

La gamification

Le tri de cartes

Focus 4 : Prototyper avec Figma

Atelier : Sketching / zoning / wireframe

Etape 5 : Evaluation > Evaluer de façon itérative les solutions générées

Journal de bord

Complétion de phrases

Courbes d'évaluation UX

Echelles UX

Echelles d'utilisabilité

Test des 5 secondes

A/B Testing

Evaluation des émotions

Réaliser un audit UX / UI ou “Audit ergonomique”

Utiliser les heuristiques

Connaître sa cible

Définir les objectifs de l’audit

Etablir un plan d’actions

Atelier : Réaliser un audit

Workshop PCUX

Choix d'un projet (proposé par Dawan, projet perso ou projet pro)

Mise en situation du Processus de conception UX autour du projet choisi

Notions complémentaires (UX + UI)

Accessibilité

Affordance

Guidelines

Polices

Couleurs

Iconographie

Le design persuasif

Le design éthique

Annexes

Conception d'une application mobile

Retenir les concepts clés

Récapituler les bases du projet

Différencier méthodologies agiles et UX Design

Programme de Formation UX Design Avancé (TP CDUI)

Récapituler le Processus de Conception UX

Récap des phases de Planification, d’Exploration, d’Idéation et de Génération

Point sur les notions à revoir PCUX

Échange en groupe sur les outils mis en place

Échange sur les points de blocage

Faire le point sur un projet

Point sur l’avancement du projet

Point sur les outils sélectionnés en première semaine UX

Point sur la mise en place des outils

Échange sur les alternatives possibles

Mise en place des alternatives

Faire le point sur les outils d’évaluation possibles

Complétion de phrases

Courbes d’évaluation UX

Échelles d’utilisabilité

Échelles UX

Évaluation des émotions

Évaluation experte

Inspection cognitive

Journal de bord

Test des 5 secondes

Tests utilisateurs

Envisager d’autres méthodes d’évaluation

Méthodes guérillas

Entretiens

Focus group

Questionnaires exploratoire

Observations

Planifier son test utilisateur

Choisir le/les outil(s)

Calibrer son test

Planifier le test

Trouver des testeurs :

- Définir ses utilisateurs testeurs (personas)

- Contacter et rencontrer ses utilisateurs testeurs

- Connaître les plateformes de tests utilisateurs

Déterminer les résultats attendus

Prévoir des alternatives

Réaliser le test

Interpréter les résultats

Apporter les améliorations à réaliser (phases itératives PCUX)

Mettre en place la phase d’Évaluation

Choix des outils

Planification du test

Planification du recrutement des utilisateurs

Déterminer les résultats attendus

Prévoir des alternatives