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

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é