Motion Design - How To

The Process at Studio Vi:

Before going further, we would like to give you an overview of our motion design process before continuing and discussing some key stages in detail.

1. Inspiration and Concept Design – Our designers seek out inspiration from around the internet and then work to create a visual concept that aligns with the values, story, and character of our client.
2. Animation & Application – After our dedicated UX and UI designers have created the design of a product in Figma, our motion designers use After Effects to animate every element of the platform that we want to add motion to.
3. Briefing Developers – Once the design portion of the process has been completed, it comes time to implement the motion in code. First, however, we must brief our developers on what exactly needs to be implemented. Given the large number of micro-interactions and animations we typically use on our digital platforms, these briefs often take the form of comprehensive videos that detail every single piece of motion that needs to be added.
4. Implementation in Code – Using the brief our motion designers have produced, our developers then implement the desired motion in code. This is most often achieved through the implementation of Lottie’s or json-files, or through re-creating the desired motion directly in code using CSS and javascript

Inspiration and Concept Design

Motion design is a constantly evolving field, with new methods, animations, and styles appearing regularly. Our motion designers strive to stay on top of these developments, and work to bring the cutting edge in motion design to work that we perform for our clients.

Our designers seek this inspiration in a wide variety of places. Oftentimes, the wider design community itself is an excellent jumping-off point. Websites like awwwards.com regularly showcase award-winning examples of motion design, while sites like dribbble provide a vast library of animated icons, websites, and micro-interactions. Designers at Studio Vi also look for inspiration from other top designers in the field, and use links developed through social media sites such as Instagram to discover newfound styles, approaches, and design elements. Our designers also often reach out into the wider world for examples to draw inspiration from. YouTube advertisements, special effects in cinema, and a host of other real-world applications of motion help our designers apply motion design to their projects in new and exciting ways.

While general inspiration is of course vital, our clients most often come to us with unique needs that require bespoke and targeted solutions. As a result, our designers are often called upon to find inspiration that fits with the requirements of a specific project. Key to achieving this is a keen awareness of the exact requirements that our clients come to us with. We thus have our designers ask:

• What values does the client want to communicate?
• What is the personality of the client’s brand? What emotions most suit that personality? What emotions contradict it?
• How do other websites use motion to stress a certain personality attribute or value?Asking these questions and making use of reference materials that can include a client’s pre-existing design and/or their brandbook allows a designer to create a moodboard. These boards act as a jumping-off point for the entire design process and allow our designers to collect their various inspirations into a single, workable space. It goes without saying that the objective here is not to copy. Instead, our designers use these boards to think about how best to meet a client’s needs in line with how other top motion designers have achieved the same goal in similar situations.

Animation and Application

Once our designers have collected enough inspiration for a project, it becomes time to apply that inspiration and animate the elements of a platform we want to bring to life with motion. When we animate, we do so in line with Disney’s Principles of Animation first laid out in the 1930’s. While these principles were originally established for use with character animation, we have found them to be exceptionally useful when applied to animation in user interfaces. Disney’s principles (when applied to UI animation) look like:

