Démonstration par l'exemple de la richesse de ce format devenu grand.

Le gif animé qui offrait les petites icônes en mouvement du début du web a bien grandi. Sa popularité ne cesse de croître auprès des jeunes qui en font comme ils photographient.

Le principe repose sur une animation de quelques images répétées en boucle. C'est un format de compression de l'image, le gif (Graphics Interchange Format), et l'automatisation de la technique d'animation par le logiciel Image Ready qui ont permis la diffusion de cet effet sur le web.

D'abord cantonnées à des détournements d'extraits audiovisuels (les nombreux memes du lancé de chaussures sur George Bush restent un exemple type), les possibilités du format ont vite éveillé la créativité artistique. Le savoir-faire qui s'est développé fait aujourd'hui du gif animé un outil de communication à part entière.

Le gif animé a l'avantage d'être un visuel qui se fait remarquer, mais sa réussite repose sur des exigences : sur la forme, la beauté graphique et un rythme cohérent ; sur le fond, une exploitation justifiée de la répétition. Les effets les plus réussis savent parfaitement exploiter ces contraintes.

La classification ci-dessous propose des exemples de gifs animés en fonction des possibles exploitations éditoriales.

Illustration

Le New York Times a officialisé le format en l'utilisant en tête d'articles. Pour deux chroniques, l'illustratrice Rebecca Mock a été choisie : l'abandon des commerces ne trouvant pas de repreneur à la suite de la crise pour le premier ; la difficile communication entre les êtres à l'occasion d'un voyage en train pour le deuxième.

Les effets animés, balancement de l'enseigne et clignotement de la main rouge pour l'un, défilement du paysage pour l'autre, intriguent et résument à la fois. Ils racontent déjà visuellement. A noter, les subtilités possibles : la discrétion du premier, dans l’esprit du cinemagraph, plus élégant mais obligeant à une illustration dont la qualité doit au préalable attirer l'oeil, contre le défilement incontournable du second.

Site : Main Street Blues - NYTimes.com | The Quiet Ones - NYTimes.com.

Site de l'illustratrice: Rebecca Mock.

Humour

Court effet comique pour histoire sans texte. Ici, Christoph Niemann illustrant son article dans le New Yorker sur ses difficultés à rendre ses dessins interactifs pour la réalisation d'une application Ipad. Le gif apporte donc un format supplémentaire aux dessins humoristiques. Reste la question du choix : dialogue ou pas, espace autorisé, pertinence du fixe ou de l'animé.

Site : The Story of Christoph Niemann's Petting Zoo App - The New Yorker.

BD

En toute logique, l'animation de certaines vignettes dans une planche de BD. L'humour est remplacé par la démonstration : ci-dessous, l'animation des différents mouvements de puces. L'enjeu ici est la scénarisation : l'effet doit raviver l'intérêt et l'investissement avec des animations qui racontent et éviter la distraction visuelle gratuite.

Site : The Museum of Copulatory Organs.

Planche animée

La démonstration repose sur plusieurs gifs animés exposant les différents aspects d'un ensemble. L'exercice est difficile : il faut éviter la confusion visuelle causée par les mouvements multiples et chaque animation doit pouvoir résumer en quelques images. Mais le résultat peut constituer un visuel extrêmement révélateur, comme ci-dessous, celle d'un cinéaste, avec en prime un jeu de devinettes (reconnaissance des films).

Site : undeadcritic.tumblr.com.

La démonstration peut aussi relever de la traditionnelle bande-annonce. Ici, quatre gifs construit à partir de la très belle animation de 1mn 30 réalisée par l'illustrateur Noah Fisher et le peintre Zach Johnson pour une interprétation graphique du film Looper. Le gif animé a fait la promotion du film et de l’animation, visible sur Itunes Movie Trailer et intégrée comme bonus dans le dvd du film.

Site : loopermovie.tumblr.com.

Définition

Illustration visuelle immédiate ou incitation à lire, requérant la connexion entre le visuel et le sens du mot : l'abstraction ou le second degré risque la non-compréhension et le rejet.

Site : visual-poetry.tumblr.com

Site : vicforprez.tumblr.com.

Citation

Le texte s'ajoute en surimpression sur une animation qui renforce le propos. Aussi populaire que la simple citation, l'inspiration est sans limites, de la visée poétique à une finalité plus militante. Elle suppose un effet esthétiquement réussi et une illustration interprétable de la phrase.

J'ai tant à dire, mais personne pour écouter

Site : ruoloc.tumblr.com

Chacun brille à sa manière

Site : noone-but-you.tumblr.com.

Je fermerai les yeux et rêverai des jours où je n'étais pas si seul

Site : sheandherdarkness.tumblr.com.

Contemplation et cinemagraph

La boucle de la répétition magnifie la beauté du monde. La qualité esthétique est impérative. La photographie de la nature ou de décors a ici une place de choix. Le parallèle avec le plan fixe de cinéma explique le terme cinemagraph pour qualifier l'effet. L'impact réside dans la fascination à regarder ce qui doit être admiré, protégé ou promu selon l'objectif recherché. En d'autres termes, un bon gif animé vaut mieux que de longs discours.

Site : inspirationlane.tumblr.com.

Site : justgifs.tumblr.com.

Publicité

Chacun type de gif peut faire l'objet d'un pavé publicitaire dès lors qu'une incitation à cliquer est intégrée et une accroche textuelle ajoutée aux seuls visuels. Travailler les subtilités du gif animé améliore la chance d'être sorti du lot des animations commerciales, facilement rejetées comme « pub ».

