[Dossier] La tendance du Gif animé dans le Webdesign

Les gifs animés sont des petites images animées. C’est peut-être très bête de commencer comme cela cet article mais il est important de rappeler que les formats d’images sont souvent inconnus et mal maîtrisés pour des personnes qui ne sont pas dans le milieu du web.

Les gifs animés ont bercé les débuts du web et étaient utilisés à profusion. Avec ses 256 couleurs, alors qu’à l’époque les écrans avaient 16 millions de couleurs, ou moins, le gif animé était le plus souvent utilisé pour créer des mini-animations « grotesques » en guise d’habillage de site web. Je le dis assez souvent d’ailleurs aux clients me demandant un site « qui bouge ». Sur le ton de l’humour,  je leur réponds : « Un site avec des poneys qui courent sur un arc-en-ciel?  »

Le Gifs a donc eut ses moments de gloire dans les années 1995  puis a été abandonné au d’un changement dans les interfaces web et les designs qui lui sont attachés.

Le gifs animé, une tendance à différents niveaux :

Depuis que je veille sur la toile, nous avons vu apparaitre depuis 3/4 ans le retour en force des gifs dans le webdesign. Auparavant, les gifs permettaient d’alimenter des « skyblog » et autres sites « poubelles ». Par la suite, les gifs animés ont été intégrés à des logiciels de messagerie du type « msn messenger » et son engouement des « émo-icones ».

Avec la montée en puissance de Tumblr et plus récemment le support des gifs dans les posts de Google +, un vrai engouement des gifs animés est appraru.

Pour la plupart des cas, aujourd’hui, les gifs sont utilisés pour exprimer des émotions en quelques secondes. On le voit par exemple dans le projet Gifgif de l’institut MIT (Institut de technologie du Massachusetts) qui a souhaité créer un langage universel basé sur les communications non-verbales.

Il est aussi aujourd’hui utilisé pour animer des photos dites « basiques » pour leur donner un côté infini. Vous pouvez voir de très beaux exemples dans la série Cinemagraphs ou encore les travaux de Fong Qi Wei.

Ils sont populaires par leur côté très court, légers et décalés. Ils peuvent mettre en mouvement la frustration qu’avaient les internautes avec les images. On le sait, notre oeil est toujours plus attiré par une animation que par une image statique.

Le Gifs animé dans le Web de 2014 et après.

Dans un web qui change perpétuellement, la montée des technologies nous apporte que très peu de limites. Ce Web est de plus en plus « animé/interactif » (dans le bon sens du terme) et le gif animé est une des alternatives intéressantes. Plus légère qu’une vidéo en temps de chargement,  256 couleurs qui suffisent à du maquetage ou un design  « Métro/Flat », son côté perpétuel sans aucun bouton d’action, c’est cela qui lui apporte aujourd’hui un nouveau souffle.

Il est d’autant plus intéressant qu’il est compatible sur tous les PC/Mac du monde. Non, je ne vais pas vous parler du retour du symbole clignotant « NEW » aux couleurs arc-en-couleur ou encore le signe « en construction » que l’on voyait sur les sites en création. Je vais plutôt vous montrer qu’aujourd’hui, nous pouvons l’utiliser à bon escient.

Le gif dans l’emailing : grâce à son poids léger, vous allez pouvoir l’inclure dans les intégrations et créer, par exemple, une mini-vidéo qui va attirer l’oeil et déclencher le clic. (sauf Outlook qui ne prend que la première image). Il pourra aussi animer une petite flèche du « Call to action »

Le gif dans la présentation d’application (mockup) : Si vous avez un compte sur Dribbble ou que vous y allez régulièrement, vous avez surement vu plusieurs fois des petites animations pour présenter le concept d’une application. Cela permet de montrer la navigation en quelques secondes ou encore un effet de menu.

Speedcam-app-animation

Life minimal app

weather-rebound

neige

map

Le gif dans le motion design : Le motion design est souvent utilisé pour une séquence vidéo très courte. C’est plus léger qu’une vidéo et l’effet est le même.

motion

café

Le gif dans le blogging : Si vous suivez Olybop, je m’efforce de mettre, quand c’est d’actualité, une miniature d’article animé. Grâce à elle, vous pouvez voir plus facilement le contenu, cela attire votre oeil et apporte un animation du site qui n’est pas négligeable. Suivant les sujets, cela vous permet aussi, de montrer un concept, une idée en quelques secondes sans avoir à charger une vidéo.

Le gif dans le Webdesign : Avec les CSS3, il est largement possible de créer des effets absolument superbe d’animations simples et légères qui donnent, si elles sont bien faites, une réelle valeur ajoutée (exemple du petit oiseau en header du blog qui a été réalisé à la base en gif puis animé en sprites CSS). Cependant, il y a des moments où on ne peut pas utiliser cette technique et qu’un gif peut remplacer cela d’une façon qualitative. Vous pouvez les voir sur les sites ci-dessous.

http://thenewdesignguidelines.derekevanharms.com/

http://speedtexting.net/

effet menu

Animated GIFs: The Birth of a Medium

Je vous invite, pour finir à regarder ce reportage sur le Gif animé, la naissance d’un support .

[youtube]http://youtu.be/vuxKb5mxM8g[/youtube]

Voilà, le retour du Gifs est là, utilisé avec délicatesse, il apporte une vraie valeur ajoutée et permet de montrer des choses que l’on ne pouvait pas faire avec une simple image. C’est une sorte d’image améliorée. Oubliez bien sûr les gifs d’antan aux couleurs flashy et aux contenus pauvres.

Ce dossier est le reflet de mon unique expérience et n’engage que moi. Je le partage avec vous et l’objectif est de lancer le débat, la réflexion dans la joie et la bonne humeur. Et vous, l’utilisez-vous ? Etes-vous sensible et/ou l’avez vous remarqué ?