Concevoir un design d'interface

Ce parcours permet d'acquérir des compétences essentielles pour concevoir des interfaces utilisateur performantes et inclusives, maîtriser l'outil Figma et intégrer des pratiques d'accessibilité numérique dans vos projets.

- Expliquer les fondements théoriques du design d’interface, du visual design, de l’ergonomie et de l’architecture de l’information - Identifier les besoins utilisateurs et analyser les objectifs business pour orienter les choix de conception - Structurer l’information sur un écran en appliquant des principes de hiérarchisation visuelle et de lisibilité - Appliquer les principes de couleur, de typographie et de composition graphique - Concevoir des wireframes, maquettes et prototypes interactifs simples sur Figma - Créer des composants d’interface réutilisables dans un UI Kit ou Design System - Intégrer les principes de l’accessibilité numérique dans la conception d’interfaces - Collaborer avec les développeurs en mettant en œuvre des pratiques efficaces de hand off - Mettre en œuvre une démarche d’éco-conception pour réduire l’impact environnemental du numérique - Sensibiliser et impliquer les équipes (design, front, back) dans une dynamique d’écoresponsabilité - Décrire les contraintes liées à l’intégration web (export, performance, responsive) et adapter la conception en conséquence

MODULE “UI Design” (4 jours) Jour 1 : Conception visuelle et Designer Full-stack - Branding - Principes de la couleur & plugins figma - Typographie et lisibilité- Iconographie et responsive - Atelier : Audit pour améliorer l'expérience émotionnelle de votre produit. Compétences d'un Designer fullstack : - Designer UX (biais cognitifs, règles d'ergonomie, architecture de l'information). - Designer UI (conception de l'information, lignes directrices de style, branding, design émotionnel). - Product Designer (métriques, collaboration avec la tech, code). - Designer No Code (Webflow, Make, Zapier, Azure, GPT) - Atelier : Amélioration de l'expérience en tant que designer full-stack Jour 2 : Processus et Conception d'interface utilisateur - UI Design process - Atelier : Benchmark : recherche concurrentielle sous différents angles, compilation d'une liste de ressources, analyse et comparaison des interactions et flux utilisateurs des concurrents, propositions de fonctions utiles aux utilisateurs du produit. - Atelier : Mockup : Créer une page pour une Webapp. Jour 3 : Accessibilité, Eco-conception et Design responsive - Tendances comportementales - Technologies - Accessibilité - Eco-conception - Atelier : Créer une maquette de page accessible et durable, audit et itération. - Conception de Sites Web / Landing Pages / Web Apps / Apps Mobiles : Design adaptatif vs. réactif. - Placement et comportement des éléments - Techniques - Appareils - Grilles, Rythme & Espacement - Atelier : Responsive Design : création d’une série d’écrans pour 3 appareils différents. Jour 4 : Transmission (Hand Off), Design System et Prototypage sur Figma - Best practices pour la collaboration avec les développeurs - Passation de design (handoff design) - QA de l'implémentation du design - Atelier : Design critique - Design system & multibranding - Atelier : Design system - Atelier mise en pratique sur Figma : Expérimentation des interactions sur votre projet avec votre mentor. MODULE “Figma” (2 jours) Jour 1 : Premier contact avec Figma : du wireframe au mockup - Appréhender Figma, son interface, sa structure, ses logiques - Découvrir les fonctions de bases de Figma - Atelier Wireframe : créer son premier wireframe simple et bien structuré - Découvrir la logique de composants atomiques - Atelier UI kits : créer ses premiers composants responsives Jour 2 : Structurer son workflow dans Figma - Atelier Mock-Up : poser des premières intentions graphiques - Introduction aux fonctions avancées de Figma (autolayout simple) - Introduction au design accessible dans Figma - Atelier prototype : créer un prototype hi-fi et l’animer simplement (Smart Animate) - Collaborer, partager, augmenter son flow de production - Exercice d’application et d’évaluation WORKSHOP “Écologie Numérique : Comprendre les enjeux de l'éco-conception” (4 heures) Découvrir les règles fondamentales de l'écologie numérique et expérimenter les leviers et méthodes pour agir.