1. Squash and Stretch: Squash and Stretch represent the gravity, mass, weight, and flexibility of an object. Think of a ball that stretches out when it bounces off the ground. Motion designers most often use this principle in the form of visual changes in the mass, flexibility, or shape of a button that represent changes in functionality or usability.
2. Anticipation: Anticipation covers actions or movements that signal to a viewer something that is about to happen. In cartoons, for example, a lit fuse often signals to the viewer that an explosion will happen soon. Motion designers use this same type of anticipatory motion to design hover states for elements on a webpage. Certain micro-interactions indicate to a user what exactly clicking on a button will do (take for example a button that moves right when hovered over, indicating that it will send you to the next page).
3. Timing: Timing refers to the speed at which animations are displayed on an interface. Much in the same way as traditional animation, the speed at which frames are displayed has an important effect on user satisfaction. Animations that are too long will distract users, while those that are too short might pass too quickly for users to fully comprehend. Motion designers must therefore work to precisely calibrate an animation’s timing.
4. Slow In / Slow Out: Animations almost always look jarring when they are abrupt and sudden. They should instead be eased in and out of a frame to appear normal. Easing is therefore a critical tool for motion designers that want to make their animations appear natural and easy on the eye.
5. Staging: Staging covers how we arrange and choreograph objects within a scene. Good staging points out elements that a designer wants to bring attention to. Motion designers most often use this principle to highlight critical elements within an interface.
6. Arc: Parabolic motion (motion that follows an arc) appears more natural to the human eye than diagonal motion. Motion designers use this principle when designing elements that need to cross the length of an interface.
7. Secondary Action: Secondary actions are supplementary animations that support or enhance an object’s primary animation (think of smoke coming out of a car exhaust as the car travels forward). In motion design, this principle is used to reinforce that a certain button is usable and functional (all micro-interactions are designed according to this principle).
8. Exaggeration: In animation, important actions are often exaggerated for dramatic effect and to draw the attention of the audience. Motion designers use exaggeration in a similar way in order to highlight important parts of an interface that a user should interact with.
9. Solid Drawing: Solid drawing essentially refers to an animator’s ability to render objects in three-dimensional space. This principle is important in motion design, as 3-D objects are generally more appealing and enticing to the user.
10. Appeal: Appeal refers to the charisma of an animated character. Motion designers seek to instil all their animations with appeal, as it is a highly effective means of adding emotion to an interface.

Deciding When to Use Motion

Motion is a powerful tool in the hands of an experienced designer. Part of this experience, however, comes from knowing where and when not to use motion in an interface. Motion that is used in the wrong place, or that emphasises values and feelings that don’t match with a particular brand, risks alienating the user and sending them away from your product or platform.

Where then is the correct place to use motion? While every project we take on is different, we have found that motion is most effective when used to:

• Distract the user from long loading times: Loading screens and lengthy transitions risk diverting users away from your digital platform. Using animations to mask these load times allows you to grasp user attention while also directing their focus towards what you want to emphasise.
• Animate and enliven micro-interactions: Micro-interactions, like hover states, are subtle, animated changes to an interface that react to user interaction (think of a button that changes shape when you hover over it).
• Add visual elements to a webpage: Motion, as we discussed earlier (link to previous motion article), can be used to add emotion to a webpage. By adding targeted animations and visual elements to a webpage, motion designers can support the emotion and values of a brand, while simultaneously working to narrate the story that the brand wants to tell (for example, see our recent site for Kennemerduin Camping).

Implementation in Code

Once our designers have found inspiration, acted on it, and selected and perfected a website’s visual concept, it comes time to implement the various animations and micro-interactions into the platforms code. Motion can be implemented into a digital platform in several ways. Two of the most popular ways of creating lightweight animations and micro-interactions for websites are Lottie and CSS.

Lottie is an open-source JSON-based animation file format originally developed by Airbnb. Lottie renders animations created in After Effects into code (in the form of JSON file). Lottie files are vector based, which means that they can be scaled across multiple different formats without any losses to quality.
CSS is a programming language used by front-end developers to create the visual appearance of a website. It generally covers the visual representation of a website’s layout, colours, and fonts. Importantly, CSS also allows for the creation of animations. CSS animations are mainly used for simple interactions such as changes in colour, size, or the position of elements. When implementing these types of animations, our developers will recreate animations in CSS based on a brief created by our motion designers.

Conclusion

Adding motion to a digital platform is an effective way to develop your brand and excite customers. At Studio Vi, we have the experience and talent necessary to help you realise these benefits. Throughout the entire design process – from finding inspiration to developing that inspiration and implementing it in code – we work in tandem with our clients to create effective and emotive motion design strategies that make vibrant digital platforms that grasp and hold user attention.