Ce site bilingue (Français et Anglais) fédère l'ensemble de mes projets personnels tournés vers l'expérimental et l'imaginaire. Le thème choisi est la bande dessinée française "Philémon", de Fred (Fred Othon Aristidès) ; d'une part pour lui rendre hommage, d'autre part parce que c'est sans doute la première oeuvre artistique d'imagination qui m'ait impressionné, avant "Alice au Pays des Merveilles".

Des dessins de chaque histoire de "Philémon" ont été scannés, traités pour améliorer l'image (enlever les trames et les défauts d'impression, mais en gardant en partie la texture du papier), et surtout recombinés. Un gros travail de retouches sous Photoshop a été fait pour assembler différents éléments épars en un tout cohérent et inédit, qui restitue les décors et ambiances de "Philémon" sans en reprendre forcément le contexte littéral. Certains éléments aléatoires, tirés à chaque visite, renforcent également l'idée d'un monde à réalité changeante, ce que Fred a souvent illustré.

Une fois dans le coeur du site, le visiteur est clairement invité à découvrir davantage l'oeuvre de Fred, ou à visiter un autre site de Batbad. Grâce à de nombreuses images d'arrière-plan, le site s'adapte à n'importe quelle taille de fenêtre de navigation, de 800x600 à 1600x1200 pixels, et ce en dépit de ses graphismes dessinés et texturels. La section consacrée à Fred essaie d'exploiter au mieux, et de rendre interactifs, certains jeux sur la forme que Fred s'est amusé à créer, le but étant que le visiteur découvre de façon ludique son univers. Un autre choix dans le 'Coeur de Batbad' permet également de lire une biographie de Fred, un essai d'interprétation de son oeuvre, et pourquoi celle-ci a inspiré mon propre travail.

Ce site a été l'unique site sur Fred et "Philémon" mis en lien par la chaîne de télévision Arte, suite à leur documentaire sur l'auteur et son oeuvre diffusé en janvier 2005.

Il s'agit d'un des sites les plus ambitieux, expérimentaux et complexes que j'ai réalisés : plus de 350 pages HTML (pour la plupart totalement différentes les unes des autres), à peu près 150 fichiers Flash, plus de 450 lignes de dialogue, 5 films de David Lynch et une partie de la série "Twin Peaks" représentés, une communication entre Javascript et Flash gérant des animations sonores et interactives, énormément d'éléments aléatoires, beaucoup de trucages Photoshop pour changer des personnages de place et surtout vider les décors des acteurs présents...

Le concept du site est de réunir les films et séries de David Lynch ayant des logiques et des ambiances similaires dans un même univers à explorer, à la façon d'un monde virtuel de jeu d’aventure "pointer et cliquer". Beaucoup d'oeuvres de David Lynch partagent la même esthétique "années 50", la présence d'individus étranges, surnaturels et/ou allégoriques, une photo très travaillée et contemplative, un scénario avec mises en boucles, inversions de personnages, univers parallèles, le thème de la schizophrénie... Le site rassemble tous ces éléments, les rejoint, les croise, les adapte au format HTML, en fait un tout structuré, et en tire une expérience interactive inédite et divertissante rendant hommage au réalisateur.

