UI Design : Découvrir et maîtriser l'interface utilisateur

Pratique des logiciels graphiques Adobe Photoshop ou Illustrator ou d'un logiciel de conception graphique.
S'intéresser aux interfaces utilisateurs et aux expériences utilisateurs.

Découvrir et maîtriser les principes de l’Interface Utilisateur (UI)
Comprendre et réaliser une interface UI pour le web et applications
Assimiler la conception de maquettes et prototyper avec un logiciel de conception: Adobe XD, Figma, Penpot, etc.

Définir l'UI Design

Présentation de l'Interface Utilisateur (UI)
La place de l'UI au sein de l'UX
Les éléments de l'UX
Le rôle de l'UI Designer

Comprendre l'interaction avec une interface

Les différents types d'interface
L'interaction selon les interfaces
L'évolution de l'interaction dans notre environnement
Le responsive web design

Atelier: Voir et formuler un besoin

Atelier: Formuler de premières idées à partir d'une carte d'empahie (empathy map)

Atelier: Cartographie une expérience

Découvrir le Design Thinking

Comprendre la démarche Design Thinking
L'empathie
La problématique
L'idéation
Le prototypage
Le test

Atelier: Atelier d’idéation basé sur la refonte d’un site web

Concevoir un visuel

Les 10 principes de Nielsen
Les grilles de mise en page
Les théories de la Gelstat
La loi de Fitts
Les lois complémentaires
L'affordance
Focus: Le maquettage
Les notions de maquettage
Le sketching
Le zoning
Le wireframeLe prototype
Les guidelines
Les design systems et kits UI

Connaître les autres outils de génération

Rappel de la phase de génération (Etape 4 du Processus de conception UX)
Le storyboarding
La gamification
Le tri de cartes

Atelier: Création d'une maquette papier autour d'un projet

Travailler 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:L'arborescence
Le sens de lecture
Le fil d'Ariane
L'usage des textes et pictogrammes
La hiérarchie textuelle et SEO
Les formulaires

Assimiler les bonnes pratiques et les notions d'accessibilité

Les devices et zones d'interactions
Les gestes de navigation
La bonne pratique du obile-first
La ligne de flottaison
L'intégration à un écosystème
Les couleurs
L'iconographie
Les polices
L'accessibilité

Prototyper avec Figma

Manipuler Figma
Animer son prototype
Partager son projet
Les plugins Figma

Atelier: Prototypage wireframe

Penser au-delà de la conception

Les logiciels de prototypage
Mettre en avant ses créations
Réaliser et maintenir sa veille
Les nouvelles alternatives émergentes

Atelier: Faire évoluer son wireframe en prototype intéractif afin de le partager

Concevoir une application mobile

La réflexion
Les différents modèles de conception
La collaboration et les collaborateurs
Focus: Les immanquables app'

Atelier: Conception d'une application mobile

Réaliser un audit UI / UX

Qu'est-ce qu'un audit UI / UX?
Connaître sa cible
Focus: Les personas
Définir les objectifs de l'audit
Etablir un plan d'action
Réaliser l'audit

Atelier: Audit UI d’un site internet existant + proposition d’une ou plusieurs solutions ///Audit UI d’une application mobile existante + proposition d’une ou plusieurs solutions
Atelier: Produire un prototype intéractif et le design system associé

Méthodologie basée sur l'Active Learning : 75% de pratique minimum. Chaque point théorique est systématiquement suivi d'exemples et exercices.

Contrôle continu

Attestation de fin de stage mentionnant le résultat des acquis