Chưa có tác phẩm nào gắn tag này.
Khi bạn tap nút "like" trên Instagram và icon heart bouncing playfully, khi pull-to-refresh trên Twitter, khi swipe để delete email và message slide elegantly left với delete button bounce → đó là tác phẩm của UI Motion Designer.
UI Motion Designer là chuyên gia thiết kế motion + animation + micro-interaction cho digital interface (app, website). Khác với broadcast / brand Motion Designer — UI Motion focus chặt vào interface flow + user interaction. Là specialty hybrid giữa UI Design và Motion Graphics, growing fast với app + web sophistication tăng.
UI Motion Designer là chuyên gia thiết kế motion cho user interface: transition giữa screen, micro-interaction (button press, swipe, like), loading animation, onboarding sequence, state change góp ý. Phân loại theo product: (1) App Motion (mobile) — iOS / Android app; (2) Web Motion — website interaction; (3) OS / Platform Motion — system-level motion (iOS, Android, macOS, Windows team); (4) Game UI Motion — game menu animation; (5) Smart device Motion — watch, TV, automotive UI. Phân loại theo company: Product company in-house (Apple, Google, Spotify, Airbnb), Agency (digital agency), Studio specializing UI motion (UseAllFive, ueno, Active Theory).
Khác với Motion Designer general (broadcast, ad, brand video) — UI Motion interface-specific. Khác với UI Designer (static screen) — UI Motion add motion + interaction layer. Khác với Interaction Designer (overall flow + behavior) — UI Motion executes motion specifically. Khác với Animator (storytelling-focus) — UI Motion utilitarian + brand. Hợp tác chặt với: UI Designer, UX Designer, Interaction Designer, Product Manager, iOS / Android / Web Engineer, Brand team.
UI Motion Designer — interface motion specialist
UI Motion Designer work tại product company in-house / digital agency / motion studio. Báo cáo Design Lead / UI Director / Head of Design. Embed trong product team với UI/UX Designer + Engineer. Quy trình per feature: receive UI design + interaction spec → explore motion concept (3-5 ngày) → prototype motion (1-2 tuần) → review + iterate → spec animation document for engineering → engineering implement + QA → polish.
Receive UI design + interaction spec from UI/UX Designer. Explore motion options: bounce-y, snappy, smooth, playful? Study existing motion in app (iOS spring, Material Design). Build motion concept: principle (anticipation, follow-through, ease), velocity (snappy 200ms vs cinematic 800ms), character (energetic vs calm). Establish motion language consistent across feature.
Concept + style
Build prototype in tool: After Effects (concept), Principle + ProtoPie + Origami (interactive prototype on device), Figma + Smart Animate (basic), Framer (web). Test on actual device — feels different than computer screen. Show multiple options for stakeholder review. Iterate based góp ý.
Prototype tool
Test on device
Critical step. Engineer cannot read After Effect file — need clear spec document: timing (200ms, 400ms), easing curve (cubic-bezier value), property animated (opacity, scale, translateY), trigger (tap, swipe, scroll). Use spec tool: Lottie (export AE → JSON play in app), Flow, Haiku, hoặc detailed Figma annotation. Code-friendly spec save engineering time + ensure fidelity.
Spec engineering
Engineering implement motion. Designer QA on actual build — pixel + timing + easing match spec. Polish nuance — feel-right detail. Document motion in design system: motion principle, easing token, duration token, transition pattern — for future feature consistency. Contribute to brand motion library.
QA + system
Disney 12 principle apply to UI: anticipation (button slight scale down before action), follow-through (page slide có settle), squash + stretch (logo morph), easing curve (natural motion). Master easing: cubic-bezier(.42,0,.58,1) ease-in-out classic. Read: "The Animator's Survival Kit" (Williams), Material Design Motion guideline, Apple Human Interface Guideline Motion.
After Effects — universal motion tool. Principle (Mac) — interactive prototype Apple-style. ProtoPie — interactive prototype cross-platform. Origami Studio (Facebook open source) — for advanced interaction. Lottie (Airbnb open source) — JSON animation play in app, critical for production. Figma + Smart Animate for basic. Framer for web animation (React-based).
Foundation UI/UX design. Hiểu visual hierarchy, layout, color, typography apply trong app. Some UI Motion Designer cũng UI Designer.
Hiểu code mindset: CSS animation, transition, transform. Math behind easing curve. SwiftUI / Jetpack Compose animation API. Without technical literacy, motion spec mismatch implementation possible.
UI motion 20-400ms — single frame matter. Train eye for "right timing". 250ms vs 300ms perceivable. Iterate obsessively.
Engineer implement work. Empathy + clear spec. Hiểu what's technically feasible. Iterate với engineer in implementation phase.
Path 1: UI/UX Design → specialize motion. Path 2: Motion Design → specialize UI. VN: RMIT Digital Design, FPT Arena, Arena Multimedia. Course online: School of Motion UI Motion course, Motion Design School, Awwwards Academy, InVision Design Better. Study guideline: Material Design Motion, iOS Human Interface Motion.
VN: VNG, Tiki, Momo, ZaloPay, Shopee, Grab, Vinatech in-house UI/UX team có motion role. Agency: Codeaholic, Rikkeisoft, Sutrix Solutions. Quốc tế: Apple, Google, Spotify, Airbnb, Meta, Stripe UI motion team. Build portfolio app + web motion case study — share on Vimeo + Dribbble.
Lead motion for major feature. Establish motion system. Mentor junior. Contribute design system.
Lead UI motion at company. Define motion language for entire product. Hire + manage motion team.
Principal Designer hoặc Head of Motion Design at tech company. Strategic motion direction.
Lộ trình dài hạn: (1) Principal UI Motion Designer / Head of Motion at tech company; (2) Independent freelance — premium rate specialist; (3) Design system architect — own motion system at company; (4) Educator + content creator — School of Motion partner, YouTube; (5) UX Designer transition — broaden into general design role; (6) Founder — tool / studio. Lương: VN UI Motion junior 15-30M/tháng; mid 30-60M; senior 60M-130M+; Principal / Lead 130M-280M+. Quốc tế: $80K-$130K mid; $130K-$220K senior; Principal $220K-$380K+ (Apple, Google level). UI Motion specialty growing fast — app + web sophistication tăng → demand cao + niche skill premium.