___________

Dirigé par Steaw Web Design, un jeune studio de Web Design Parisien spécialisé dans des projets graphiques et ergonomiques pour des startups et marques web (dont nous sommes très proches – enfin, surtout Nico qui quelqu'un de plutôt tactile ! – et très fiers), «Never Mind the Bullets» est une BD interactive qui s’appuie sur les nouvelles possibilités qu’offre le HTML5. Ce projet, initié par Microsoft à l’occasion du lancement d'Internet Explorer 9, aura demandé la collaboration de deux experts (illustration et programmation) et nécessité deux mois de travail ; une prouesse au regard du résultat.

François Le Pichon (@iamstArk), fondateur de Steaw Web Design, revient pour nous (parce ce qu’il se sent très proche de nous aussi), avec un sens particulier du détail et du lien hypertexte (tellement nombreux que j'ai vite renoncé à l'idée de les intégrer, mais l'intention reste généreuse), sur cette aventure qui offre, à l'image de sa bande dessinée, une nouvelle expérience de lecture ENRICHIE....

Qu'est-ce qui a amené Steaw à participer à ce projet et réaliser NeverMindtheBullets.com ?

Nous avons eu la chance de pouvoir participer à cet appel d'offre mondial lancé par Microsoft, grâce à Christophe Lauer qui chapeautait les agences et studios français. Début juin, Christophe et Tim Sneath, Directeur Evangelist Microsoft Corp, faisait un petit roadshow dans Paris et c'est à ce moment là qu'on a pris connaissance du projet.

Microsoft, pour la sortie public d'IE9, allait lancer beautyoftheweb.com son showcase HTML5 mettant en valeur les qualités et performances de la nouvelle version de son navigateur. Nous avons donc eu la chance de pouvoir proposer quelques idées et surtout qu'une d'entre elle ait été sélectionnée.

Quelles en étaient les exigences ?

Les Test Drive d'IE9 (http://ie.microsoft.com/testdrive/) existants sont parlants d'un point de vue technique mais peu du point de vue visuel, et donc Tim Sneath a vraiment mis l'accent sur la créativité du projet. Il voulait du jamais vu, de l'inattendu et qu'on lui propose quelque chose qui "blow out his mind", pour reprendre ses mots.

Le projet devait donc se démarquer de part sa créativité, comporter du HTML5 et mettre à profit les avantages d'IE9. C'est tout.

Sur quels critères, quels éléments ont été déterminants pour que votre projet soit retenu ?

Nous avions proposé une dizaine d'idées, dans un simple document texte avec 4-5 lignes pour présenter chaque idée. On avait proposé un conte pour enfant interactif, un jukebox collaboratif, un outil d'astronomie,... et une BD animée grâce à l'effet parallaxe. D'ailleurs au passage, nous avons eu cette idée après avoir vu le travail de Kevin Hamon (http://kevinhamon.fr) qui, venait de réaliser son portfolio avec cette technique.
Et c'est donc ce concept qui a séduit Microsoft. Il y avait un gros potentiel, surtout qu'on partait du principe que tout allait être fais pour l'occasion, autant le scénario, les dessins que le moteur "Parallax". De plus, je suis un grand fan de BD et j'ai toujours pensé qu'on pouvait aller plus loin dans l'expérience de lecture d'une BD dans un navigateur. Avec ce projet, on voulait apporter notre humble pierre à l'édifice.

Plusieurs personnes vous ont accompagné au cours de ce projet : dans le cadre de la collaboration, comment s'est effectuée la répartition des tâches dans les différents étapes de production ?

Il nous fallait donc une dream team pour l'occasion. Chez Steaw (http://www.steaw-webdesign.com), nous sommes principalement DA web, ergonomes et intégrateurs, nous avions besoin de renfort pour le reste.
On a bien sûr directement appelé Kevin (http://kevinhamon.fr) pour qu'il vienne s'occuper des illustrations. Suite à une annonce sur Jsjobs.fr, on a rencontré Sébastien Doncker (http://www.deuxieme-a-gauche.fr), formateur jQuery et pas seulement, qui allait prendre en charge la réalisation technique du moteur "Parallax". Et pour finir, j'ai demandé à Antoine Laroche (http://onauralhiver.net/), auteur indépendant et ami, de nous concocter un scénario et des dialogues aux petits oignons (juste avant qu'il ne devienne le papa de la jolie Faustine dont je suis l'heureux parrain ;)).
S'ajoute bien entendu l'équipe Steaw et particulièrement Jeremy Thomas pour le suivi technique et l'intégration, et moi même pour la direction du projet.

L'animation s'incarne dans l'univers du Western ; pourquoi avoir fait ce choix et quelles étaient vos intentions (la manière dont ce projet a été abordé, d'un point de vue artistique et technique) ?

J'ai tout de suite voulu partir sur un Western. J'avais en tête la mythique scène de duel dans Main Street où les deux ennemis se toisent sous un soleil de plomb attendant que l'horloge sonne l'heure pour dégainer et faire feu. La caméra, dans le dos du premier, faisant un léger travelling sur le côté pour laisser apparaître le second au bout de la rue... Oui, c'est ce genre de plan que je voulais qu'on arrive à rendre dans cette BD !
Aussi, il nous fallait un contexte propice à de l'action pour qu'on puisse se lâcher dans les dessins et les effets. Dans le western, on avait tout ce qu'on voulait : Poker, bagarre mains nues, bagarre armée, fusillade, explosion, duel et le tout dans un décor simple : un saloon et une rue.

Les sources d'inspiration...

Antoine et moi jouions à l'époque à un jeu de rôle nommé Dead Lands qui évoluait dans un Western un peu mystifié. On avait donc l'habitude de délirer dans ce genre d'ambiance. D'ailleurs, Bill "One shot" Collins était le nom de mon personnage et Brand McArthur celui d'un autre ami. Pour Suzy Lafleur, le but était d'avoir une French Touch, Lafleur étant repris du nom d'emprunt de Sawyer dans Lost.

Kevin s'est également inspiré de deux BD pour les différents plans : Ken Games (http://www.dargaud.com/front/albums/series/serie.aspx?id=385) pour le poker et Jonah Hex (http://fr.wikipedia.org/wiki/Jonah_Hex) pour l'ambiance Far West.

Quelles ont été les technologies et les logiciels utilisés dans ce projet ?</p>

Un éditeur de texte simple pour le html, le css et le javascript. Pour ce dernier, nous avons utilisé la librairie jQuery. Les dessins et la charte graphique ont été travaillés sous Photoshop.

Et pour le petit reste, l'application a été développé en .NET sous Visual Studio et l'hébergement est assuré par Azure, la solution de Cloud Computing de Microsoft. (Merci à Benjamin (http://www.twitter.com/kleinvile) et ma Pauline (http://www.twitter.com/popolineu) !)

Nous avons pris les polices de caractères chez Blambot.com, un expert de la police de comics.

Quels sont éléments et animations spécifiques au HTML5 ?

Nous utilisons par exemple le Font Face pour les polices de caractères DigitalStrip et CrashLanding (Blambot.com). Cela marche très bien et évite de passer par un Cufon (javascript) ou un Cifr (Flash). Les background des bulles de la BD sont en SVG (Scalable Vector Graphics) que nous générons à la volée via un script aspx. Sur le site, vous pouvez personnaliser les dialogues de la scène de duel (http://www.nevermindthebullets.com/createNemesis.html) et nous utilisons l'Editable Content pour modifier les textes.
Il y a d'autres petites fonctionnalités mais encore une fois, le but n'était pas de faire un sapin de noël de fonctionnalités HTML5 mais une application qui s'inscrivait dans cette nouvelle ère du développement web.

Selon cette expérience et dans l'état actuelle de cette technologie, peut-être peux-tu apporter des éléments de réponse à cette grande question : HTML5 peut-il remplacer flash ?

Le souci est que l'on fait aujourd'hui en HTML5 ce qu'on fait depuis 10 ans en Flash. Et même si on le couple avec du javascript, on est encore loin des possibilités que nous propose Flash, notamment en terme de traitement de la vidéo, du son ou encore de 3D. Pour le mobile, la dernière version d'Android (qui deviendra leader des OS mobiles dans quelques mois) embarque le Flash Player. Donc que ce soit sur ordinateur ou sur mobile, Flash va garder une longueur d'avance. Bien sûr, HTML5 va permettre de se passer de Flash dans pas mal de cas mais je ne pense pas qu'à l'heure actuelle quiconque soit capable de parler de remplacement complet.
Mais quoi qu'il arrive, il est très bon d'avoir des alternatives libres et natives pour la réalisation d'applications riches.

Et donc vous étiez au lancement d'Internet Explorer 9 à San Francisco, comment ça s'est passé ?

C'était génial ! Beautyoftheweb.com est sorti le 15 septembre offrant donc la sortie public de la beta d'Internet Explorer 9. Cet événement était à la fois web et physique. Microsoft nous a invité à participer à l'événement majeur à San Francisco où nous attendaient un stand avec notre application, tout le staff Microsoft Corp et un parterre de journalistes internationaux. C'était évidemment super impressionnant et très nouveau pour nous. On est un petit studio et on a du faire bonne figure à côté de grosses pointures comme Soleil Noir, Dailymotion, Pixel Lab ou encore Big Spaceship. Mais la BD a très vite plu et ça nous a mis en confiance, ce qui nous a permis de passer une super journée et de rencontrer beaucoup de monde.
J'ai d'ailleurs fais une petite vidéo immersive : http://www.dailymotion.com/video/xeve2u_steaw-au-lancement-d-ie9-a-san-fran_creation

Tu as soumis l'animation au jury du FWA ; où en sont les résultats ?

Nous avons été shorlistés grâce à de nombreux votes du public (merci !), et Je ne sais pas si je peux le dire officiellement donc je recommande à tous d'aller voir le Site of the Day du 25 octobre sur http://www.thefwa.com ;))

Comment a été accueillie l'animation à sa sortie. Y a t-il un avant et un après projet ?

Incroyablement bien. On dénombre des milliers de Tweets à travers le monde relayant le site de façon très positive. Parmis lesquels quelques stars : @SmasingMag (http://twitter.com/smashingmag/status/25218482672), @Khoi, @Scobleizer et @Zeen. Egalement, un très bel article dans TheNextWeb (http://thenextweb.com/microsoft/2010/09/26/ie9-tells-you-never-mind-the-bullets-in-comic-to-showcase-html5/), la une de la Smashing Newsletter #18 (http://us1.campaign-archive.com/?u=16b832d9ad4b28edf261f34df&id=e2d51baf68&e=9fe72a966f) ou encore la petite consécration d'avoir été "Daring Fireballed" (http://daringfireball.net/linked/2010/09/21/never-mind-the-bullets).

Bref, on est très heureux que l'application plaise autant. Nous avons pu gagner en notoriété et récupérer de nombreux et précieux contacts français et internationaux. Et oui il y aura bien un avant et un après Never Mind the Bullets pour Steaw !

Quels projets pour Steaw, dans les prochains mois ?

Nous venons de lancer la béta privée d'un site que nous éditons à 100% (nous passons de l'autre coté de la caméra). Il s'agit d'une plateforme communautaire pour les amateurs et passionnés de BD (Bande desinnée, Manga et Comics) nommée BD Maniac (http://www.bdmaniac.com). Rejoignez-nous sur la béta !
Nous nous sommes également associés avec Kima Ventures et le Studio Melipone pour créer ensemble Card.biz, un éditeur et hébergeur de carte de visite virtuelle. La sortie public est prévue pour les prochains jours (quelques accès béta avec le code "STEAW").

Coté studio de création, beaucoup de réalisations dans les tuyaux (mais tant que c'est pas lancé on ne peut rien dire).

Nous avons récemment commencé le design d'application iPhone, de plus en plus demandé.

(Je viens tout juste de me rappeler que Steaw avait débauché notre graphiste…
... Les Bâtards !)