FlotFrance
Le conteneur que l’on suit partout >.>

Dans le cadre de la refonte de son identité, j’ai travaillé avec Djibz sur la charte graphique et l’animation du début du site vitrine.
Véritable défi, nous avons poussé dans ses retranchements Illustrator et Phototshop. Je vais ici vous présenter le projet et le workflow.

Client

FlotGroup

Services

UI / UX
Intégration WordPress
Développement WordPress
Animation complexe jQuery

Le concept

FlotFrance est une société de Freight Forwarding. C’est à dire qu’elle s’occupe d’acheminer d’un point A à un point B des conteneurs, que ce soit par la mer, la terre ou les airs.
Afin d’illustrer son activité, nous avons pris le parti de représenter en vue zénithale un conteneur et de le suivre dans un voyage à travers le monde.

Modularité

Chaque illustration est pensée pour être modulaire. Les éléments sont designés à part pour ensuite créer des scènes.

Grace à cette modularité, les thématiques abordées sont infinies et le message peut évoluer.

L’animation

Le principe de l’animation est simple. Nous suivons le voyage d’un conteneur à travers le monde. C’est l’internaute, en scrollant, qui décide de la vitesse de celle-ci.
Voilà un aperçu vidéo de ce que cela donne :

Le process de travail

Avec ce projet, nous avons poussés dans leur retranchement Illustrator et Photoshop. Avec Djibz, avons du adapter notre process aux contraintes logicielles et matérielles.

Tout d’abord, l’ensemble de l’animation devait se trouver dans un zone carrée, le plan de travail maximal vectoriel permis par Adobe. Pour cela, j’ai tout d’abord intégré une démo test, pour sortir le tracé du conteneur.

Découpage photoshop

Photoshop était incapable de produire des fichiers .jpg d’une taille suffisamment grande pour englober toute l’animation. J’ai donc du découper le plan de travail en 144 zones identiques.

Suite à ça, j’ai utilisé le bon vieil outil découpage pour automatiser l’export avec optimisation.

Système de trois calques

L’animation comporte trois calques :

l’image de fond en .jpg,
un fichier .png transparent avec les éléments qui passent au-dessus du conteneur,
un dernier calque, qui sera lui exporté en différents .svg, avec les éléments d’interaction (camion, tanker, avion, …)

Les pictogrammes

J’ai du créer des icônes pour l’ensemble des supports. Étant donné la taille et l’évolution de FlotFrance, il a fallut créer un système pour que d’autres graphistes puissent venir complété la bobliothèque déjà existante.

La première étape a été de créer une grille de 26 par 26 unités.

La zone de sécurité fait 4 unités.

La zone idéale de design de 14 unités s’inscrit dans un cercle de 20 unités.