Motion Design in digital products

Crash course

You will learn

  • How to think about design in multiple dimensions in context of digital products
  • How to prepare file in Adobe Illustrator
  • How to create first animation in After Effects and with CSS

You will need

  • Adobe Illustrator
  • Adobe After Effects
  • Bodymovin / Lottie plugin
  • Visual Studio Code

Introduction 🥱

Definition

Let’s start with a definition of the motion graphics / design.
According to Wikipedia “Motion graphics” are pieces of animation or digital footage which creates the illusion of motion or rotation..

 

Firstly, let’s focus on the aspect of the illusion.

Illusion creates a deceptive impression of the cube being placed in three dimensional space. In the following examples you will see how minimalistic design decisions can change user’s perception.

 

  • As you can see in the first example – movement along two axis (Y and X) suggests that cube is pushed on the flat surface.
  • In the next example cube is still moving along Y and X axis. However, casted shadow will create illusion of movement along Z axis.

Types of motion

Functional

  • Transitions which improve usability and user experience
  • Animations which emphasise state changes of the components (hover, focus, active) for ex.: link component indicates its click-ability by changing state and showing different cursor

Structural

Transitions which support information architecture (modals, notifications, tooltips, mega-menus)

Emotional

  • Animations which complete moments of delightness (for ex.: finished ticket, ended journey)
  • Animations add unique character to the brand