Ben je al een tijdje werkzaam binnen UI Design? Heb je de basisconcepten mee vanuit ervaring (of vanuit de basisopleiding UI Design) en zoek je naar verdieping van je expertise? Dan biedt deze tweedaagse opleiding UI Advanced het antwoord op de uitdagingen die je zoekt. Op dag 1 leer je een uitgebreide UI kit bouwen en beheren in Figma. Tijdens dag 2 word je ondergedompeld in de wereld van micro-animatie en ga je er zelf mee aan de slag.

Na deze opleiding:

• Beheers je UI Library management en prototyping
• Kan je een UI kit opbouwen en uitzetten
• Weet je welke animatievormen er zijn in digitale context
• Kan je zelf micro-animaties maken in Lottie en Figma

Dag 1: UI library management & prototyping

Inleiding

• Wat is een UI kit
• Wat is een design system

Atomic design & UI KIT

• Hoe een UI kit uitbouwen in Figma
• Color Styles & Typography styles
• Variables en het gebruikt hiervan
• Componenten maken en nesten
• Componenten voorbereiden op prototyping
• Prototyping : interactions & scroll behaviour

Practice

• UI kit opzetten
• UI kit uitbouwen
• Scherm bouwen met componenten
• Componenten flexibel houden (met variant’s & booleans)
• Opzetten van “themes” en multidimensional variants

Dag 2: Animatie & integratie

Inleiding

• Wat zijn animaties in digitale context
• Micro animations
• Animatie principes, opbouw en timing!

Figma & animatie

• Hoe je UI kit hiervoor voorzien
• Opzetten van een goede workflow
• SVG animaties opzetten met Lottie
• Hoe animaties in Figma prototyping te krijgen

After effects & illustrator

• Waarom we hier detailed animations maken
• Vector based design
• Integratie met illustrator voor detail animations
• Hoe exporteren voor development

Practice

• Illustrator SVG preparation for animation basics
• After effects & Lottie
• Figma en animatie