Making animation

Let's talk about how we at Dodo use motion design. You’ll find the principles we follow, examples of animation, and technical tips and tricks in this guide.

Dodo used to rely substantially on animated content: we animated banners and visuals in social networks, posted gifs and animated videos. Now the focus has changed: we strive to create the most lifelike content possible. We make footage that looks as natural as it could be, show realistic situations and actual pizzeria guests.

We have gone low-key with motion design, for example, we can be happy with just adding pop-up bars to video to highlight information about discounts or combo elements. Animation used to be the main tool for creating content, now it has become a secondary one.

We have completely shied away from using animation in social networks: we only publish lifestyle content there, and do not overload visuals with design. Advertising banners with flying pizzas are not for us either. We use animation moderately and only when it totally makes sense.

Here’s when motion design is relevant:

Pack shots. Highlight key information: discounted products, promo codes, product names and other significant details of the offer.

Pizzeria interior design. We animate layouts on TV boards, TV menus and tickers. This helps to draw visitors' attention to ongoing offers, special promotions and menus.

Outdoor digital panels. We catch the eye of passers-by and broadcast promotional messages. Animated elements and effects make advertising more vivid and noticeable in the urban environment.

App. Animate interface elements. Make pop-up windows, visualize ordering and delivery processes, animate games in the application to improve user experience.

Visual elements for animation are prepared by graphic designers, while texts – by copywriters. Motion designers animate the finished composition. Therefore, in this section we will not dwell on fonts, colours and tonality of texts. Let's talk about the criteria that should the completed animated item meet:

Brand consistency. Translate the ultimate Dodo mood: make the animation "playful". This can be achieved through the help of dynamic motions.

Smoothness. Use velocity curves to create natural looking and smooth transitions between different states of the elements. Make it dynamic, but avoid too abrupt and disorderly movements that can confuse the audience.

Visualization of speed curve settings

Functionality. We make animation only when it carries a semantic background and helps to convey key messages, highlight important information, and show what cannot be conveyed with live shots. We don't add meaningless flairs: highlights, bubbles, vibrations or icon circling.

We gathered information about the parameters of animated videos for different platforms.

ResolutionFPSBitrateCodecDuration, sAudio track
Video for social networks
1920х10803010 MbpsH.26415 yes
1080х19203010 MbpsH.26415 yes
1080х13503010 MbpsH.26415 yes
1080х10803010 MbpsH.26415 yes
1080х6073010 MbpsH.26415 yes
1920х10803010 MbpsH.2646 yes
1080х19203010 MbpsH.2646 yes
1080х13503010 MbpsH.2646 yes
1080х10803010 MbpsH.2646 yes
1080х6073010 MbpsH.2646 yes
Video for media panels
1920х1080305 MbpsH.26410 no
Video for the Drinkit app
1086х18523010 KbpsH.2648 no
Video for Dodo Pizza app
1350х2084307H.2645 no