extending to the animation aspect of a style guide that we have already built for our ecommerce website and app, What area's of the UI do you need to look at.

These are currently what I could break it down into 3 things

  • Transitions when the user moves between different screens, do they slide in from the side, or do they fade in

  • Spatial Model the overall mental model of space the app is built on. how things gel together, does the user navigate across or dive deep. is there friction, magnetism or bounciness?

  • Micro interaction e.g. when a product is added to cart, the icon changes state, or when incorrect info is entered the text box turns red

Am I missing out on anything here? is this the right way to go about building animation for a style guide

1 Answer 1


As far as I understand your question, you must read this article: https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

It clearly categorises animation based on their logical purpose. In each category, you can create do's and don't of interaction in the styleguide

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.