Bienvenue sur mon blog !

Le blog a été un peu en veille ces dernières semaines, la fin d’année a été chargée en travail ! J’ai entre autres travaillé à la charte graphique de la refonte du site de Médecins du Monde. Il reste des ajustements à faire en intégration… (travail réalisé dans le cadre de ma collaboration avec l’agence Ecedi)

Je viens aussi de finir une application de e-learning pour Lafarge, composé d’environ 70 écrans, avec plusieurs jeux, beaucoup d’illustrations et animations… C’est pour une diffusion interne donc je ne peux montrer le résultat final ici, voici seulement quelques images.

Ci-dessous une animation montrant les étapes de réalisation d’une maison maçonnée, en mode isométrique :

J’ai également réalisé une illustration dans un style plus cartoon, pour une série de cartes postales qui vont accompagner le projet :

(travail réalisé dans le cadre de ma collaboration avec l’agence Cavernamuth)

J’ai aussi travaillé à la réalisation de documents pour Compagnons de Cordée :

Mais aussi des maquettes d’annonces de recrutement online, toujours via Compagnons de cordée. Ces annonces sont diffusées sur différents sites de recrutement. L’intégration html finale a été réalisée par Pierre Canthelou.

J’ai aussi travaillé à la charte graphique d’une boutique internet de café, des animations Flash pour un site de services pour téléphone mobile, des jeux en Flash pour une prochaine expo de la Cité des sciences… Ces projets sont finis mais pas encore en ligne officiellement, je les montrerai dès que je peux. Je voudrais aussi enfin pouvoir travailler à la refonte de mon site portfolio (et ce blog changera aussi d’interface en même temps), j’ai un projet d’animation perso, Clonk à finir… Bref, pas de quoi m’ennuyer, et mon planning de travail est déjà complet jusqu’en février ! L’année commence donc sur les chapeaux de roues… En attendant de pouvoir vous montrer d’autres choses ici, je vous souhaite à tous de très bonnes fêtes de fin d’année !

Faites tourner :

Areva T&D lance un concours sur l’innovation, j’ai été chargé de travailler sur la création du logo, site internet, et les différents supports liés à cette opération.

Voici les propositions de logos que j’ai faites dans un premier temps :

C’est la version 2 qui a été retenue. J’ai ensuite travaillé sur la charte graphique du site internet.

La première proposition qui a été faite :

Il m’a été demandé d’alléger un peu le fond, et divers ajustements, pour arriver à la version finale :

Cliquer sur l’image pour aller voir le site complet, ou cliquez ici.

J’ai aussi réalisé des maquettes pour des posters, cartes postales, emailing…

Et également des bannières pubs :

Cliquer sur l’image pour voir la bannière en Flash.

Faites tourner :

Bon, ma série des « link of the week » s’est un peu transformé en « link of the year », vu la fréquence…

Il faut dire que je ne trouve pas tant que ca de liens intéressants à partager… Voici quand même une dizaine de liens !
Tout d’abord voici 3 sites que j’ai trouvé simplement beaux :

J’ai particulièrement trouvé intéressant et astucieux le parti-prix de « casser » les verticales par les formes de couleur en fond de page. La palette de couleur est elle aussi agréable.

J’aime beaucoup le visuel du header, la structure de la page est intéressante aussi, bref une charte très réussie à mon goût !

Pour ce dernier, je ne suis pas fan de la mise en page, mais j’aime beaucoup la gamme de couleurs utilisée.

Pour continuer, un site de recherche d’icones.

Il en existe déjà plusieurs, en voici une sélection, mais c’est le premier à ma connaissance en français, ce qui est surtout intéressant pour la recherche par critères, on ne sait pas toujours la traduction des termes…

Donc une bonne initiative, qu’il faut à mon soutenir !

Pour finir, voici 6 sites dédiées à Wordpress, mon « top 6″  quand je recherche des infos sur ce moteur ! Wpchannel propose des tutoriaux vidéos, en français, ce qui est vraiment très pratique ! L’auteur « commet » aussi le site Protuts, qui est une mine d’infos, avec des tutoriels aussi. Idem pour Geekeries, Fran6 et les autres indiqués.