12 exemples d'exploitation géographique, historique et journalistique de parcours interactifs.

L'utilisation du trajet pour raconter est une entrée en matière attendue pour le voyage. Les possibilités d'une exploitation interactive autorise une application plus large : le fil narratif que constitue naturellement le début et la fin d'un parcours impose l'approche synthétique et le suspens. Petit florilège d'exemples géographiques, historiques, journalistiques et hors-norme.

Trajet et voyage

Le trajet du voyage organisé par la marque de bière Corona pour 7 personnes d'une région reculée de Chine pour leur permettre de découvrir la mer. Une visionneuse expose les vignettes d'accès aux photos ou vidéos des étapes du voyage. Un trajet basé davantage sur la montée de l'émotion des participants que sur la découverte des lieux.

Site : Corona China.

Un documentaire sur Zurich organisé à partir de la progression d'une rue principale de la ville. L'avancée, de jour ou de nuit, affiche des bulles révélant un sujet comprenant une visite panoramique de la boutique et les interviews des commerçants ou gens du quartier. La rue manque de panache, mais l'incitation est porteuse.

Site : SF Dok - 360° Langstrasse Zürich.

Trajet improbable que celui menant à la découverte de territoires vus du hublot d'un avion de ligne. C'est pourtant cet imaginaire qui est retenu ici par l'entremise de 18 trajets de vols. Chaque étape du vol retenu est l'occasion de découvrir des photos du territoire, et son activité, à hauteur de 15 à 10 000 mètres, de 5 000 à 1 000 mètres et enfin à hauteur d'homme.

Site : Hidden Journeys: explore the world from the air, RGS-IBG.

Un traitement assez répandu, le parallèle entre le carnet de voyage et le parcours suivi. Ici, la division de l'écran établit une transposition entre le récit (incluant un diaporama de photos) et la localisation géographique du trajet via Google Map. La descente du curseur fait défiler et coïncider récit et positionnement des lieux sur la carte, accessible en plusieurs vues.

Site : Tekuteku Thaïlande, Tourism Authority of Thailand.

Trajet et histoire

L'infographie d'une rue connue pour sa mauvaise réputation dans la banlieue de Chicago est le prétexte pour découvrir les changements opérés au fil des années, au gré des symboles dispersés le long du trajet.

Site : Sin Strip in Calumet City, nwi.com.

La chasse à l'homme entreprise pour retrouver John Wilkes Booth, l'assassin du président américain Abraham Lincoln. Les lieux clés des 8 jours de la poursuite (du 6 au 14 avril 1865) sont l'occasion d'un retour sur les acteurs et le contexte historique de l'assassinat.

Site : Booth: The Final Days, History.com.

Le trajet du Freedom Ride (voyage de la liberté) de mai 1961 pour supprimer la ségrégation raciale dans les bus du sud des États-Unis. Les villes du parcours sont l'occasion d'un rappel des faits et de l'extrême violence à laquelle les étudiant ont été confrontés. Elles donnent accès à des informations pour fouiller davantage cet épisode du mouvement américain des Droits civiques.

Site : Freedom Riders, American experience, PBS.

Trajets célèbres regroupés dans une carte schématisée. Une vingtaine de parcours (explorateurs principalement, mais aussi des personnalités, comme ci-dessous les étapes du livre On The Road de Jack Kerouac) propose une progression du voyage avec des étapes enrichies d'un descriptif au survol.

Site : Wanderlust: GOOD traces the most famous trips in history.

Trajet et journalisme

Trajet à défiler pour cette photo aérienne de l'effondrement du pont le plus important de la ville de Minneapolis (USA) le matin du 1 août 2007. Chaque numéro fait référence à l'un des acteurs du drame (13 tués et 145 blessés) avec des faits ou des témoignages recueillis par le journal.

Site : 13 seconds in August: The 35W bridge collapse, StarTribune.com

Un trajet reconstituant les faits d'une agression : le diaporama propose les déplacements successifs des protagonistes selon le témoignage de la victime.

Site : Strauss-Khan: What the Housekeeper Told Police, NYTimes.com.

Les enjeux économiques et environnementaux de la construction d'une autoroute entre le Brésil et le Pérou. La descente de la route souligne la problématique et dessine les 4 sujets du reportage (avec un diaporama et un commentaire sonore).

Site : Traveling Down The Amazon Road, NPR.

Les événements ayant conduit à la mort de Ian Tomlinson lors de la manifestation londonienne anti-G20 (1 avril 2009). Des vidéos amateurs de témoins obtenues par le journal sont intégrées dans une reconstitution du parcours de la victime (rouge) et du policier (bleu). Un trajet qui éclaire sans contestation possible les faits et le poids de la participation citoyenne dans l'établissement de la vérité.

Site : Ian Tomlinson's last minutes: the video footage mapped, The Guardian.

Trajet hors-norme

Sport et voyage "en un" pour marathons américains : le circuit peut être pratiqué par l'internaute via la carte Google du trajet et l'affichage en parallèle du visuel panoramique dans Street View. Un comme si vous y étiez sans l'effort physique et la compétition.

Site : Going the Distance: Comparing Marathons, Wall Street Journal.

Lecture d'un roman à partir du suivi cartographique du parcours du héros. La progression des chapitres du récit s'opère à la lecture des bulles du marqueur, qui déclenche en parallèle des déplacements sur les cartes combinées de Google. Le texte est court, les animations du tracé intriguent. Bien qu'un peu trop long, un récit interactif (très audacieux pour l'époque de sa mise en ligne) qui n'est pas sans débouchés.

