Concevoir un design d'interface

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.