Une charte graphique et technique complète a dû être rédigée pour coordonner tous les aspects du site. Rapidement : malgré un contenu de type photographique, chaque page ne contenant pas une image panoramique (où plusieurs plans sont mis bout à bout) étire la scène qu'elle présente à la taille de la fenêtre de l'utilisateur (pourvu qu'elle soit comprise entre 800x600 et 1600x1200 pixels) ; horizontalement (pour les plans tournés en cinémascope ou en 16/9), ou horizontalement et verticalement (pour les plans tournés en 4/3), et ce, grâce à de nombreux fonds ("papiers peints") tirés des scènes elles-mêmes. Afin de rendre chaque visite unique, et donner l'impression d'un monde qui évolue, de nombreux éléments (comme les dialogues lors des rencontres, ou les rencontres elles-mêmes) sont tirés au hasard (cette abondance de dialogues fait que le site est uniquement en Anglais). Les sons et animations, très importants pour rendre l'univers réel, sont souvent interactifs avec les mouvements de la souris de l'utilisateur grâce à un usage très complet de Javascript et ActionScript.

En complément, une section à part avec navigation Flash permet d'accéder directement à certaines scènes du site, et de trouver le contenu habituel que l'on attend d'un site sur un réalisateur (présentation du travail de l'auteur, de mon propre travail, news, analyses, livre d'or, liens, F.A.Q.)...

Ce site est à la fois un hommage à l'univers de Batman en général et à la série animée de Bruce Timm et Paul Dini en particulier (le Riddler est un adversaire bien connu de Batman) ; et un terrain d'expérimentations de jeux en ligne et d'animations, notamment en Flash.

"Batman, la Série Animée", sortie en 1992, a été un spectaculaire renouvellement de qualité dans les séries télévisées d'animation. En stylisant les personnages de "Batman", Bruce Timm les a rendus à la fois plus dynamiques et expressifs, et plus faciles à animer. Avec des histoires destinées autant aux enfants qu'aux adultes et une ambiance "art déco" 1930/1940 tout à fait plaisante, "Batman, la Série Animée" a produit un nouveau standard de dessin animé, à l'animation extrêmement fluide et au contenu vivant et mature, que beaucoup de séries concurrentes ont à l'époque été forcées de suivre rapidement.

L'ambition de ce site est de transcrire ces qualités sur Internet par le biais du personnage du Riddler, obsédé par les jeux, énigmes et puzzles. Le site propose principalement des énigmes et jeux en ligne, mais aussi des histoires rendant hommage aux épisodes de la série, des informations sur les personnages, des fichiers multimédia...

Tout comme la série, le site s'adresse aux adultes et aux enfants, proposant des énigmes complexes mais accompagnées de pages d'aides étape par étape détaillées, intégrant des personnages et éléments de la série pour les rendre attractives aux plus jeunes. De très nombreuses animations, au format GIF animé ou en Flash, sont présentes partout dans le site : la stylisation choisie par les créateurs de la série rend en effet idéal l'usage de chacun de ces deux formats. Étant un site ludique, beaucoup de ses éléments sont interactifs, et un soin particulier, notamment sur le plan sonore, a été porté sur le côté "vivant" du site. En reprenant le style et l'ambiance "art déco" de la série, le site a en fait pour ambition d'être une sorte de "Gotham City" en ligne, regroupant à la fois des activités ludiques, éducatives et informatives, pour tous âges.

Ce site a été particulièrement intéressant à développer puisque sa dimension artistique liée au spectacle vivant a permis d'expérimenter beaucoup de choses inhabituelles. Son objectif est de présenter une association de spectacles de Guignol, "Les Petits Bouffons de Paris". Pour restituer au mieux le travail des artistes, j'ai assisté à plusieurs de leurs séances, et ai surtout été frappé par le côté "vrai" du spectacle vivant, ma première réaction ayant été : "mais c'est en relief" !

A une époque où nous sommes constamment bombardés d'images "plates", retouchées et lissées (télévision, jeux vidéo, cinéma, Internet, publicités, animation en images de synthèse), voir un spectacle "réel" est étonnant, avec la toile de fond, les portants, les marionnettes et les accessoires réellement à portée de main. Un autre élément important, et voisin de ce côté "concret", est l'interactivité du spectacle, les marionnettistes tenant compte des réactions des enfants lors d'échanges parfois comiques ou adorables.

J'ai pensé qu'il était essentiel que ce site mette en valeur ces deux éléments clefs, ainsi que la dimension de spectacle (par opposition aux programmes pour enfants à la télévision ou en DVD), l'aspect artistique "fait main" (les costumes, décors et marionnettes de l'association sont superbes), et enfin, la bivalence entre la tradition et la modernité : bien que Guignol existe depuis 1800 et que les Petits Bouffons de Paris suivent la tradition du Guignol parisien, leur humour s'adresse aux enfants et aux adultes avec de nombreuses allusions à l'actualité et à notre vie moderne.

Pour transcrire tout cela, le parti pris du site a été d'être le plus "palpable" possible : de très nombreux éléments (décors, objets, textures) ont été pris en photo numérique ou scannés, puis recomposés en un tout cohérent. Un soin particulier a été apporté aux effets de relief (biseautage, ombres portées), à des contrastes clairs et prononcés, et à la netteté des textures, afin que l'on ait l'impression de pouvoir potentiellement "toucher" le site.

