Sélection de quelques sites que j’ai pu croiser ces derniers jours et qui m’ont plu :

http://www.freikirchliche.com/ : pour les yeux, on en voit peu, mais j’aime bien les formes qui se déploient sur une grande surface.

Glasshouse : interface exploratoire sur plusieurs couches, dont le décor se déroule. Aussi avec des formes qui se déploient mais autour d’un élément cette fois.

Tenji Matsuri : Interface de visualisation de vidéos selon deux axes : temporel ou spacial sur une carte autour d’un évènement.

Un dernier, et c’est une vidéo cette fois, il n’y a pas de flash dedans. Graphiquement déjà vu et revu mais la réalisation est très maitrisée. C’est le Pika Pika project !

Pictaps est réalisé par Roxik, webdesigner japonais, également auteur d’autres créations assez connues sur la toile. Demo impressionante et qui date de 2006 (!) : des formes en papier que l’on découpe, et colorise pour les voir ensuite danser sur une scène devant une foule de clones dans le flou. Les outils de découpages et de modélisation sont précis et complets et les éléments en 3D à plat bénéficient d’une animation pour les mouvements très souple !

On peut même insérer sa forme dessinée qui danse sur scène sur son blog !

Croisé ce matin via Richard legett et il fait le tour du web, The Eco zoo organise son contenuen 3D autour d’un arbre que l’on peut faire tourner pour atteindre les hauteurs et ainsi les différentes sections. Scène légère, gestion de feuilles qui tombent, de la profondeur de champ, avec un aliasing très réduit, et une grande maitrise des textures (lumières surtout…) qui donnent un rendu global très fin et une ambiance au travers d’une lumière tamisée particulière. Le reste du site est tout aussi superbe avec ces livre d’images qui s’ouvrent, je vous laisse les découvrir.

Je constate quelques points intéressants : la mise en scène en 3D très travaillée qui possède une vraie identité, puis l’ergonomie de navigation assez fluide et évidente pour l’utilisateur, et enfin la qualité du rendu qui permet la gestion d’une véritable scène sans être limitée par les aspects techniques. Dernier point : ce n’est pas du Papervision!

Il me semble avoir attendu tous ces mois à chercher les dernières créations flash en 3D pour enfin trouver avec cet exemple un très bon présage d’une nouvelle ère dans l’interactivité et la mise en scène. Superbe. Et j’adore toujours autant les personnages dessinés et détourés avec une marge blanche en 2D dans un environnement 3D…

La 3D dans flash pousse et permet aux créatifs d’inventer des environnements totalement différents pour mettre en scène le contenu. Et 3D plus interactivité, cela reviendrait-il à du jeu vidéo ? Sinon, quelle est l’identité de ces nouvelles interfaces ? J’ai croisé quelques exemples ces derniers temps de sites qui - dans leur scénarisation - sont plus proches de jeux que d’interfaces de présentation. Peut-être une nouvelle tendance ?

Dans ma boite mail, ces ouvrages peuvent en intéresser certains, à tout hasard :

- Don’t Make Me Think: A Common Sense Approach To The Web Usability
- Designing Web Navigation: Optimizing the User Experience
- Communicating Design: Developing Web Site Documentation for Design And Planning
- Prioritizing Web Usability
- Sketching User Experiences: Getting the Design Right and the Right Design

Ce qui est sûr, c’est que je n’ai pas acheté des livres de cuisine récemment… bon point pour eux. Il y a des ouvrages indispensables que je devrais absolument avoir dans le lot ? Le 2 et 3 me tentent bien…

Pour plus de compréhension, ‘Mushi’, c’est “insecte” en Japonais, mais ca tombe bien, ce site là est à moitié traduit. Coup de coeur pour mushi battle! qui n’est pas spécialement un coup de coeur technologique mais pour ces petits insectes que les internautes créent avec du carton, deux bouts de bois et que l’on prend en photo pour l’ajouter à la collection! Cliquez sur “everyone insect’s guide” pour voir la collection.

(Mushi, c’est associé à tout autre chose dans ma tête mais passons… peut-être y aura-t-il un fan de ce manic shooter qui me lit et qui appréciera l’allusion, on ne sait jamais^)

Si cette année il y avait peu de monde au Web Flash Festival, les conférences et événements n’en étaient pas moins intéressantes, je vous propose un petit tour de ces 48 heures, (morceaux choisis, et sans être allé à tout) :

Day 1 : Deux conférences qui m’ont marqué, celle d’André Michelle et d’Etienne mineur, respectivement sur ses travaux sur le son, notamment avec flash 10 (il est à l’origine de la campagne Adobe, make some noise, pour intégrer plus de fonctions et de contrôles en AS sur le son), et sur “Dix étapes dans l’histoire du jeu vidéo”. Deux conférences très riches, avec des orateurs très charismatiques, je ne m’en lasse pas !

