Motion Designing for Web Designers

Motion designing is a challenging aspect of design and majority of the companies rely on the services of motion designers for integration of animations in their final products. However, any web designer can integrate animations in their design if they follow the following rules:


1) Know your purpose

Know your purpose by Saad Raja

Before you insert an animation into your design, you must know the purpose of why does that animation need to be in your specific product or brand? Generally, there are 3 uses of animation in web designs which every designer must know so they can decide the purpose behind the animation they plan to insert.

  • To smoothen the transition between the states of an object or to show how an object went through a change of state due to user interaction.
  • To emphasize the significance of a particular information or action or to encourage users to proceed with the next step of the website or design.
  • To reveal and hide information as per the need. For example, websites have drop-down menus which can be hidden when not needed.

2) Figure out your ‘feel’

Figure out your ‘feel’ by Saad Raja

As a web designer, you must know that animations help develop the personality of your brand so it is essential for you to consider how the animation should feel to the user. Each animation feels different in terms of its motion, movement and the impact that it leaves on the user even if the animation has the same purpose. Therefore, you need to make an intelligent choice based on the brand and how you wish to communicate your brand message with the help of motion.

3) Standardize existing animations

Standardize existing animations by Saad Raja

After figuring out the purpose and feel of the animation, you need to audit already existing animations by categorizing them on the basis of effect, example, timing, properties, and the feel they exhibit. This will help in deciding which animations best suit the need for your brand design.

4) Define your animation usage pattern

Define your animation usage pattern by Saad Raja

In this step, a web designer needs to notice his collection of animations on the basis of the determined purpose and feel. Basically, you need to shortlist the animations that will help you in effectively achieving your purpose by giving the right feel. Combining these properties and shortlisted animation from several categories will eventually assist you in making your own unique pattern which you will define using help from animation templates.

5) Specify your blocks

Once you have your patterns, it is fundamental that you move to specify the aspects that will help you in creating your new animations. For example, you need to know the right timing for perfect consistency with your brand idea and you need to know the specific properties like color, scale, distance, and blur that will shape up your animation.

6) Fix your principles

Fix your principles by Saad Raja

When integrating animations into your design systems, each designer must abide by a set of guiding principles that include:

  • Prefer subtle motion
  • Use short timings for interface
  • Do not use strong flashing as it causes discomfort to users

These guiding principles also include the rationale and spatial metaphors for your chosen animation.

Overall, motion designing might not be hard if you stick to the above-given instructions but it is a technical process which requires a cohesive and documented approach.

Post A Comment