UI Design

Objectifs

- 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.

Programme 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.

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique