Programme & Référentiel
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.