Motion captures the new creative energy of the Vi brand.

 

What's on this page:

How we move

When we move, we should aim to capture the bold simplicity of Vi by keeping content to a minimum for maximum impact.

To capture the essence of our strategy, all motion moves forward in the frame once activated by the logo and Mustard particle.

 
_0_howWeMove.gif

Opening

All animations are initiated by opening up our logo, bringing to life our strategy of our customers and needs being at the heart of our brand. We can open in a variety of ways using our brand expressions or simply opening our logo. All animation should be activated by the Mustard particle.

 
 

Frame expression

When using our frame brand expression, we focus on making products the hero. The particle triggers the animation, and as the logo opens up, the product is revealed, scaling up within the logo.

_1_Image expressionX2.gif
 

Trail expression

The trail is the full expression of our brand in motion. Our particle triggers the animation, and the logo opens up revealing our exciting brand world.

The trail can move expressively across and down or open up over footage (or stills) or interact with simple messaging. When trails are in an open state ensure the animations within are dynamic, fully bringing our world to life.

2_Trail experssions X 4.gif
 

Crop expression

The crop expression in motion acts slightly differently to the rest of our motion examples. The crop expression is intended to suit compositions that have more content than the other brand expressions so therefore needs to move slower than other applications to ensure the message is taken in.

_8_CropExpression_1.gif
 

Other ways to open

A simpler version of the brand in motion has been created where the logo opens out and doesn’t scale up.

_3_Other way.gif

Transitions

When transitioning between images or footage use a clean-cut diagonal wipe. This can be at any angle that is in harmony with the content you are moving between. To transition between messaging a simple zoom and grow effect works best.

4_Transitions_x4_1.gif

Endframe

Our endframe resolves into our primary brand expression using our dynamic particle that swoops and circles in to settle at the bottom of the logo.

_5_CTA+Endframe.gif
_5_EndframeX2_2.gif
 

Simplified endframe

There may be situations where we need a quicker, simpler or more restrained endframe, for these situations, we would use our simplified endframe. Our simplified endframe references our motion partnership lockup.

_5_Endframe_simple.gif

How it comes together

Animated Instagram post

Animated Instagram post

 
 
Screensaver

Screensaver

Storefront animated signage

Storefront animated signage

Don’ts

 
7_1_Don't separate logo.gif

× Don't open the logo from the 'V' side, this appears clunky

7_7_Dont_Shunt.gif

× Don't move sideways or backwards, all movement should be forwards

7_3_Don't_Zoom into dot.gif

× Don't zoom into elements of the logo, our logo should always remain solid and unedited

7_4_Don't_Use particle as device.gif

× Don't use the particle as a decorative element or something that lives independantly to the logo

7_2_Don't offset logo from centre.gif

× Don't open into the logo without centering the logo first

7_8_Dont_Spin.gif

× Don't introduce unnecessary motion like spins

7_9_Don't_Partnership.gif

× Don't open the logo while locked up, resolve to a standalone logo first

7_5_Dont_Crash into type.gif

× Don't crash into elements when zooming, always move through a gap or part elements slightly

7_6_Dont_Wipes.gif

× Don't use cut transitions along a vertical or horizontal line, these should always be angled

Things to remember:

01 We always move forward into the frame

02 The Vi logo should initiate every piece of motion

03 Content should be kept to a minimum when using motion

 
Screenshot 2019-08-22 at 11.17.23.png