L’Application qu’André Michelle présentait était l’outil audio sur hobnox, à voir absolument, qui permet de faire du sample à partir de vieilles machines de son. Très bon, surtout quand c’est lui qui nous fait une démo en live !

Day 2 : Une conférence sur le jeu vidéo en ligne, avec quatre intervenants différents (Yamago, Ankama, Globz, Widescreen Games). Très bonne conférence, qui permet d’avoir une bonne vision de recul sur le jeu en ligne en flash : les différents business models développés pour les jeux, des casuals games aux MMorpg en flash (Dofus), et les différentes possibilités de développement. Je note la difficulté de certains studios à en vivre réellement !

Présentation d’un jeu online en flash et en 3D qui sort pour Octobre, apparemment, Identifiction, (je n’arrive plus à retrouver l’adresse du site web), qui me semble intéressant de bout en bout (idée, positionnement, business model etc..), même si revendiquer une qualité graphique de console next gen sur un jeu en flash, cela me semble très très sérieusement exagérer (même avec un moteur 3D spécial). Bon, on verra, en tout cas, c’est à suivre !

Conférence suivante, celle de Quasimondo (notamment auteur de “island of consciousness”, toute aussi passionnante que les précédentes, qui avec André Michelle étaient invités d’honneur cette année. Il était venu présenter ses travaux, notamment un outil de génération de formes (voir photos), très poussé, bientôt disponible online en beta. En voir plus sur son site pour quelques exemples.

Cérémonie de cloture :

Un show entre André Michelle et Mario Klingemann (quasimondo), l’un improvisant des compositions musicales electroniques avec son outil, et l’autre… alors, là, il va falloir de la vidéo pour expliquer cela : il avait branché une vieille console avec un casse-brique et un space invaders, et demandait à la salle d’agiter les bras pour faire passer la barre de droite à gauche, ainsi que pour tirer. Très fun, toute la salle s’est vraiment investie !

Untitled from crazy snake on Vimeo.

Cadavre exquis de code : 2 groupes ont développés en 6 heures une oeuvre interactives sous le thème “jouable”, en processing et en actionscript. Le premier rendu était vraiment impressionnant, au vu du temps de réalisation : une oeuvre qui affiche les textes de sms que l’on envoie à un numéro, et qui réagit au son du micro.

cadavre exquis web flash festival from crazy snake on Vimeo.

Pas d’image pour l’autre création, mais très esthétique et une animation assez superbe !

Résulats du web flash festival :
Les primés :
Net art : http://www.bottoxlab.com
Art graphisme : http://www.mtl12.com
Jeu : http://www.dreftdiamondgame.fr
Expérimental : http://www.tantettemps.net
Animation : http://www.cedric-villain.info/defi10
Présentation : http://www.lecoqsportif.com/#/fr/all
Prix du public : http://powa.blablaland.com/chat/bbl_chat.php

J’espère que cela vous donnera envie d’y aller l’année prochaine !

http://3dhistogram.com fait parti de ces sites sortis en fin d’année dernière mais passé inappercus pour d’obscures raisons de googlelisation, de lien oublié ou que sais-je encore… 3Dhistogram vous offre donc la possibilité de décomposer en cubes de couleur en 3D (Papervision bien sûr…) une image que vous uploadez. Cliquez sur chaque cube et récupérez leur code couleur, pour construire avec une mise en scène originale votre propre palette. Cela donne juste envie d’uploader l’ensemble de ses photos pour voir leur rendu en 3D!

Quelques explications complémentaires par ici.

A voir absolument ! Msnbcmedia vient de mettre en ligne un lecteur rss qui affiche en 3D, toutes les news provenant de leur portail d’information, leurs vidéos, leurs blogs, avec des modes de visualisations différents, et des interactions originales comme l’utilisation de la webcam. Réalisé avec la librairie 3D pour flash Papervision, je suis étonné du nombre de panneaux gérés dans la même interface, avec une ressource d’affichage somme toute assez correcte pour une très bonne fluidité. Dommage que l’on ne puisse pas lire tous les articles et consulter les vidéos dans la même interface. Superbe!

La question ensuite est de savoir si le mode de visualisation en 3D apporte quelque chose à l’accès à l’information. On ne peut nier que d’un coup d’oeil, l’utilisateur peut accéder à une masse d’information importante, très importante. Le système de tri, de classification, de code couleur et de rangement permet rapidement de brasser et d’identifier le type d’information que l’on cherche assez facilement en tout cas.

L’application est accessible à cette adresse :
http://www.msnbc.msn.com/id/24207533/
ou bien par celle-ci :
http://msnbcmedia.msn.com/i//msnbc/Components/spectra/index.html

Edit : pour ceux qui se demandent par qui il a été fait, c’est donc par Remon Tijssen ( http://www.fluid.nl ) and Marco Christis (
http://www.blixem.com ), pour SS&K. Mystère éclairci.

Je découvre par la même occasion leur portail vidéo (j’aime beaucoup leur système de catégorisation sur deux colonnes) et leur labs qui méritent aussi le coup d’oeil.

Via infoesthetics.

Le son dans flash s’est limité à ses débuts à des ambiances de musique-au-mètre de 10 secondes sur fond de techno et de sons si basiques / cliquants / forts que très vite, il a perdu de son potentiel, catalogué comme perturbant par les utilisateurs. Ajoutons à cela qu’un site web étant essentiellement visuel, à sa création, le son est considéré comme superflu, et coûteux. Et pourtant…

Sur le web, des détails techniques à prendre en compte
Un gros fossé entre le bureau et le chez soi :
- au bureau : bien des ordinateurs n’ont pas d’enceintes, ou ont le son coupé parce que l’open space ne permet pas une liberté sonore totale.
- à la maison : bien des utilisateurs ont leur ordinateur branché sur leur chaine et enceintes 5.1. Ecouter le vrombrissement d’un gros moteur de voiture sur un site marketing, c’est toujours attrayant. (Enfin, il parait que les “automobilophiles” en sont friands).

En définitive, le son peut être découpé en 3 domaines pour lesquels je prendrais des exemples récents qui m’ont marqués :
- la voix : la voix pour inciter à agir / La voix renforce une ambiance, et elle appuye un discours
- la musique : le renforcement / la rupture et le contraste / C’est la musique qui commande / L’appropriation d’une musique connue par une marque en campagne cross-media
- les bruitages et effets d’ambiance : Renforcer le réalisme des éléments graphiques / Le mode non synchronisé pour illustrer sans visuel.

La voix.
Quelques sites :
La voix pour inciter à agir

Un personnage incrusté dans un décor parle à l’internaute. Pas d’autre indication que le son, pas de sous-titre. Une relation directe qui attend une action de la part de l’utilisateur, et qui, comme dans une relation réelle, interpelle.

La voix renforce une ambiance, et elle appuye un discours.

Un exemple que je continue de trouver très fort. Ecoutez 10 minutes d’un témoignage de 6 Milliards d’Autres, du projet de Yann Arthus-Bertrand : écoutez la voix des interviewés, son timbre, sa force, ses hésitations, ses silences, ses tremblements… ses accents. Elle donne une force aux témoignages. Il y a dans la voix humaine une telle richesse dans les tonalités que je m’étonne qu’elle ne soit pas plus utilisée. (Le regard, les mouvements des lèvres, les thèmes évoqués et le cadrage dans cet exemple jouent également un rôle extrêmement important).

Testez avec ce site Japonais de AXE et écoutez simplement sans comprendre ce qui se dit : le timbre de la voix renforce cette impression de mystère que donne le visuel. Soulignons qu’il s’agit seulement d’un préchargement.

La musique.

Le renforcement

Un joli cochon rose, et peu d’illustrations, avec une charte quasi inexistante. La musique en pseudo-MIDI tirée des vieux ordinateurs donne toute la dimension décalée au site. (Même si en boucle, cela assomme vite)

La rupture et le contraste

Site magnifique pour le jeu vidéo Halo3 sur xbox, d’une scène de bataille, accompagné aussi surprenant soit-il, par une musique au piano, très grave, (qui ressemble à un Eric Sati ou un Chopin). Les FPS sont plutôt destinés à un public jeune et l’on pouvait s’attendre une approche plus techno/electro ou rock/metal tonitruant. Qu’est-ce qui fascine d’abord ? la scène ou la musique ?

C’est la musique qui commande

Neon Bible est le single d’un nouvel album d’Arcade Fire. C’est la musique la star : elle n’illustre plus, elle scénarise toute l’animation. L’animation, la vidéo, la mise en scène suivent la musique.

L’appropriation d’une musique connue par une marque en campagne cross-media
A l’heure des campagnes cross-media où l’on retrouve les mêmes visuels/animations au cinéma, à la télé, sur mobile et dans les sites interactifs, le son est à ne pas oublier. La musique peut être un code de reconnaissance d’une marque. Qui n’a pas chanté des spots publicitaires connus, dont la musique a été créé spécialement pour cela ? Je pense au Tchiwawa (orthographe approximatif) de Coca-Cola, qui a très bien su en jouer. Autre cas de figure, les rocks anglais utilisés par les constructeurs automobiles il y a quelques années (vous vous souvenez de l’utilisation d’une chanson de Dire Straits pour une pub Renault ou Peugeot (j’ai oublié) ?). Je m’écarte un peu du web mais la mise en relation avec les outils de communication autre que le web est toute aussi importante.

Les bruits et effets d’ambiance.
Renforcer le réalisme des éléments graphiques.

Regardez ce site de Nike d’abord sans le son. En fonction de la configuration, l’animation peut paraitre pauvre, et saccadée. Regardez l’animation des panneaux avec du son : l’animation prend de la profondeur, les panneaux se matérialisent en portes lourdes de métal, avec une résonnance qui illustre une scène de hangar mal isolé. (La qualité du son n’est pas forcément bonne mais c’est dans l’idée). Un bouton auquel on ajoute un bruitage bien particulier va ou appuyer l’aspect graphique et y ajouter du relief, ou bien lui donner une autre dimension qui va compléter son aspect seulement visuel.

Le mode non synchronisé pour illustrer sans visuel.
Je manque d’exemples : on peut avoir aussi en fond sonore des effets que l’on ne voit pas en lien direct avec la scène. C’est une scénarisation utilisée souvent dans des Tex Avery (au hasard). Je pense par exemple à un personnage qui se casse la figure hors champ, avec des bruits de casseroles, des poulets qui hurlent, et toutes sortes d’objets qui tombent et qui se cassent. Une manière habile de ne pas illustrer ou animer une scène graphiquement, ce qui demande du travail. Dans ce cas, le son est source d’économies et peut produire un meilleur effet que s’il avait été illustré.

p.s : Personnellement peu habile avec le son (j’ai fait du 3Ds, du toshop, du premiere, du flash mais le son… rien) même si je l’ai déjà utilisé dans des projets, ce billet est dédicacé à mon super stagiaire qui m’a posé la question aujourd’hui, qui avait besoin de quelques pistes pour un boulot qu’il doit rendre. J’espère que ca l’aidera. J’ai manqué de temps (fait à la volée, j’avoue) pour envisager tous les cas de figures mais si vous pensez qu’il manque des exemples marquants ou que vous voulez ajouter quelques éléments, n’hésitez pas ! aidez le !

p.s 2 : attention, je n’ai traité que les sites en flash ! Je n’ai pas parlé des horribles pages myspace avec une musique qui démarre à l’ouverture…

Evolution du Jukebox3D, Galaxy : une application en Flex, fortement intéressante présentée au WIF (avec cette version sortie spécialement pour le WIF). Voir le billet d’ouverture de Galaxy sur le blog de Tkaap et l’article sur l’atelier qui en parlent. Galaxy est en démo à cette adresse. C’est une interface de visualisation donc permettant de lire rapidement des vidéos provenant à terme de Youtube, Dailymotion, et des images de Flickr - et pourquoi pas - de la musique. Un gros boulot d’optimisation pour une consultation et une navigation rapides.

Remarque : je ne vais jamais sur Youtube ou Dailymotion à vrai dire, mais j’ai pris un malin plaisir à en regarder avec cet outil pour une raison : la consultation est rapide, et l’on peut faire deux choses en même temps, choisir celle que l’on va consulter tout en regardant celle qui se joue. Great Job ! on attends la version suivante.

Avec une supeeeeer interview autour de Galaxy, de l’outil, des évolutions, du travail sur l’ergonomie, la conception de l’outil etc…

Sugarrhyme.com est un portfolio d’illustration dont la navigation ressemble assez à un bandit manchot / un système de réglette mécanique : cliquez sur un bout d’image pour voir se composer l’illustration. Une manière ultra simple d’afficher des images de manière interactive. Et ca marche !

S’il y a un bien une chose que je défend dans la création de sites en flash et qui passe souvent pour de la décoration facultative, c’est de surtout ne pas endormir l’internaute avec une barre de chargement interminable (5 secondes, c’est long). Il y a bien sûr l’architecture d’un flash. Mais un preloader un peu recherché (voire invisible pour se faire le plus discret possible) permet de le distraire pendant que le reste du site charge, et de lui faire découvrir l’ambiance du site même avant qu’il ne démarre. Texte informatif, animation simple ou originale, tout est bon pour garder l’attention : toutefois, les plus complexes ne sont pas forcément les meilleurs. Le preloader reste une étape délicate où l’internaute peut décrocher à tout moment.

Je vous invite à consulter sur smashingmagazine un récap de quelques loaders inventifs, publié il y a quelques temps déjà.

Ainsi qu’un petit preloader amusant en jeu sur getoutandplay. Classique.