Chaque zone de texte a un support (papier, bois). Un équilibre délicat a été cherché entre un aspect ancien (textures usées, vieux objets) et un côté dynamique et moderne (vivacité des couleurs, photos, animations Flash). Pour restituer l'interactivité et l'ambiance du spectacle vivant, le site comporte de nombreuses vidéos et animations Flash. Une de ces animations, interactive et sonore, permet de manipuler une marionnette dont le cou est télescopique et la tête tourne... une autre parodie le générique du "Cinéma de Minuit" de FR3 en remplaçant les stars du générique par les marionnettes de l'association.

Afin que le client puisse mettre le site à jour le plus facilement possible, sans intermédiaire ni délai, de nombreuses pages sont codées en PHP. Ces pages peuvent être modifiées simplement par formulaire : vous pouvez en cliquant ici manipuler une simulation d'un de ces formulaires, afin d'essayer ses différentes possibilités de mise en page.

La société MEDIkit produit et vend des kits médicaux d'urgence. Pour chaque situation critique (accouchement inopiné, hémorragie, réanimation, etc.) MEDIkit a groupé le matériel nécessaire dans un kit stérile, prêt en toute circonstance, permettant au secouriste d'opérer sans chercher ses outils et sans perdre de temps, donnant ainsi toutes ses chances au patient.

Le site de cette société se devait d'exposer ce concept, de faire connaître ses différent kits, et de permettre la vente en ligne. La ligne graphique devait être très proche des brochures de la société, ces dernières étant extrêmement sobres avec des teintes de vert et de bleu bien spécifiques. Les couleurs et la police de caractères du lettrage des produits étaient également prédéfinies.

Le style sobre des brochures a donc été repris (la cible étant les hôpitaux, les médecins, les ambulanciers, un site trop excentrique n'aurait pas été indiqué), mais des effets de relief donnant un aspect "plastique" au site ont tout de même été ajoutés. L'idée était de donner au site lui-même l'apparence et la texture du matériel médical, propre, avec des rebords et des reflets nets, légèrement brillant.

Dans le même état d'esprit, le lettrage des produits choisi par la société étant barré, la ligne barrant les lettres a été étendue et transformée en ligne d'électrocardiogramme, pour à la fois évoquer le sujet (l'urgence médicale, la problématique de donner le maximum de chances au patient), et pour utiliser cette ligne comme élément de mise en page : séparateur, bordure de menu, soulignement d'un titre, etc.

Cette ligne étant utilisée comme un symbole du site, une animation Flash anime discrètement un électrocardiogramme en haut à gauche avec un "bip" sonore léger mais présent, restituant la tension et l'importance du thème abordé. Le rôle de ce son, discret et non envahissant mais néanmoins persistant, est de restituer l'atmosphère de la situation d'urgence, où le coût d'un kit médical paraît bien mesquin par rapport à l'augmentation du facteur de réussite d'une opération risquée.

L'affichage des produits sur la page d'accueil du site ainsi que la fiche de chaque produit sont gérés par le biai d'une base de données MySQL et traités par PHP. Un formulaire très simple d'utilisation permet à la société de mettre à jour les prix et le contenu de chaque kit en toute indépendance. La partie "vente en ligne" est actuellement en construction.

Mise à jour graphique d'un site déjà existant, généré par PHP à partir d'une base de données MySQL. Le but du "Centre d'Ecodéveloppement & d'Initiative Sociale" est de proposer des formations aux élus Verts ; c'est donc un site s'adressant à un public connu et restreint. L'ancienne version (page d'accueil avec liens rendus muets consultable en cliquant ici) avait beaucoup vieilli graphiquement, et le CEDIS souhaitait rendre le site plus lisible et agréable à l'oeil.

La nouvelle version devait utiliser exactement la même base de données et garder la même répartition de menus et de rubriques, mais être plus claire, plus pratique, plus plaisante à consulter, tout en restant sobre. Les couleurs devaient être minimales et ne présenter qu'une nuance de vert et une nuance d'orangé (la même que celle du logo).

Après quelques essais de maquettes, j'ai décidé de reprendre le style "pastel" du titre pour rendre le site chaleureux et coller au thème de l'écologie, du naturel. Pour améliorer la lisibilité, le site a été rendu extensible horizontalement afin d'utiliser tout la surface de fenêtre de navigation (la version précédente avait une largeur fixe de 730 pixels, sur un fond désagréable à l'oeil). Un fond moins monotone et plus discret a été mis dans la colonne de gauche. Le souligné des liens a été enlevé : la structure du site propose des colonnes remplies de liens, et l'abondance de souligné dans l'ancienne version alourdissait le site ; pour les faire ressortir, des couleurs très différentes pour les liens visités et non visités ont été choisies, et un rollover CSS les allumant sous l'action de la souris a été ajouté.

