fubiz logo animation motion design 2D hand-drawn typographic experiment loaders

fubiz

logo animations

 

For its 10th anniversary, Fubiz Media has completely redesigned its new version of its site to make reading and browsing more enjoyable. The content and the website become interactive and animated with each load. The logo comes alive according to the navigation.

The animation of a logotype is a common practice in the identity of a brand and in the design of a site. Useful on all digital media, it takes its meaning when it intervenes in the understanding of the logo and services offered. This animation always benefits from a theme specific to the organization. It also applies to related items such as the loader, introductions, and TV visual identity.

In the context of a typographic logotype system the addition of concrete elements has no interest and encloses the animation. Within the Mattrunks studio my work focused on the general categories of the site and their abstract symbolism.

 
 
 
white_02.png
 
 

Project realized within the Mattrunks Studio for fubiz

Soundtrack: SILK ~ Body-san Hotspot (She My WiFi)

Art Direction ~ storyboarding ~ animation: Thomas CHARIER

ANIMATION ~ BRANDING ~ Concept ~ MOTION DESIGN ~ TYPO ~ 2D

PARIS ~ 2015

 
 
white_banniere_01.png
 
 

01

Fubiz Media is a platform of discovery and news design covering all areas of applications. Graphic design, architecture, object design, photography, video, and new technologies. It is above all the quest for aesthetics and innovation. An anthology of the best works of artists, agencies and brands.

This aggregator of inspiration has an important place on the international and French design scene. The agency, Fubiz studio, is not only focused on the blog. It organizes every year the fubiz talks and steps in the collaboration of the artists, personalities and actors of the design scene.

 
  • ~ your daily dose of inspiration. ~

 
 

02

The editorial line of fubiz media is to highlight the originality and ingenuity of works. Graphics, design and video are usually illustrated with figurative icons. They leave no room for interpretation.

The fields of design are so vast that it is inappropriate to enclose a category in a stereotype icon. The abstraction of the animations allows a free exploitation, more general, while preserving a unique identity.

 
fubiz logo animation motion design 2D hand-drawn typographic loop graphic
 
 
 

The graphic system is organized around a loop process always bringing back the identity of fubiz. Fluid animations symbolize the cultural flow, the complexity of a strategy and the ephemeral aspect of creative thinking.

They transform the letters, the existing, to metamorphose into an abstract concept and finally redefine the initial logo, the final idea.

 
 
 

The rectangular format of the medium and its small size complicates the reading of the information. The silhouette of the animation and the simplification of the forms constitute an ideal graphic solution for this problematic.

The initial logo is a solid white. The color palette is limited to 3 shades of gray for depth management. It makes the animation readable on all media and background, in all sizes, and remains available in all colors.

 
 
 
 
grey_01.png
 
 

03

The cutting of the action was inspired by the concept of pose to pose. This practice is major in the design of a traditional animation.

The key moments are drawn and an interval of images are attributed to them. The timing is reflected upstream limiting the number of movement in a given period.

Each animation is based on the same loop principle. The original logo transforms partially or completely and then returns to its original shape.

 
 
 

04

The letters disappear, from an entire block or individually, to make room for geometric or organic forms. These shapes come alive around the remaining letters, causing collisions and juxtaposition of flat areas.

The movement dissipates and triggers the sudden appearance of the missing letters. The velocity is preserved during the introductory and the end of animation primers, the transitions are natural and fluid.

 
 
 
 
orange_02.png
 
 

05

All animations are hand-crafted frame by frame. This approach allows to animate fluids and optical illusions with a unique artistic direction.

The implementation of a vector workflow makes it possible to preserve the details during the declensions of the formats and to preserve intact the original logo.

 
 
 
 

~

This concept of animation appeared to me in the middle of a brainstorming session over a cup of coffee. The observation of fluid dynamics and the symbolism of coffee in the designer's routine led to this idea of mixing.

The abstraction of our environment triggers creative reactions that only seek to be exploited.

white_fff_01.png
white_banniere_01.png