e-tsuki e-tsuki fut mon premier site à voir le jour sur le web, sortant du simple cadre universitaire. Axé vers les jeunes dessinateurs influencés par le Japon, il me format aux armes du webmaster, en me donnant une première approche de la pratique. Installation de forum, modération, mes connaissances théoriques étaient mises en pratique. Le graphisme que je vous montre ici etait la troisième version, un site n'est pas figé dans le temps mais doit toujours suivre l'air du temps, évoluer, progresser.

e-tsuki2 Ce site fut réalisé par la méthode classique. Après avoir fait un design général sur papier, puis sur illustrator ou freehand, on passe au découpage et à l'intégration. En utilisant des tables (qui sont sémantiquement réservées aux données tabulaires), en mêlant graphisme et contenu, en ne faisant pas attention à rendre le site accessible à n'importe quel navigateur (à l'époque, l'hégémonie d'Internet Explorer était devenue totale). Cette façon de faire est assez directe, on construit le site au fur et à mesure. L'énorme désavantage: un tel site est très difficile à actualiser ou à changer le design, une refonte graphique équivaut à tout refaire de zéro. Pour ce site, j'ai en plus ajouté flash, sans penser aux personnes qui ne l'auraient pas. Résultat: impossible pour quelqu'un qui n'a pas flash player d'accéder au contenu d'e-tsuki.

novaexpo Lors de mon stage chez SiteWork, il me fut demandé de réaliser une série de templates (designs génériques) et un site pour commercialiser ses mêmes templates. Il s'agissait de faire très simple, les templates seraient vendus bon marché par la suite à des petites entreprises, commerçants ou particuliers. En ce qui concerne le graphisme de novaexpo, et c'était le cas également pour le site d'e-tsuki, mon principal objectif était de faire un design liquide (occupant l'écran de l'utilisateur dans toute sa largeur, s'adaptant á la résolution). Je dois dire que faire des sites qui soient vus correctement chez le maximum de personnes est mon grand cheval de bataille sur le web, et l'adaptation des designs aux différentes résolutions d'un écran un défi. Voyez vous même: en redimensionnant la fenêtre de votre navigateur, vous verrez mon site (e-Jori) s'adapter aux nouvelles conditions d'affichage. Vous pouvez observer le design du portail de novaexpo ici. Le logo, le fond en 3D et le flash ont été également réalisés par mes soins.

Quelques templates réalisés lors du stage:

templarios Un petit travail réalisé pour un hôtel. À ce moment j'avais compris que flash ne devait pas se superposer complètement au html normal, un site qui aurait un fort trafic de tout horizons se doit d'être simple. Nous réduirons donc flash à un simple "bonus" graphique. L'erreur à éviter: mettre les boutons dans le fichier de flash, obligeant l'internaute à attendre que flash se charge pour pouvoir changer de page, ou empêchant carrément quelqu'un qui n'aurait pas flash de naviguer. Ah, bien entendu, tout élément flash doit être un bonus et non pas une tare lors du chargement, les fichiers doivent être donc de taille très réduite.

megalojas Megalojas est un site encore en construction, pour un futur portail de plusieurs magasins en ligne. Chaque magasin est basé sur le logiciel libre osCommerce. J'ai également réalisé les magasins en ligne, en adaptant les templates d'osCommerce au design que j'avais créé auparavant (charte graphique, logos).


creativesoft Sur ce site, réalisé pour une entreprise de création de logiciels, j'abandonne enfin les tableaux et passe au design moderne: utilisation d'une feuille de style pour tout ce qui est design et graphisme, standards du web. Ainsi, le site est accessible pour tout le monde, quelque soit son navigateur, y compris les navigateurs texte. De plus, l'utilisation d'une feuille de style qui sépare complètement le graphisme du contenu permet une très grande facilité pour un éventuel redesign du site, on ne touche plus au contenu. De plus, pour faire un redesign global, on ne modifie qu'un seul fichier (la feuille de style), inutile de changer toutes les pages du site (on comprend tout de suite l'avantage lorsque notre site peut avoir plusieurs centaines de pages différentes).

e-Kaki e-Kaki est sans aucun doute mon principal projet personnel, un site qui permet aux artistes de s'exprimer sur le web et qui rencontre un franc succès, pour un public si ciblé, nous venons d'atteindre les 100 000 visiteurs uniques. Codé selon les préceptes du consortium W3C, le haut niveau d'exigence est évident. Il faut afficher dans les meilleures conditions les oeuvres de nos membres, ce qui implique un design liquide et non intrusif (on se doit de valoriser le contenu avant tout autre chose, un graphisme trop présent risque d'éclipser l'importance des oeuvres exposées). De plus, le fait de séparer le design du contenu permet de proposer à nos utilisateurs le choix entre plusieurs templates, chacun décide ainsi de lui même quel graphisme il préfère pour visualiser e-Kaki. Cette caractéristique nous a aussi permis de faire un design qui change selon l'heure de la journée: sur le forum, on sait tout de suite si il fait nuit ou pas ;)


Finalement, je réalise actuellement des thèmes pour le logiciel de blog dotclear. En un clin d'oeil, je peux changer l'aspect visuel de mon site, simplement en choisissant un autre thème dans l'interface d'administration. Tous sont en xhtml strict et css2.


liquidcard Thème réalisé pour le site MangaStyl', un point de rencontre de tous les artistes influencés par le Japon et l'Asie en général.


liquidcard Le thème Mozaïk, une adaptation d'un ancien template que j'avais réalisé pour les forums PHPBB.


liquidcard Le thème Liquid Card, l'évolution du thème de mon site personnel en thème "tout public", dont vous pouvez voir une démo ici.