Le codage de l'HTML a été complexe, puisqu'aucune documentation ne m'a été fournie pour intégrer l'HTML au PHP ; j'avais simplement accès au serveur. J'ai rapidement déterminé que le PHP générait l'HTML à partir de maquettes HTML, et qu'il me suffisait donc de remplacer ces maquettes, mais l'abondance d'erreurs dans l'HTML généré par l'ancienne version (cellules de tableaux inutiles ou fermées deux fois, balises HTML ouvertes et non fermées) a ralenti l'insertion des repères PHP dans les nouvelles maquettes ; puisqu'il m'a fallu à la fois comprendre comment fonctionnait le code, et corriger ses erreurs.

Site réalisé pour une boutique parisienne de vêtements et accessoires sur-mesure en cuir, partagée entre un rez-de-chaussée ordinaire et un sous-sol de vêtements et accessoires érotiques. Le problème majeur de cette boutique était le manque de visibilité : suite à la baisse de pouvoir d'achat des années 2000 (les vêtements en cuir étant devenus un luxe), ses ventes se sont davantage axées sur la partie érotique de l'activité (la clientèle fétichiste dépensant plus facilement pour ce type d'articles) ; mais sans avoir de présence publicitaire dans ce circuit. L'Internet étant bien sûr très important pour la vente de produits érotiques (anonymat, discrétion, facilité de consultation, réseau de liens), la nécessité d'un site Internet était devenue évidente. Un flyer a également été réalisé pour être distribué dans certaines boîtes de nuit.

Les artisans de cette boutique étant totalement novices en ce qui concerne Internet et ne disposant pas de connexion, ils voulaient un site qu'ils n'auraient pas à mettre à jour ou à gérer. Je ne pouvais donc pas faire de véritable catalogue en ligne, d'autant que la création est le principal atout de cette boutique, et devais trouver un autre style pour la présenter. Après recherches, il m'est apparu que la plupart des sites vendant ce type de produits (généralement en prêt-à-porter et tailles standards) ont un design de catalogue dépouillé, en formes pleines et non texturelles, leur principal attrait étant la vente en ligne. Comme mon site ne pouvait avoir les mêmes fonctionnalités, j'ai donc choisi la direction inverse : faire un site qui paraisse lui-même fait dans du cuir, afin de représenter le soin artisanal et la proximité que cette boutique accorde à ses produits et à ses clients grâce à la confection sur-mesure ; afin de mettre en avant les différences et les atouts de cette boutique dans ce secteur.

De nombreuses pièces de cuir de la boutiques ont été photographiées par appareil numérique, puis les images ont été nettoyées, traitées, et harmonisées aux niveaux de la luminosité et des tons. La mise en page est texturelle mais claire et simple, avec des couleurs chaudes. De nombreux motifs sont utilisés plusieurs fois entre les pages pour garder un temps de chargement raisonnable. Les textes sont bilingues Français/Anglais afin de s'ouvrir à la clientèle européenne, qui passe souvent par Paris. Une police de caractères manuscrite a été utilisée pour les titres ; les textes (que j'ai rédigés après entretiens avec les artisans) sont écrits sur fond de papier kraft, que la boutique utilise pour les patrons d'articles sur-mesure.