Voilà, c’est tout pour cette fois !

Faites tourner :

Comme annoncé précédemment, je vais refaire entièrement mon site portfolio. Mon but final est d’avoir un site à la fois attractif et original visuellement, tout en ayant une facilité de mise à jour. J’ai donc opté pour le principe d’un site basé sur le moteur Wordpress, qui me permettra d’avoir un module d’administration « tout fait », mais aussi de bons outils de tris croisés (catégories, tags, moteur de recherche…). La difficulté est donc de partir d’un outil (Wordpress) certes très puissant, mais qui a une structure assez « classique ». Donc un gros travail de personnalisation !

Je suis parti d’un thème de base, pour arriver à cette structure. Vous pouvez passer d’un thème à l’autre via le menu déroulant « theme switcher » (tnet v00, tnet v01…). Pour l’instant aucun travail graphique, cette étape viendra plus tard !

J’ai donc commencé en farfouillant les CSS et les ai modifiés en fonction de ce que je voulais. Pour cette partie, un outil très très pratique est l’extension Firebug de Firefox. Une fois installé, cela ajoute en bas de la fenêtre de Firefox une petite icone, qui permet d’afficher tous le code, structure, css de la page visitées. Indispensable pour bien appréhender comment est construite une page, et donc la modifier.

Regardez par exemple dans la capture d’écran ci-dessous : j’ai activé Firebug et le mode « inspection », ensuite je survole n’importe quel élément dans la page, et en bas s’affiche le code correspondant, la classe CSS, etc. Et à droite les attributs de la classe, dans quel fichier, à quel numéro de ligne, etc.

Donc j’ai modifié les attributs CSS des zones qui m’interessaient, à savoir les sidebar, header, etc. selon le schéma suivant :

Je suis donc parti de ça :

pour arriver à ça :

Donc une page très très large (8000 pixels), divisée en 4 sections. Pour naviguer entre ces sections horizontales, j’ai voulu utiliser une bibliothèque javascript qui permet un défilement progressif dans les liens « ancre » d’une page. Il s’agit de « Tiny scrolling« . Un exemple de site utilisant ce javascript : Horizontal way ou encore celui-ci qui est plus proche de ce que je veux faire.

Pas de souci pour intégrer le javascript à Wordpress, mais première déconvenue, dans mon cas le contenu des pages autres que le portfolio seront en Flash, et les liens dans les Flash ne fonctionnaient pas en « progressif ». Nouveau farfouillage en ligne, pour tomber sur un commentaire sur le site du script, ou une personne fourni une version « personnalisée » du script, qui selon lui fonctionne avec du Flash. Re-installation, cette fois les liens depuis un fichier Flash fonctionnent bien, mais au passage c’est le scroll avec la molette de souris qui ne fonctionne plus ! J’ai donc passé un peu de temps à comparer les 2 fichiers javascripts, pour récupérer la molette sur la version compatible Flash… sachant que je ne suis pas du tout programmeur, ca a été un peu laborieux, mais ca semble fonctionner (sauf sur IE).

Ensuite, il a fallu régler un autre souci : la partie portfolio, donc avec les articles Wordpress, sont en 2e section, donc les liens internes à Wordpress devaient intégrer le lien ancre correspondant. J’ai essayé de jouer avec les réglages de permaliens, sans succés. J’ai donc été demander de l’aide sur le forum Wordpress… La discussion est visible ici. Et donc grâce à l’aide de « Gaz pumped » et « Comme une image« , qui m’a gentiment écrit un filtre php qui permet d’ajouter le lien ancre automatiquement !

Voilà ou j’en suis ! La base « technique » est donc en place, maintenant je vais pouvoir m’atteler à la partie qui m’est plus « facile » : le graphisme ! Et ensuite, le remplissage… A suivre !

Faites tourner :

Dans le même but que pour la note précédente, c’est à dire pour les grille de rentrée des médias, j’ai travaillé sur la réalisation d’un site entièrement en Flash, pour la radio RTL.

Le résultat est visible ici : www.rtl2009.fr

Réalisé dans le cadre de ma collaboration avec l’agence ComCiComCa.

Faites tourner :