This article showcases five recent UI motion design cases—from Airbnb's envelope invitation to Grab's infinite‑saving symbol—illustrating how animated visual cues can strengthen trust, highlight discounts, and create a sense of ceremony that boosts user engagement and perception.
This article explores the importance of motion design in product interfaces, detailing its benefits such as reduced learning cost, brand differentiation, user conversion, and engagement, while providing practical guidance on tools, optimal animation durations, physical motion principles, output formats like GIF and Lottie, and effective handoff documentation for developers.
This article showcases five recent UI/UX case studies—including NAVER's interactive banner, Agoda's coupon animation, Airbnb's direct review button, Zomato's membership effects, and TooGoodToGo's dynamic pricing—highlighting how motion design and thoughtful interaction can capture attention, reinforce brand messaging, and improve user experience.
This article explains the concept and importance of motion transition design, introduces the Skyline rendering engine for WeChat mini‑programs, and provides detailed implementation guidelines—including custom routing, shared‑element animations, gesture handling, and performance optimizations—illustrated with complete code examples.
This article explains what interactive animations are, why they are essential for smooth user experiences, and outlines a complete workflow—including evaluation, design principles, timing, curves, and documentation—to help designers create consistent, comfortable, and efficient motion effects.
This article explains how the NetEase Mail team enriched their "Yi Miao" emoji by applying Disney's twelve animation principles, detailing each principle with examples and GIFs to enhance expressiveness, visual appeal, and user interaction in dynamic emoji design.
This article explores Sun Guoen's dynamic design language methodology, illustrating its core concept of using natural phenomena to convey feeling, analyzing ColorOS's animation challenges and breakthroughs, discussing the shift from flat to abstract 3D design, and outlining team and industry trends for future immersive UI experiences.
This article examines the evolving challenges of a mature rental product and outlines design‑driven solutions—standardized interfaces, engaging motion, brand‑focused visuals, trust‑building cues, and simplified terminology—to improve user experience, increase conversion, and strengthen platform credibility.
This article explores how motion, inspired by everyday life and Disney animation principles, shapes interaction design through ten core animation principles—real‑time vs. non‑real‑time, easing, offset, linking, transformation, value changes, masking, cloning, obscuring, parallax, dimension, and push/pull‑scale—to create more natural and engaging user experiences.
Learn how the Mt.Mograph Motion and Bodymovin plugins streamline creating and exporting After Effects animations, offering quick axis adjustments, curve editing, bounce effects, and seamless Lottie integration for web and mobile front‑end development.
Over the past year, I independently led the design of NetEase’s new reading app “Snail Reading,” covering brand research, visual identity, UI/UX, motion design, and design guidelines, sharing the process, principles, and insights that helped the product achieve multiple awards and a cohesive brand experience.
This guide explains how to create linear, curved, and path‑based movement animations on the web using pure CSS keyframes, SVG animation techniques, and JavaScript libraries like Greensock, while also showing how to export After Effects keyframes into CSS code.
The article explores the importance of motion design in product interfaces, detailing how thoughtful animations can enhance comfort, reduce friction, add delight, maintain attention, and subtly improve feedback, while providing practical examples and guidelines for effective UI animation.
