Objectifs de la formation
- Maîtriser les concepts fondamentaux du visual design, - Intégrer efficacement l'iconographie dans le processus de branding, - Concevoir des wireframes sur Figma améliorant l'expérience émotionnelle de vos produits, - Comprendre les biais cognitifs, les règles d'ergonomie et d'architecture de l'information, - Créer des guides de styles, branding émotionnel, et le design de produits avec une collaboration technique et une connaissance du code, - Mener des benchmarks concurrentiels approfondis, - Analyser les interactions et les flux utilisateur, - Concevoir des modules pour les applications web, et appliquer des techniques de conception adaptative et responsive, en tenant compte des tendances actuelles du design, - Créer des maquettes et des pages web respectant les principes de durabilité et d'accessibilité, - Apprendre à collaborer efficacement avec les développeurs en utilisant des pratiques Hand Off (transmission du design, contrôle qualité, Design System et multibranding), - Réaliser des composants d'interface partageables dans le cadre d'un UI Kit ou d'un Design System, - Savoir réaliser des wireframes et mockups sur Figma, - Maîtriser les fondamentaux de Figma pour concevoir des interfaces.
Contenu de la formation
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. ? Modules, Patterns, Éléments ? Patterns, Éléments pour les Webapps 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. - Conception visuelle pour différentes résolutions d'écran. - Compréhension des tendances actuelles du design. ? 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.
Résultats de la formation
Attestation d'acquis ou de compétences;Attestation de suivi de présence
Conditions spécifiques d'accès à la formation
- Bonne culture du numerique et de ses usages, - Capacite a dialoguer et a travailler en groupe, - Parler francais, - Un ordinateur (Mac ou PC) et un navigateur recent, - Les logiciels (gratuits et cross-plateforme) qui seront requis pour la formation.