Programme de Formation UI Design
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-UI
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'IXD
Quid du “goût” en UI ?
Le goût
Le nombre d'or et la suite de Fibonacci
La règle des Tiers
Quid du “mauvais goût” ?
Atelier : Voir et formuler un besoin
Atelier : Formuler de premières idées à partir d'une carte d'empathie
Atelier : Atelier d’idéation basé sur la refonte d’un site web
Atelier : Réflexion projet fil rouge UIRéfléchir et penser une interface
Les 10 principes de Nielsen
La psychologie cognitive
Les grilles de mise en page
Adaptative ? Responsive ? Mobile first ?
L'affordance
Développer une interface
Le six-to-one
Le crazy 8
Le design studio
Le maquettage
Prototyper avec Figma
Manipuler Figma
Les plugins Figma
Atelier : Projet fil rouge - Mise en place des premiers éléments UI sur FigmaBonnes pratiques et notions d'accessibilité
Les guidelines
Les polices
Les couleurs
Focus : La psychologie des couleurs
L'iconographie
L'accessibilité
Les critères de Bastien et Scapin
La ligne de flottaison
Les gestes de navigation
Exemples de standards
Multiples de 8
Boutons
Grilles de mise en page web
Grilles de mise en page mobile
Grilles de mise en page tablette
Types d'éléments d'interface
Lexique
Déroulé des différents types d'éléments d'interface + exemples
Vocabulaire complémentaire
Atelier : Projet fil rouge - Figma Wireframe basse fidélité puis prototype graphiqueDesign system
Qu'est-ce qu'un Design system ?
Exemples d'éléments à fournir
Étapes que je conseille
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 d'un produit - service - systèmeAu-delà de la conception
Les logiciels de prototypage
Mettre en avant ses projets UI
Réaliser et maintenir sa veille
Les challenges UI
Atelier : Projet fil rouge - Figma Faire évoluer son wireframe en prototype interactifNotions complémentaires
Concevoir une application mobile
Le design persuasif
Le design éthique