Animations Flash pour le site d’Isabelle Lépinay

J’ai profité de l’occasion d’une mise à jour du site pour dynamiser deux pages au moyen de nouvelles animations. Comme toujours, plutôt que de récupérer des codes sur internet, je crée ces animations intégralement afin de garantir leur originalité : mon commanditaire est assuré d’avoir une création sur mesure, et qu’on ne verra nulle part ailleurs sur le web.

La page d’accueil (www.isabelle-lepinay.com), totalement refondue graphiquement, présente désormais deux animations : l’une, discrète, agrémente le nom « Lépinay » d’un effet vaporeux élégant. L’autre anime le menu, d’une façon originale : lorsqu’on place la souris sur l’un des trois liens, les deux autres glissent vers la droite, se mettant en retrait derrière l’accordéon. Les observateurs remarqueront l’effet d’animation rotatif discret des puces, qui apporte une touche de sophistication au menu.

Page d’accueil du site

La page orchestre (www.isabelle-lepinay.com/orchestre.html) est tout entière une animation : lorsqu’on arrive sur la page, une introduction présente le logo de façon animée, éclairant sa signification (j’ai déjà parlé ici de la création du logo, voir l’article correspondant).

Une fois l’animation introductive terminée, un effet de transition original fait apparaître la page orchestre. L’effet de transition est bien sûr lui aussi une création, je l’ai conçu en partant de l’idée des boutons accordéon associée à celle d’une boule à facettes.

Page Orchestre avec logo animé en introduction
et effet de transition personnalisé vers la page

Pour que l’expérience du visiteur soit la plus fluide possible, j’ai codé la page pour gérer au mieux la situation quelle que soit la vitesse de connexion. Ainsi, pendant que l’introduction (animation du logo) s’exécute, la page se charge. Lorsque l’introduction est finie, si le chargement de la page l’est aussi l’effet de transition commence immédiatement. Si le chargement n’est pas tout à fait fini, un message d’attente s’affiche et l’effet de transition est suspendu, pour ne démarrer qu’une fois le chargement terminé.

La partie la plus riche du site reste la section « L’accordéoniste » : pratiquement chaque page présente une animation originale.

Publicité

Logo de l’association CAOA

Avant de « relooker » son site internet, l’association des conservateurs des antiquités et objets d’art de France m’avait chargé de refondre son logo. Le voici (en fin d’article, vous pourrez découvrir quelques-uns des projets réalisés dans le cadre de mes recherches préalables) :

L’image du travail du conservateur, fortement associée au passé, est en complet décalage avec la réalité de ses missions, sous-tendues par deux objectifs : mettre en valeur pour aujourd’hui et préserver pour demain.

Traduire visuellement cette orientation vers l’avenir a donc été l’une des préoccupations majeures qui ont présidé aux recherches pour le nouveau logotype.

La forme rouge qui traverse le « O » synthétise, en un dessin unique, deux signes graphiques distincts :

• la  coche, celle que l’on utilise pour faire une sélection dans une liste d’éléments ou pour marquer une étape franchie, un travail fait ;

• la flèche ; elle est tournée vers la droite, qui pour les occidentaux est le sens de lecture et évoque donc intuitivement le futur.

En synthétisant ces deux signes graphiques (la coche et la flèche), cette forme rouge en évoque un troisième :
le rebond.

On peut définir le rebond comme étant ce qui fait succéder à une chute une nouvelle ascension.

On trouve là un symbole assez parlant de ce que fait très souvent le conservateur : mettre fin à une période de dégradation d’un patrimoine, de détérioration, ou simplement d’oubli, et lui donner un nouvel avenir, en un sens un nouvel élan.

Le moment clé de ce changement de direction, l’endroit du rebond, est bien le geste du recensement, de l’inscription, de la mise en place de la protection, de la restauration, geste qui est symbolisé par le « O » en forme de cercle tracé à la main.

Pour finir, comme annoncé, voici quelques exemples de recherches préalables :

Logo pour l’orchestre d’Isabelle Lépinay

Logo pour l’orchestre variété / musette d’Isabelle Lépinay. Version finale en couleurs.

Ci-dessous, sélection des recherches préliminaires, réalisées en monochrome.

Le cahier des charges imposait que les recherches se limitent à un jeu sur les initiales de l’orchestre (les trois, O I et L, ou seulement certaines) avec peu de couleurs et un graphisme assez simple pour être découpé en pochoir (nécessité d’autoriser une version en gobo).

Les recherches montrées ici sont une sélection parmi la première étape de recherche, celle de la forme du logo ; une fois cette forme choisie par le client, ont suivi des recherches plus spécifiques sur la palette de couleurs, puis sur la mise en forme du texte.

Ce logo a été animé pour le site que j’ai réalisé pour l’artiste. Cette version animée (en Flash) est visible à http://www.isabelle-lepinay.com/orchestre.html. Je présenterai ce travail ici dans un article prochain.