Une sélection des articles les plus vendeurs est proposée, avec agrandissement possible en cliquant (les quelques agrandissements réservés aux personnes majeures sont protégés par une fenêtre de demande de vérification d'âge). Ces photos n'ont pas été prises par un professionnel, un gros travail de nettoyage (du fond en particulier), d'amélioration et d'harmonisation des tons a donc été réalisé sous Photoshop. Le site a donc avant tout une fonction de flyer, et a été très intéressant à concevoir graphiquement.

Cette commande devait lancer une toute jeune association, le RAVAD, "Réseau d'Assistance aux Victimes d'Agressions et de Discriminations". Le but de cette association est de venir en aide aux victimes d'actes homophobes, leur donner des conseils psychologiques et juridiques, et surtout leur fournir en ligne une liste d'adresses utiles, notamment celles de trois types de spécialistes : avocats, médecins ou associations, tous volontaires pour venir en aide à ces personnes.

Graphiquement, le cahier des charges stipulait que le site devait être accueillant (puisqu'il était destiné à des personnes en détresse), mais il imposait également comme couleurs celles du logo de l'association : du gris, du noir, du blanc et du rose - des couleurs assez froides, similaires à celles de l'association ACT UP, associée à des actions plutôt agressives. Je me suis donc efforcé de distinguer les visuels du site de ceux d'ACT UP, et de les rendre le plus chaleureux possible : formes rondes, douces, effets d'ombrés et de lumière rose diffuse, lignes roses tracées au feutre, fonction de recherche du site accessible par le biais d'un gros bouton évoquant un jouet enfantin ou une forme organique...

Techniquement, un système PHP de recherche par département des coordonnées des spécialistes volontaires a dû être construit, celui-ci devant également afficher les résultats des départements voisins à celui de l'internaute. Pour des questions de commodité et de lisibilité, cette recherche peut se faire soit grâce à une carte de France en Flash (que j'ai dessinée pour l'occasion), soit par formulaire (permettant aussi d'avoir accès aux recherches sur les T.O.M.), les résultats étant ensuite classés et affichés de façon claire et agréable.

L'autre fonction technique à bâtir concernait la mise à jour indépendante de la liste des spécialistes, qui devait pouvoir se faire entièrement par formulaires en ligne par les responsables de l'association. Ces formulaires, permettant d'ajouter des entrées, d'en modifier, ou d'en effacer, sont très simples d'utilisation et similaires à ceux réalisés pour la Société d'Escrime de Lyon (simulation des formulaires de ce dernier site en cliquant ici).

Le site a été ultérieurement remanié et géré par une autre société afin d'y intégrer d'autres moyens de mises à jour, le menu du site a également été refait en Flash. Le design général du site, la carte de France en Flash et le système de recherche de spécialistes par département n'ont cependant pas été modifiés.

Commande d'un club d'escrime lyonnais, la "Société d'Escrime de Lyon", ayant formé de nombreux champions du monde par équipe. L'objectif premier était de faciliter la communication des tarifs, des horaires, du palmarès, des informations internes au club, avec certaines pages en PHP mises à jour par formulaires par le club lui-même.

Comme le club a un historique assez remarquable (Paul Valentin, inventeur de l'épée électrique, était membre de la S.E.L.), j'ai convaincu le club d'également inclure dans le site une présentation générale de l'escrime (pour laquelle j'ai moi-même fait des recherches, et que j'ai entièrement rédigée) ; afin à la fois d'informer les jeunes de l'histoire de ce sport, et de mettre en avant la place qu'y a jouée le club, pour bien sûr attirer de nouveaux adhérents.

Plastiquement, aucune consigne n'a été donnée. La ligne graphique a donc été inspirée de la fresque murale de la salle principale du club (dont on peut voir une version nettoyée sur la première page du site), combinée avec l'esthétique du drapeau olympique : un fond blanc, du noir, des couleurs franches, des lignes nettes. A cela ont été ajoutés de fines lignes droites entrant et sortant de blocs plus larges, guidant la mise en page, et des blocs et titres en forte italique : les premières pour symboliser l'épée ou le fleuret et sa gaine, les seconds pour la dynamique de la "fente avant", l'attaque en escrime.

Compte tenu de son visuel de type vectoriel ("formes pleines"), le site est très rapide à charger. Une animation Flash se trouve sur la seconde page d'accueil. Des mises à jour pour les tarifs, des nouvelles du club, ou une annonce présente sur la page d'accueil peuvent être effectuées par le club en tout indépendance grâce à des pages en PHP mises à jour par formulaire. Vous pouvez découvrir cette interface en manipulant une simulation de ces formulaires.