Motion Guidelines
With Picsart's rebrand, it was crucial to establish clear motion graphic guidelines for the brand. I took charge of this along with my in-house team.
Logo Animation
The logo animation is how we sign off any animation. Think of this as our seal of approval. Consistency is the most important element here, and expressive examples should be reserved for larger, more creative executions.
Bounding Boxes
Here are examples of various ways to animate bounding boxes containing static images.
Timing and duration
Animations can be collected and stored in multiple groups (Time Units)
Animations can be sorted by distance and the size of an animated object, the bigger the distance that object needs to pass, the longer is the Time Unit.
End Cards
Depending on the time available in the animation, various levels of expressive end cards can be used.
Text Animation
Text always animates in the natural reading direction of the given language.
It can be animated using individual word elements, or individual character elements depending on the length of the text and the importance of focus.
Easing:
Some examples of how we use types of easing, depending on the animation purpose.
Rhythm
Try creating bars to help you think about delays, pause etc. This will help build perfect rhythm and timing for the video sequence.
Expressive executions
At times, our brand allows for exploration of new, expressive ways to use our brand elements. Here are various examples of it all put together.
Text Box
Animation of a text box should be done using individual character elements, and mimic a user’s typing.
When cycling through fonts, the bounding box should always adjust in size to the type.