UI Design Motion Flashcards
What is playing with relative scale?
Changing an objects scale relative to another object can help create depth in flat digital environments.
What is parallax motion?
A depth cue that causes objects that are closer toyou to appear to move faster than objects that are further away.
The further away something is, the ______ it appears to move
slower
Parallax motion influences how we…
judge relative distance
What is Parallax Scrolling
Slight time differences between foreground, midground, and background layers amplify the perception of depth as the user scrolls down the page.
What are the most common UI animation types?
- Micro-interactions
- Loading and progress
- Navigation
- Storytelling and branding
What are Micro-interactions?
They inform users when an action is successfully completed, or when an operation is unsuccessful, essentially helping users to visualize the result of each action.
What are Loading and progress animations?
Loading and progress animations help to keep users informed by demonstrating the process of completing an action or letting them know how long it will be until the action is completed.
What are Navigation animations?
Navigational animations guide the user through the interface.
What are Storytelling and Branding animations?
Often found on welcome screens, decorative animations are a fantastic way to strengthen the brand identity and tell a story in a matter of seconds.
Animation can be used to attract users to certain brand elements, and for showcasing a product in a fun and engaging way. A classic example of storytelling and branding animation would be an animated logo that instantly lets people know what kind of brand you are.