Motion is another way to call attention to specific elements on the screen. Use motion to transition from menu to menu, introduce important information, and show various button states. The style of motion can have a major impact on the look and feel of a UI. Use the timing of an animation to create a visual style that best conveys the spirit of your game.

Here’s a simple example of animation where a rectangle is used:

Motion Curves

To illustrate animations, use motion mockups rather than still imagery. To convey time and pace, use fewer words and more animated prototypes and movies.

Here are a few areas you can explore when designing motion mockups:

  • Animation / Motion Graphics
  • Enhanced Mockups
  • Timing
  • Visual Impact
  • Transitions
  • Style
  • Principles of Motion
  • Motion Direction
  • Concise / Loose
  • Sci-fi / Cartoony
  • Speed / Flare

Screen transitions

Screen transitions are a great way to move the player through menus. Transitioning from one background or UI component to another creates an effect of motion and can help guide the user’s attention on the screen.

Start the transition sequence by moving the components onto the screen and end the transition with the first thing you want the player to interact with. Waiting for each screen to open can become tiresome, so limit transitions to 0.5–1 second and use them only for navigation to new menus. Sub-menus and interactions within a menu should have little animation. Remember the golden rule of design: Less is More.