Motion

Energy in motion

We use moving images to catch our audience’s attention, underline our message, and explain stuff in depth.

Motion design is easier to understand than text, and it helps give our design a human edge that our viewer can empathize with. Motion helps you understand. And that’s exactly what we’re all about.

Motion examples

 

 

 

Our guidelines for motion and explainimations

Introduction shot

Introduction shots always start with a colored background followed by the first sentence of the script.

 

 

 

 

Copy moves into the shot with typing motion effect.
Preferably an illustration is show in the shot that supports the copy.

 

 

 

 

 

 

 

 

Typography

 

Texts reveals with a typing effect.

 

 

 

Text lines consist with a max of 5 words. If there are more then 5 words give the sentence a break.

 

 

 

Numbers that shows percentages need to have a counting number animation effect.

 

 

 

 

 

 

Visuals
Illustration and their motion.

Animate an icon or illustration subtle

 


 

 

In general icons with circle background pops open

 

 

 

When you want to show multiple buildings, use popping windows, different timing of building showing up.

 

 

 

When you need to use client logo’s specific colors, always use white circle behind logo.

 

 

 

 

 

Shots
We have multiple transition options.

 

One option is to make use of the visuals in the shot.

 

Zoom in, enlarge certain areas of the illustration in order to make the cut.

 

 

 

 

 

Second option for transitions concludes cuts of the frames.

  • Move the shot and have both shots the same background colour.

 

 

 

  • Move the shot out of the frame. Any directions (to the north, east, west, or south) is good.
  • Move the shot out of the frame in any directions and fade the background colour of one shot into another shot

 

Camera angle

Keep the camera always in a 2D view. Even when you want to illustrate depth into your animation.

 

 

Colors

If you need more colors to design explainimations, be sure to check the brand guidelines again for secondary colour swatches.

If not available. Use 2 extra tints of the main colour swatches.

 

 

Outro shot

The end of an explainimation needs to show the final results. Audience needs to have enough time to read,

Illustration motion comes to a pause.

 

 

 

Time

Duration:

Explainimations have ideally a duration of 30seconds. Offcourse not all content in the explainimations are the same so a margin of 15 extra seconds is allowed.

 

 

Technical

Explainimations exports for hello energy are allowed up to 15MB of size.

This is due restrictions in the hello energy CMS tool where the video’s get uploaded.

hello energy uses the information you provide on this form to get in contact with you.
By checking, you give us permission to do so. You agree with our general terms and privacy statement.

One or more fields have an error. Please check and try again.

hello energy is a registered trademark.