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

Objectifs

Découvrir et maîtriser les principes de l'Interface Utilisateur (UI) Comprendre et réaliser une interface UI pour le web et applications

Programme de la formation

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 wireframe
Le 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'étiquettage
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 XD
Manipuler Adobe XD
Animer son prototype
Partager son projet
Les plugins Adobe XD
Atelier : Réaliser un wireframe sur Adobe XD à partir des éléments ébauchés précédemment

Prototyper avec Figma
Manipuler Figma
Animer son prototype
Partager son projet
Les plugins Figma

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é

Validation et sanction

-

Type de formation

Non certifiante

Sortie

Information non communiquée