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.
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.
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Joe is a regular freelance journalist and editor at Creative Bloq. He writes news, features and buying guides and keeps track of the best equipment and software for creatives, from video editing programs to monitors and accessories. A veteran news writer and photographer, he now works as a project manager at the London and Buenos Aires-based design, production and branding agency Hermana Creatives. There he manages a team of designers, photographers and video editors who specialise in producing visual content and design assets for the hospitality sector. He also dances Argentine tango.