This handy UX design cheatsheet is invaluable

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.

Principles of 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.

See more

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.

an image saying 'learn design with Creative Bloq' with two people next to it

(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.

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

Joseph Foley

Joe is a regular freelance journalist and editor at Creative Bloq. He writes news and features, updates buying guides and keeps track of the best equipment for creatives, from monitors to accessories and office supplies. A writer and translator, he also works as a project manager at London and Buenos Aires-based design, production and branding agency Hermana Creatives, where he manages a team of designers, photographers and video editors who specialise in producing photography, video content, graphic design and collaterals for the hospitality sector. He enjoys photography, particularly nature photography, wellness and he dances Argentine tango.