Site : 'The 21 Steps' by Charles Cumming, We Tell Stories, Penguin.

Quand l'interaction instaure une proximité dérangeante pour mieux sensibiliser.

Loin du discours moralisateur ou de l'image choc paralysante, la démonstration interactive évite l'écueil du sermon et de l'émotion paralysante. Trois sites illustrent l'impact de la découverte ludique pour sensibiliser aux risques de la prise de substances dangereuses. Les mises en scène s'appuient sur des effets qui éveillent une identification de l'internaute. Sans même s'en rendre compte, le temps de la découverte transmet un message que d'autres supports n'auraient pas pu communiquer.

Try Drugs

Le site était très audacieux pour l'époque (2007), une audace saluée par plusieurs prix. L'objectif recherché était de produire à l'écran les effets d'une personne sous l'emprise d'une drogue.

Le résultat propose un écran aux effets visuels qui décalent, ralentissent et dédoublent le curseur et les boutons. Une ambiance sonore (musique déformée, snifs de lignes de cocaïne) et des flashs complètent la mise en scène.

S'ajoute la peur qui s'installe au surgissement de messages d'alerte laissant supposer que le visiteur est en train de déclencher une surveillance policière (l'aspect fiction est d'ailleurs préciser à la fin pour rassurer).

Des effets qui reproduisent les conséquences de la perte de contrôle (ici sur la machine qui répond mal) et de ses conséquences (risques illégaux), réalisés pour le département de la santé de la municipalité d'Oslo.

Site : Try Drugs

Byturen

Cette vidéo interactive présente une double histoire grâce à l'effet du survol. Un jeune homme et une jeune femme, qui passent une soirée dans une boîte de nuit, sont visibles dans un état décent à la vision du film et dans un état trop alcoolisé au passage du curseur.

Trois contextes différents révèlent ainsi les deux protagonistes dans un « tu t'es vu quand t'as trop bu », que l'opposition avec l'état normal accentue d'autant plus.

La vidéo interactive n'est plus en ligne, mais une vidéo montrant les effets du survol est visible sur une chaîne Youtube. Une seconde vidéo propose un parallèle entre les deux situations avec un écran partagé. La vision des deux permet de comparer le moindre impact du parallèle des scènes par rapport à la découverte d'un caché indécent qui sommeille.

Cette campagne visait à faire connaître une compagnie de bus nocturnes de Copenhague. Le « Rentrer avant que vous ne soyez même plus en état de prendre le bus » milite aussi contre les méfaits du trop d'alcool. Une démonstration qui a attiré des millions de visiteurs.

Site : Chaîne de Byturen.com

Meth Project

Plus traditionnel dans son approche, ce site propose une dizaine de réponses approfondies aux questions que peut soulever la prise de méthamphétamine. En plus de vidéos de témoignages et de journaux intimes graphiques, des mises en scène interactives exposent les effets de la méthamphétamine d'une manière saisissante.

Ainsi des effets sur le physique, avec une correspondance à trouver de visages d'avant et d'après prise de la drogue, avant de déterminer le temps nécessaire pour causer les ravages.

De l'impact sur le cerveau, qui propose de comparer les effets de la drogue par rapport à d'autres états d'excitation.

Du lancement du dé, pour laisser le sort afficher le nombre de risques de détériorations physiques encourues.

Ou encore du jeu de force de la fête foraine comme parallèle pour le toujours plus qui ne suffit plus.

Ce programme de prévention est dû à un homme d'affaires américain, Thomas M. Siebel, en réaction à l'augmentation de l'usage de cette drogue aux USA.

Site : Meth Project

Un traitement interactif du récit de l'observation animale dans un parc naturel est l'occasion d'une expérience de la surveillance pour l'internaute.

Une courte vidéo montre un ours attrapé et endormi par des hommes qui lui posent un collier et un marqueur. L'animal est relâché, mais il est maintenant le Bear 71 (l'ours 71). Cette Grizzly femelle de 3 ans fait désormais partie du groupe d'expérimentation du parc national de Banff, situé dans les rocheuses canadiennes, qui étudie les interactions entre la nature et la présence humaine. L'expérience a duré 9 ans.

Ainsi commence l'étonnant web-documentaire Bear 71. Loin du film découpé en chapitres accessibles via une interface plus ou moins agencée, ce sont des rushes vidéos d'observation sur plusieurs années qui ont été rassemblées. Ils sont dispersés dans une carte interactive schématisée, dont les symboles animés racontent la vie dans le parc et l'histoire de cette ourse sous observation technologique et devant éviter les dangers humains. Jusqu'à sa faute fatale.

A travers la voix d'une actrice, Bear 71 nous raconte à la première personne des moments de sa vie, un anthropomorphisme qui conditionne rapidement l'attachement. Le récit sonore autorise dès lors le regard du visiteur à se porter librement sur la carte. Celle-ci n'est qu'une représentation grossière de la toponymie du lieu. Ce n'est pas la beauté d'un paysage qui est ici en jeu, mais la surveillance d'allées et venues par l'entremise de marqueurs identifiant les objets d'observation. Avec, en premier lieu, celui de l'Ours 71 dont les déplacements sont figurés par des cercles gris.

Il est possible de suivre le marqueur de l'ourse au gré de son récit : lorsqu'elle raconte comment les ours tentent de manger les graines échappées des wagons en évitant de se faire écraser, le visiteur voit passer un train sous forme pixelisée à côté du marqueur. Mais l'internaute est aussi libre d'explorer la carte à volonté, l'Ours 71 étant rattrapable par une flèche toujours accessible.

