This handy UX design cheatsheet is invaluable

UX design in motion principles

Design is a science as much as an art, and UX design is one of the areas where that is, or at least should be, extremely apparent. UX design is about crafting experiences that work for users, with form subservient to that experience.

You might be familiar with Disney's 12 principles of animation, which set out a kind of rule book for creating moving images, whether it's for films and cartoons, CSS animations or UI design. The wonderful cheatsheet below takes that concept but updates it for the scientific requirements of UX, providing 12 principles for UX design in motion.

(Image credit: Issara Willenskomer)

This motion UX design crib sheet was devised to accompany a manifesto drawn up by Issara Willenskomer back in 2017. Disney is dead, he claimed, proposing 12 principles for UX design in motion: easing, offset and delay, parenting, transformation, value change, masking, overlay, cloning, obscuration, parallax, dimensionality and dolly and zoom. In turn, he split these into four categories: timing, object relationship, object continuity, temporal hierarchy and spatial continuity.

Willenskomer was adamant that UX in motion is not UI animation. By that he meant, that it's something more fundamental, not just a superficial afterthought intended to make an experience prettier or more engaging. It actually adds value to the underlying UX design and supports usability by creating continuity, narrative and relationships.

12 Motion Design Principles (mega thread) 🧵👇by Micah Bowers#ux #ui #uxdesign #uidesign #productdesign #motion #animation #usability #html #css #js #swiftui #mobile #webdevelopment #webdesign #appdesign #apple #android #design #userexperience #visualdesign #color #figma pic.twitter.com/LehcmGOLVUApril 21, 2023

UX Links recently shared a review of these UX principles in a Twitter thread with a tweet for each principle, complete with a gif as an example and comments on why each principle works and how it can be implemented. Each tweet provides a real-world example of the principle in action, shedding some more light on how the principles work in practice.

(Image credit: Future)

Consider signing up for our UX design course to learn more about the subject. You might also want to tool up with the best UI design tools.