What techniques can you use to create functional and creative motion designs for web and mobile?

1 Define your purpose

Before you start animating, you need to have a clear idea of what you want to achieve with your motion design. Is it to guide the user, to illustrate a concept, to add personality, or to create a mood? Your purpose will influence your choice of motion style, speed, timing, and direction. You also need to consider the context and constraints of your platform, such as screen size, loading time, and accessibility.

2 Use the 12 principles of animation

The 12 principles of animation are a set of guidelines developed by Disney animators in the 1930s to create realistic and appealing animations. They include concepts such as squash and stretch, anticipation, easing, overlap, and secondary action. You can apply these principles to your motion design to make your animations more natural, expressive, and dynamic. For example, you can use squash and stretch to show the elasticity and weight of an object, or anticipation to prepare the user for an action.

4 Use motion patterns

Motion patterns are common and consistent ways of animating elements on web and mobile platforms. They help you create a coherent and intuitive motion design that matches the user's expectations and behaviors. For example, you can use motion patterns such as slide, fade, scale, or rotate to animate elements in and out of the screen, or to indicate their state and function. You can also use motion patterns to create transitions between different pages or sections, such as swipe, flip, or fold.

5 Experiment with motion tools

There are many tools and software that you can use to create and implement your motion design for web and mobile platforms. Some of them are specialized for motion design, such as Adobe After Effects, Lottie, or Principle. Others are more general-purpose for web and mobile design, such as Figma, Sketch, or InVision. You can experiment with different tools and see what suits your workflow and needs best. You can also use online resources and tutorials to learn new skills and techniques.

6 Test and refine your motion design

The final and crucial step of creating functional and creative motion designs is to test and refine them. You need to check if your motion design works well on different devices, browsers, and resolutions, and if it meets the performance and accessibility standards. You also need to get feedback from your users, clients, or peers, and see if your motion design achieves your purpose, communicates your message, and enhances the user experience. You can use tools such as Google PageSpeed Insights, WebAIM, or UserTesting to test and improve your motion design.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?