Les autres marqueurs proposent des rushes d'observations divers : des lieux dont la dangerosité mérite une observation (train ou route), mais surtout d'autres animaux également sous surveillance. Les courtes vidéos sont complétées d'informations qui selon l'espèce dévoilent une habitude de l'animal, sa raréfaction au fil du temps, ou sa mort, comme ici le loup 14 tué sur une autoroute à 3 ans.

Mais la surveillance ne s'arrête pas là. Notre présence est également signalée sur la carte (selon l'accès donné à la webcam, une photo apparaît ou non) et les marqueurs des visiteurs s'immiscent dans la carte aux mêmes titres que les autres.

Là est la force du projet : dans cette omniprésence de l'observation tout au long de l'histoire qui développe une mise en relation étonnante avec le sort des animaux et nourrit notre sympathie pour ce qu'ils ont à subir. Là est la réussite du projet : en instaurant un récit qui met en scène cette technologie même. La division de l'écran final intégrant un certain nombre de lieux d'observation du parc n'est pas sans rappeler celle des multiples écrans surveillant nos lieux de vie de tous les jours.

Une vingtaine de minutes d'un récit qui soulève un questionnement sur un monde de technologies et de cloisonnements instauré au nom d'une préservation peut-être nécessaire, mais qui pourtant dénature. « Il n'y a pas beaucoup de façons de mourir pour un grizzly. Du moins, c'était le cas dans l'état sauvage. » annonce le web-documentaire. Notre Ourse 71 est victime d'une erreur qui n'aurait pas dû être. Son « J'ai fait ce que je savais faire. J'ai rugi et j'ai chargé » reste.

Ce web-documentaire de Jeremy Mendes et Leanne Allison est produit par l'Office national du film du Canada, toujours exemplaire en matière de productions interactives.

Le site : NFB/Interactive - Bear 71.

Un peu plus...

Le parc national de Banff est inscrit au patrimoine mondial de l'UNESCO. Il est l'un des parcs les plus visités du monde. Ce sont les conséquences de l'intensité galopante des activités touristiques qui constituent une menace de plus en plus préoccupante pour l'écosystème du parc.

A noter également le traitement original du tweet promotionnel du projet avec le choix d'un animal du parc qui composera le message : micro-site Bear 71

Une installation a été organisée lors du festival de Sundance durant laquelle les visiteurs accédaient à la carte, intégrée dans des écrans muraux, via des Ipad. Une courte présentation est proposée dans cette vidéo.

Quatre jeux exploitent le principe ludique pour distraire autrement avec un vrai travail d'auteur.

A côté des jeux traditionnels basés sur une victoire à atteindre, d'autres jeux exploitent le principe ludique en vue d'offrir simplement un ailleurs. Ils reposent sur un passer le temps fondé sur des règles simples et des effets charmants ou déroutants. Les quatre exemples qui suivent ont connu popularité ou longévité, alors même que leurs créateurs étaient inconnus. Ils manifestent un vrai travail d'auteur et un entre-deux ludo-artistique éloigné des règles commerciales pré-établies.

Le principe a inspiré certaines marques pour vanter leurs produits, et le domaine de la musique avec des clips audacieux (voir : Des clips interactifs à regarder, jouer et écouter). Mais il reste trop rarement exploité et pas assez financièrement aidé pour ce qui est d'un possible moyen d'accéder à la connaissance.

Polcarstva, tableaux à clé

La rescousse d'un groupe d'enfants échappé d'un car est l'occasion de découvrir un univers fantastique.

A coups de clics sur le petit groupe (avancée, montée, dialogue) ou dans le décor, le récit progresse de tableau en tableau. Ici, dans la première scène, la demande à l'ange lui fait s'exclamer un й (l'auteur du site est russe) qui, une fois à terre, doit être tourner et baisser pour permettre au groupe d'avancer.

Au prime abord, les non-initiés de la recherche intuitive dans un décor peuvent être impressionnés. Mais c'est le charme du jeu qui offre en récompense un graphisme rappelant l'illustration du livre pour enfants et des animations très surprenantes dont le sens confine au surréalisme.

Une quête onirique sur la renaissance ou « l'après » qui fait regretter la courte durée (seulement 8 tableaux) et dont il ne faut pas manquer la possibilité de vivre le voyage de nuit.

Site : Polcarstva game, réalisé en 2007 par Denis Stepkin.

Fly Guy, échappée à rencontres

Fly Guy est l'histoire d'un mec qui se prend à rêver qu'il vole alors qu'il attend son bus.

Son envolée évolue au fil de l'utilisation des flèches du clavier. Il y a les rencontres de rêve (sage, charmante dame, enfant, fauteuil) et les traîtresses embûches (photocopieuse, portable) qui opèrent un retour immédiat sur le trottoir de la réalité.

L'espace révèle des rencontres beaucoup plus remuantes pour lesquelles des animations musicales ont la part belle, avant que des poissons augurent d'une suite vers...

Un rêve qui telle une bulle d'air dans une journée de travail s'inspire du graphisme du dessin de presse.

Site : Fly Guy, réalisé en 2006 par Trevor van Meter. L'auteur a persisté sur le principe avec un culotté chat borgne alcoolique devenu célèbre : CrappyCat.

Mitoza, choix d'entre-deux

Logique du récit interactif qui conduit à favoriser une suite sur une autre. Tout commence avec une graine pour laquelle le choix d'un pot de fleur ou d'un oiseau est donné.

C'est au total une quarantaine d'animations qui sont à découvrir pour chaque choix, en revenant toujours à cette petite graine qui est soit plantée soit mangée.

Une démonstration de l'impact du jeu point-and-click pour lequel il est difficile de ne pas aller voir ce qui aurait été si. Une rapidité visuelle qui maintient le rythme, alors que le mordant de certaines révélations surprend et le sens de la chute reste parfois mystérieux.

Ou comment retenir l'attention en jouant de la linéarité narrative avec une succession d'images à animer.

Site : Mitoza, réalisé par Gal Mamalya en 2011.

Il mondo del Fubbs, machine vintage

Appel au théâtre magique avec cette machine à remonter le temps de jeux d'antan.

La descente de la manette de gauche lève le rideau sur un défilement de vignettes qui ouvre une mise en scène à explorer. Fortement inspiré des jeux d'illusionnistes, il faut manipuler les instruments pour jouer. Attention ne pas partir trop vite sans avoir tout tenter : certaines animations révèlent des surprises.

Au total, une douzaine de scénettes est proposée. La mise en scène est accompagnée d'une interactivité sonore et d'un graphisme début XXe siècle qui constituent un attrait incontestable.

Cette boîte à malice qui flaire la nostalgie offre deux autres découvertes très kitsch avec la manette de droite et fête ses 10 ans d'existence !

Site : Il mondo del Fubbs

L'attente du réveillon avec une quinzaine d'exploitations variées du traditionnel calendrier.

Le calendrier de l'Avent compense l'attente du réveillon pour les enfants. Chaque jour, le calendrier à jour-fenêtre révèle sa surprise. Il est propice à une déclinaison interactive, chaque fenêtre pouvant ouvrir vers un ailleurs.

Le principe est l'occasion sur le web de faire sa promotion avec la présentation quotidienne d'un nouveau produit. Parfait pour satisfaire des cibles en quête d'idées, l'imagination est souvent circonscrite à un minimum : un graphisme rappelant plus ou moins Noël, une animation flocons de neige, la phrase amusante de blocage des fenêtres suivantes et le descriptif du produit. Pourtant, le retour quotidien sur un site, moins accessible que le calendrier affiché sur un mur, méritait parfois plus. Il pourrait servir de prétexte à une découverte plus inattendue, offrant même un final à la hauteur du réveillon tant attendu.

Pour le moteur de recherche Bing, une vidéo connotée Noël est le prétexte à vanter l'utilisation du moteur avec un lien vers une page de résultats portant sur un sujet générique. La page d'accueil, quelque peu inspirée d'un autre site (voir plus bas), affiche des animations sonores au survol de certains objets.

Site : The Bing Magical Holiday Calendar

Le principe avait été initié l'année dernière par Google, qui avait proposé 2 jours de mise en ligne d'un Doodle de l'Avent. Le survol de chaque vignette proposait une animation sur une tradition de Noël dans le monde, qui conduisait vers une page de résultats appropriée.

Le logiciel libre n'est pas en reste avec Mozilla et son calendrier sans fioritures et très "techos". Chaque jour affiche un lien vers un article ou une page tutoriel pour les développeurs (webGL, html5, css3, etc).

Site : MDN Holidays calendar

Principe du jour J pour l'obtention d'un gain IRL (in real life). Des soldes sur des vêtements valables un seul jour avec Lands’ End Canvas. Trop tard après, trop tôt avant, le tout avec le support de boules de Noël qui rappellent le sapin et les cadeaux espérés à son pied.

Le principe est repris par Google au Royaume-Uni pour promouvoir Android. Une simple grille impose de revenir à midi à l'une des dates affichées pour découvrir une adresse mystère. L'annonce de l'heureux gagnant de la tablette Android arrête la course. L'application mobile est évidemment conseillée pour favoriser la chance de réussite. Préfiguration de jeu de chasse aux trésors et cache-cache par tous les temps.

Promotion culinaire pour gourmandises festives avec les cookies et une nouvelle recette jusqu'au 24 décembre avec All recipes et My recipes. Le calendrier à recettes est même appliqué à tous les mois de l'année pour ce dernier. La douceur du jour constitue aussi une rubrique spéciale depuis 3 ans pour le journal d'actualité The Star.com.

La presse décline le calendrier de l'Avent pour valoriser ses contenus. Le plus notable dans le genre est The Gardian, qui s'enrichit chaque année de nouvelles adaptations. Son classique calendrier solidaire propose des citations d'enfants démunis, également l'occasion de sponsoriser des associations caritatives avec des liens.

D'autres proposent un retour sur des articles portant sur des livres pour enfants, un tour des événements organisés sur la période ou une exposition sur Noël du club des photographes amateurs du journal. La référence à Noël est toujours graphiquement présente.

La radio n'est pas en reste avec une compilation à l'humour britannique proposé par la BBC. Chaque jour propose d'entendre le court extrait d'un commentaire ou d'un invité ayant marqué ou amusés les auditeurs.

Plus simplement, Fashion, le magazine de mode du Telegraph, propose un pavé mystère intégré dans chaque Une et conduisant vers un article idée-cadeau.

Pour d'autres, le calendrier de l'Avent peut avoir une vertu pédagogique. Datant de l'année dernière, le calendrier de cette association culturelle entre le Royaume-Uni et l'Allemagne fait connaître les traditions germaniques de Noël. Chaque jour est l'occasion d'un quiz, en anglais ou en allemand. Le jeu est poussé jusqu'à la fin avec l'obligation de sortir une lettre des bonnes réponses quotidiennes pour trouver la phrase gagnante. Un graphisme rappelant la couronne d'accueil des portes et qui cache des interactions visuelles et sonores amusantes.

Site : Advent calendar - Think German

Très fidèle au concept imprimé, le décor-calendrier du Musée de Liverpool s'adresse aux enfants pour leur faire découvrir derrière chaque fenêtre ouverte un objet. Une invite à visiter le Musée. L'effet neige est activable à l'envi sur le décor.

Site : Liverpool museums - Advent calendar

Radio à nouveau, avec ce calendrier en ligne depuis plusieurs années et réalisé à l'occasion d'un spécial Bach pour Noël de la BBC. Chaque jour décline l'alphabet dont les lettres sont propices à découvrir une anecdote à partir de l'extrait d'une émission relatant la vie du musicien. Un quiz permet de vérifier l'assimilation du savoir.

Site : BBC - Radio 3 - A Bach Christmas - Advent Calendar

Côté enfants, pour qui le calendrier de l'Avent est à l'origine destiné, le prétexte sert d'accès à la découverte de jeux. Mais la page d'accès est le plus souvent grossière et sans recherches graphiques. Les effets restituant l'esprit Noël des illustrations pour enfants sont rares. Ce simple exemple, fidèle au principe du paysage peu à peu révélé, illustre ce qui pourrait être plus fréquent.

Site : Happy Holidays from Castle Arcana

La NORAD (association américaine dédiée à répondre aux questions des enfants du monde sur le trajet du Père Noël et la préparation des cadeaux), avec son décor animé aux numéros donnant accès aux ateliers à jouer, reste donc une référence.

Site : Village du compte à rebours – NORAD Santa

Enfin, la palme de la créativité revient à une société de design interactif, Sajak & Farki, avec un bel exemple d'un "à chaque jour sa surprise". Les animations interactives dévoilées sont originales, fidèles à l'esprit de Noël, dotées d'humour et n'oublient pas de mettre en scène les employés et les talents de la société.

Site : Sajak & Farki Days! Happy Holy Ones

5 œuvres photographiques dont la manipulation bouscule le regard.

Daniel Brown est un artiste numérique internationalement reconnu. Sa créativité s'impose dans des installations interactives principalement sponsorisées par le secteur de la mode. Certaines de ces réalisations sont transposées sur le web. Elles sont particulièrement frappantes lorsqu'elles viennent perturber le regard sur la photographique. Les jeux de montage, télescopage, cache-cache, parallèle ou déformation procurent des sensations inédites. Une manipulation de la souris qui, outre l'amusement ou l'exercice de style, offre un moyen de dire autre chose, autrement (remarque : technologie Flash obligée).

Dérivé de l'effet torche pour découvrir un décor plongé dans le noir, la souris révèle au balayage de l'écran noir une superposition de visages maquillés. Les découpes du front, des yeux et de la bouche des différents mannequins se succèdent à un rythme aléatoire. L'impossibilité de voir l'intégralité du visage et le montage plus ou moins heureux du hasard interroge le jeu de cache-cache du maquillage.

Site : Deja - Vu

Même effet ici avec la révélation à partir d'un écran blanc de photographies issues d'un album flickr. Avec pour sujet le cirque, le portrait, la banlieue ou le paysage, les photos se succèdent sans logique. Leur apparition derrière la barrière de brume que la souris ne disperse jamais suggère la fugacité du souvenir. Un hommage à La jetée, film futuriste en noir et blanc de Chris Marker, dans lequel le surgissement répété d'images du passé désorganise le présent du héros.

Site : Tribute To La Jetée

Découverte d'un déshabillage réalisé en différentes étapes, photographiées avec un panoramique rotatif à 360°. La succession aléatoire des étapes et une manipulation pécise de la souris conditionne le suspens : le balayage en appui continu efface l'ancienne pose pour faire apparaître une nouvelle, mais le mouvement saccadé et l'appui discontinu opèrent un composite des photos qui bouscule les attentes classiques du genre.

Site : Dress Me Up (SHOWstudio)

Le regard posé sur la photographie d'une mariée et de sa très belle robe s'accompagne d'une sensation simultanée : un habillage d'étincelles musicales surgit au fil des déplacements de la souris sur la photo. Un très bel effet qui vaut d'être testé en plein écran et dont l'interprétation peut varier selon le sens donné au mariage.

Site : Synaesthesia (SHOWstudio)

une recherche ludique ici avec un exercice qui s'inspire de l'effet spécial développé pour le film Predator, dans lequel un monstre est capable de se fondre dans une forêt et n'est repérable qu'aux effets de ses déplacements dans le paysage. Les mouvements réalisés devant la webcam (obligée donc) sont immédiatement répercutés dans la photo selon les modalités de l'effet du film. Le rendu impressionne, particulièrement pour les déplacements éloignés de la caméra qui permettent une mise à l'échelle de la forme humaine dans la forêt. Une imprégnation de mouvements et d'objets sur la photo qui peut ne pas relever du seul film d'horreur.

Site : Predatorator

D'autres créations de Daniel Brown, portant notamment sur l'art génératif, sont accessibles sur sa page : play-create.com

Offrir une vue d'ensemble pour donner à approfondir des œuvres au gré de son envie.

Le site qui propose un ensemble d'œuvres sur une seule page à explorer permet une étonnante synthèse visuelle révélatrice de la personnalité d'un artiste. Très adapté à la lecture écran, un tel choix espère de l'œil des arrêts sur des œuvres qui, plus familières, frappantes ou touchantes, sauront éveiller l'intérêt.

C'était un des composants du site de l'exposition Claude Monet du Grand Palais en 2011 (voir Surprenante plongée dans la peinture de Claude Monet). Le procédé avait déjà été utilisé et peut être exploité en dehors des monographies visuelles.

William Kentridge

Présentée au Museum of Modern Art de New York de février à mai 2010, l'exposition William Kentridge, cinq thèmes, présentait les 30 ans de travail de cet avant-gardiste de l'animation. L'exposition a été reprise au musée du Jeu de Paume à Paris, de juin à septembre 2010.

L'impact de l'interface doit beaucoup au choix du fond, rappel de la noirceur des sujets sociaux et politiques de Kentridge et du fusain, sa technique de prédilection. Il fait ressortir les dessins sur papier blanc et colorés par quelques touches de bleu ou rouge.

Les tracés participent du bouquet d'un des 5 thèmes chronologiques, la navigation s'effectuant par un déplacement du curseur vers le haut/bas ou gauche/droite de l'écran selon la progression dans la page.

Chaque vignette conduit vers une fiche descriptive en diaporama pour visionner des extraits des films. Les informations biographiques et relatives au processus créatif de l'artiste sont accessibles avec un menu traditionnel.

Site : MoMA | William Kentridge

Francis Bacon

L'exposition de septembre 2008 à janvier 2009 au Tate Britain à Londres (ancienne Tate Gallery) a été l'occasion de proposer une rétrospective des œuvres majeures du peintre Francis Bacon, grande figure de la peinture du XXe siècle.

Les toiles sont regroupées en cercles thématiques, propres à la vie artistique de Bacon. Chaque cercle figure la salle, avec ses peintures et le panneau descriptif, accessible à la lecture et l'observation par un travelling grossissant au double-clic.

Plusieurs flèches directives font office de guide : les plus épaisses forment le circuit de salle en salle, les plus fines relient les œuvres autour d'un sujet spécifique. Le clic sur la flèche de son choix active l'animation de la page pour un accès direct à l'emplacement désiré.

Enfin, histoire de susciter la curiosité, des flèches figurent à côté de certaines peintures dont le survol révèle une nouvelle information.

Site : Francis Bacon Interactive

Musée d'Archives numériques des Pays-Bas

Pas d'artiste phare avec le musée d'Archives numériques des Pays-Bas. Pas de fils conducteurs non plus, mais un affichage de documents relatifs à l'histoire et la culture des Pays-Bas. L'interface présente un encadré recherche accompagné d'illustrations présentées de manière aléatoire et conduisant vers une fiche descriptive.

Mais ce dispositif peut faire l'objet d'un choix précis à partir d'un menu déroulant : un visuel représentatif du thème et des documents relatifs à ce seul sujet offre alors un accès centré sur son intérêt. Ci-dessous, les livres scolaires au 19e siècle.

Dernier aspect qui peut passer inaperçu : le déplacement des images. Il permet un jeu d'observation et d'organisation des images qui peut être un préalable ludique à une découverte plus poussée. Ici, un regroupement à partir des peintures du thème sur le romantisme.

Site : The Memory of The Netherlands

Rachel Bloch

Ce procédé du jeu de puzzle est aussi utilisé dans le portfolio de l'illustratrice Rachel Bloch.

Toujours rassemblées autour de thèmes dans une seule page à bouger, ses illustrations peuvent être déplacées pour organiser une histoire, des parallèles, des jeux de formes ou de couleurs au gré de son inspiration.

Site : Rachel Bloch - Illustrations

12 promotions originales de la voiture avec l'expérience ludique d'un parcours à faire.

A côté des outils qui permettent de trouver le trajet le plus court, le moins cher ou le plus branché, les marques automobiles s'inspirent très logiquement du parcours routier pour vanter leur produit. Avec l'appui des fonctionnalités de Google map et Street view ou en adaptant la navigation à la conduite routière, les réalisations font souvent preuve d'une belle imagination, plus ou moins bien exploitée. Quelques unes à découvrir...

Un jeu dont vous êtes le héros pour Mercedes : le conducteur se trouve immergé dans un univers urbain déformé par les fonctionnalités Street view de Google maps. Une belle inconnue le guide pour sortir du piège. Une réalisation impressionnante qui rappelle Inception (rêve et déformation de la ville), mais qui aurait mérité moins de bavardage et une gameplay plus développée.

Site : Escape The Map

Avec la route, la course adaptée du jeu vidéo est évidemment de mise. Scion s'en sort très bien avec une esthétique indéniable et des obstacles impressionnants. La possibilité de jouer via un volant dessiné et capturé en webcam satisfait les plus geeks fervents de la réalité augmentée.

Site : Scion tC augmented reality game

Un essai de customisation de route avec Nissan : le tracé est réalisé par les déplacements de points ou la capture web d'un tracé dessiné sur feuille. Un bon début pour un effet final décevant : l'animation est peu fidèle au tracé et prétexte à l'affichage d'un texte promotionnel. Le seul jeu de tracé comme argument ludique est mince.

Site : Create Your Terrain

Question effet et impact, la bannière publicitaire permettant de visualiser la Nissan suivant le tracé fait à la souris par l'internaute était plus performant.

Site : Nissan Draw A Curve

Une belle réalisation avec la Skoda Yeti qui associe le trajet et le voyage photographique : la voiture passe de photos en photos, le paysage de chacun d'entre elle devant être identifié et localisé sur une carte. Les photos reconnues proposent une carte Google avec le repère indiquant le lieu ; les autres attendent une réponse avec l'affichage des caractéristiques de la voiture.

Site : Skoda yeti

Visualisation du trajet de son choix via des images de Google street view en stop-motion pour Peugeot. Les contraintes géographiques - Google street view n'est pas opérationnel partout – et de kilométrages – assez court – limitent l'expérience du trajet. Le temps de téléchargement, occasion de présenter les caractéristiques du véhicule, est vraiment long et permet de se faire un café. Mais le résultat d'un comme si on conduisait sur la route choisie est bien là, même s'il n'est pas possible de jouer sur la vitesse.

Site : Peugeot RCZ View

Les trajets n'échappent pas aux galeries de vécu des internautes. Nissan propose une interface participative permettant à chacun de réaliser son voyage : un tracé animé sur Google maps, ponctué d'étapes clé avec Street view. La vidéo du tracé défilant est vite ennuyeuse et accuse la monotonie du trajet routier. Sans doute amusant à faire (choix d'une musique d'accompagnement) et motivé par une voiture à gagner.

Site : My Versa Road Trip

Trajets "people" pour Range Rover. Une carte du monde propose 3 à 6 personnalités qui présentent leur trajet et arrêts favoris dans les villes-phares huppées de ce monde. L'accroche audio de la personnalité conduit à un trajet pratiquement peu exploitable. La carte devient un un objet mondain à l'attention de certains cercles, l'ouverture aux témoignages extérieurs étant très peu fonctionnelle.

Site : Range Rover Evoque

Une course de voiture qui incite à découvrir la page. La simple tenue de route de son bolide dans les virages accapare l'attention des novices ; les plus initiés sont dans la compétition du premier arrivé. Une réalisation incontestablement ludique, mais qui relègue les informations de la page aux oubliettes, sans gravité ici puisqu'il s'agit de promouvoir une agence de création interactive.

Site : Magicsocket

Même idée avec le déplacement du modèle Volkswagen Polo dans la page pour découvrir les caractéristiques du véhicule. Une déclinaison appropriée, avec l'idée du parcage de la voiture dans des cercles pour révéler des informations. Mais un clavier qui ne répond pas toujours exactement aux directions données.

Site : Volkswagen Polo

Métaphore de la route ici pour une interface avec une avancée de la voiture au clavier : la progression voit l'apparition d'effets qui animent le décor d'informations relatives à la voiture partagée. Un graphisme démonstratif de l'intérêt du paysage sur la vitesse.

Site : Future of Car Sharing.com

Un diaporama en route timeline pour les 60 ans de la Land Cruiser de Toyota. Le modèle de la décennie suit la route décorée d'icônes symboliques de l'époque. Interaction sonore et texte d'information en survol enrichissent le graphisme.

Site : Land Cruiser: 60 years young

Tout trajet a une fin. Une application-gadget propose de trouver et flasher la rue désirée à partir de Street view pour garer l'Alpha Guilietta dans la photo. Le plus difficile est de trouver la place vide, sauf à s'amuser à se garer n'importe où.

Site : Alfa Giulietta Virtual Ownership

La touche exclusive que pourrait apporter l'art numérique en ligne avec l'exemple d'Angelo Plessas.

Dans l'art numérique, l'artiste s'appuie sur l'action du spectateur pour composer une œuvre. Cette interaction compose des effets graphiques ou sonores inattendus dans lesquels surgissement d'éléments, déformation, répétition, et autres manifestations construisent la composition qui peut être purement esthétique, drôle, métaphorique, politique, ou tout autre.

Au même titre que le dessinateur de presse caricature une actualité ou l'illustrateur propose son interprétation d'un dossier de fond, l'utilisation d'artistes numériques pourrait offrir une diffusion et la reconnaissance d'artistes émergents. Elle constituerait surtout une exclusivité pour un site d'information en ligne qui trouverait là une valeur ajoutée propre.

Petite démonstration avec quelques oeuvres de l'artiste grec déjà reconnu, Angelo Plessas.

Exploitation de la violence : un écran blanc est troué par les balles de coup de feu dont s'écoulent un filet de couleur vive. Un clic prolongé rajoute coups de feux et trainées.

Site : UnwhiteMe, 2008, Courtesy the artist and think21 gallery.

Prostitution : l'attente d'une paire de jambes qui se croisent dans un sens puis dans un autre, avec un délicat jeu sonore de talons.

Site : AllDayDoingNothing, 2006, Courtesy Bilge & Haro Cumbusyan collection.

Justice : le jeu des plateaux d'une balance qui penchent au gré des bulles déposées. Dans un deuxième temps, des petites bulles gigoteuses viennent bousculent la sérénité de l'échafaudage en place, obligeant à replacer au plus vite les bulles tombées car une pointe assassine veille.

Site : TheHistoryOfADecadeThatHasNotYetBeenNamed, 2007.

Pouvoir : un cercle jaune-lumière déplaçable fait l'objet d'un jeu entre deux pointes aimantées par lui, laissant celui qui n'a plus la balle dans l'expectative.

Site : ElectricityComesFromAnotherPlanet, 2008, Private Collection.

Sexe fort vs sexe faible : les rebonds d'une ballerine jetable dans l'écran sont liées au fil tendu par deux hommes déplaçables. Les rebonds sont accompagnés de la délicate musicalité de la harpe.

Site : Elastic Enthusiastic, 2004, Courtesy Miltos Manetas Collection.

Médias : l'animation de la couverture d'un magazine d'information connu dans laquelle des avions lâchent leur flot de bombes dans une explosion graphique visuelle et sonore débordante.

Site : JourneyToTheEndOfHistory, 2001.