L’agence de Montpellier de l’entreprise GFI Informatique m’a contacté pour réaliser la démo des capacités d’une IHM de dernière génération : GENESIS64, de l’éditeur américain ICONICS [1]-[2] .

Ayant adhéré aux conditions de confidentialité demandées par AREVA par le biais de l’entreprise GFI, je ne peux publier ici certains documents, y compris certains objets graphiques que j’ai pu réaliser …

Au moment de la mission, l’IHM était adaptée en partie par l’entreprise GFI Informatique, en version 32bits, aux besoin de l’entreprise AREVA de Lattes. Cependant, personne n’avait encore testé ses capacités en version 64bits, dont l’étendue des capacités en terme de graphisme et de représentation 2D et 3D intéressait grandement.

Repéré pour mes capacités d’auto-formation, mes compétences pluri-disciplinaires en Design 2D et 3D, ainsi qu’en design d’interaction via le développement as3 et le design flash, j’ai dû passer par plusieurs phases de réalisation …

Première phase : acquisition, scénarisation, évaluation

En collaboration avec le chef de projet de cette mission, j’ai joué le rôle de réalisateur, d’exécutant, de créatif, et de chef de projet technique dans le domaine Infographie.
Le travail a débuté à partir de documents Powerpoint et Word qui définissaient la structure de la démo, les différentes sections de celle-ci et les points qu’AREVA désirait mettre en avant.

Chaque étape a fait l’objet de contrôles réguliers et de présentations devant les chefs de services compétents tout au long de la mission.

J’ai disposé d’un peu plus d’une semaine pour réaliser mon auto-formation sur la suite logicielle Genesis64, à partir des documents d’aide, de l’aide en ligne et des exemples fournis avec la démo de la suite.
Le reste de cette auto-formation s’est poursuivi en parallèle avec la réalisation de la démo en elle-même tout au long des trois mois de la mission.

Cet apprentissage du logiciel a pu être grandement accéléré par une comparaison avec Flash et l’actionscript 3, ainsi que par mon expérience pratique du design web sur ces six dernières années.

Des croquis pour faire le tri

---

C’est en recherchant les fonctionnalités que suggéraient les demandes contenues dans le scénario du client que j’ai pu gérer deux actions conjointes :
poursuivre l’auto-formation, tout en évaluant la faisabilité de certaines demandes du marketing, et enfin proposer des adaptations ou de nouvelles options pour ce qui n’était pas directement réalisable.

Une fois ces besoins traduits en évaluations de faisabilité, puis en propositions de designs ou d’interactions sous forme de croquis format A4, il fallait mettre en images tout ce qui avait été créé pour le confronter aux personnes compétentes.

Deuxième phase : Maquettes graphiques

Ce sont ces croquis, servant à fixer les idées sur le papier et permettant déjà d’en faire une sorte de « tri mental« , qui ont servi de base à la réalisation des maquettes graphiques.
Ces dernières montrent les principales branches de la démo. Elles ont été réalisées afin de susciter les avis des ingénieurs, des chefs de service et des décisionnaires dans les différents domaines concernés par l’IHM.

---

---

---

Ecran d’accueil, barre d’icône regroupant les principales fonctionnalités génériques, barre de navigation synthétique pour un affichage rapide des vues métier cruciales, répartitions hiérarchique, vues marketing, vues analytiques, vues opérateur, pertinence des informations affichées, profondeur des niveaux d’accès, nombre de clics, etc …

Ce sont quelques-uns des nombreux points qui ont dû être pris en compte dans la réalisation de ces maquettes afin de valider tous les points décisifs qui font une interface graphique fonctionnelle et agréable a utiliser :
design graphique et design d’interaction, pertinence des données présentées, accessibilité, rapidité d’exécution.
Tous ces points, et d’autres, réunis, forment ce qu’on appelle l’expérience utilisateur.

Tous les intervenants et décisionnaires de cette démo doivent la valider à un fort pourcentage [3], avant de passer au stade de réalisation fonctionnelle de la démo elle-même.

Chaque image contient des détails texte sur les points qu’elle illustre, n’hésitez pas à cliquer pour en savoir plus …

[1] http://www.iconics.fr/
[2] http://www.iconics.com/
[3] parce que certains points nécessitent d’en équilibrer d’autres, tout le monde ne peut être pleinement satisfait, il faut le savoir et le communiquer au client dès le début de la démarche

C’est donc avec un nouveau moteur que le site redémarre : en lieu et place de l’excellent Dotclear 2, les pages qui s’offrent à vos regards seront désormais propulsées par le fameux et donc très connu WordPress.
Un article de blog en préparation sur le pourquoi de ce changement, après bientôt, quoi, cinq ans de fidélité à Dotclear …

Dès maintenant, un article dans la rubrique "Portfolio, Webdesign", sur la version 0.3 du site BDFWeb, site qui n’est hélas plus visible en ligne à ce jour, mais il faut bien que les choses évoluent.

En préparation :

Probablement trois billets, un pour chaque mois passé là-bas, sur les productions réalisées durant ma mission en collaboration avec la société Gfi Informatique, pour leur client Areva/Schneider.
J’ai eu l’occasion de modéliser et d’animer des éoliennes en pleine mer pour une démo d’IHM sur un parc éolien, avec plate-forme de sous-station électrique et centrale-relais à terre, un régal !
Il y a des rendus 3D qui valent le détour, Blender ne m’a pas déçu !

Six mois après le style aquavista, de nouveaux partenariats s’étaient créés, la thématique des énergies renouvelables commençait à devenir de plus en plus d’actualité suite au « grenelle de l’environnement » : il fallait donc renouveler le site, contenus et aspects.

Le design graphique du site devait tendre vers quelque chose de plus posé, de plus vert, et entamer une transition de la charte graphique originale vers des couleurs plus variées et saturées …

De la méthode …

Très vite, j’ai réalisé une maquette photoshop à partir de captures de la dernière version en date, puis en actualisant la palette de couleurs.

Je faisais un pari risqué : réintroduire le orange vif, que le pdg de l’entreprise avait expressément fait enlever dans la dernière version de la charte graphique de la société, un peu avant mon arrivée.

La maquette a été approuvée, et j’ai commencé à réaliser des éléments d’interface pour le site, afin de disposer d’un vocabulaire graphique me permettant de décliner tous les contenus existants.

De la précision …

---

Un des axes de communication de BDFWeb reposait sur l’accueil du client, que l’ensemble de l’interface du site (autant fonctionnelle qu’institutionnelle, par ailleurs) ait à la fois le côté accueillant du "chez-soi" qui donne envie de revenir, et conserve également un côté structuré, professionnel, concis, propre …
Ces choix d’ambiance constituaient les deux points d’équilibre d’une ligne de communication qu’il a fallu équilibrer.

Le côté souplesse de la méthode : adaptabilité

Après de nombreux allers-retours entre le marketing, le commerce, et la direction, le design et la composition des contenus fut posée.
Tout au long de cette dernière étape, entre la maquette et la réalisation au stade « beta », j’ai quitté mes pixels et la suite Adobe pour passer directement sous Eclipse en réalisant des "maquettes fonctionnelles" à l’aide des css et du xHtml, ainsi que de PHP pour la partie base de données …
Cela a permis une grande souplesse au cours de la réalisation, en s’adaptant au fur-et-à-mesure aux demandes de modifications des différents décisionnaires tout en respectant les délais fixés !

J’utilisais Flash un peu machinalement ces dernières années, pour pondre de la bannière et des animations réparties dans l’ensemble des sites que j’ai réalisés.

Il y a maintenant un peu plus d’un an, j’ai décidé de passer à la vitesse supérieure : du full Flash, du web 2.0 … Le côté délicat : je n’avais rien d’officiel à présenter en exemple dans mon portfolio.

Une récente expérience de trois jours en tant que freelance dans une agence de création numérique m’a fait réaliser qu’il fallait montrer, et montrer vite : peu de texte, surtout des images, et si possible : beaucoup d’animation, beaucoup de vidéo.

Arrive donc prochainement et progressivement une nouvelle version de ce site, incluant tout ce beau web 2.0 …

Au programme : une demoreel en en-tête de site, du papervision pour la navigation (bientôt des articles de blog pour des infos et pas-à-pas), et des vidéos, des animations flash et javascript en jQuery et jQuery UI …

A bientôt, et n’hésitez pas à me contacter !

J’ai réuni dans cet article la plupart des travaux représentatifs de mes réalisations Flash pour la société BDF Web.
Ces animation ou démos on été mises en ligne en 2007 et 2008, la plupart sur des briefs, ou bien des propositions de ma part.

La plupart étaient faites sous forme de croquis plus ou moins poussés, communiqués en réunion tous les lundis sauf exception.
Je les publierai ultérieurement dans la section Illustration, et placerai un lien à cet endroit même dès qu’elle sera en ligne.

Une mascotte d’anniversaire :

La société BDFWeb fêtait sa première année de services innovants, proposant une alternative intéressante à une bourse de fret historique, qui semblait se contenter de sa position quasi-monopolistique sur le marché en Europe, sans plus guère innover dans les services qu’elle proposait.

Il fallait marquer l’évènement, il a été décidé de créer une mascotte pour communiquer à ce sujet.

Un été actif !

Les transporteurs et les affréteurs ne chôment pas pendant la période d’été, il fallait leur proposer des offres attractives, montrant que la société ne chômait pas non plus !

Le thème des congés d’été, synonyme de chaleur, de détente et de repos, était tout-de-même positif ! Il a été choisi de communiquer sur cet axe, avec la baseline « Vous pouvez vous reposer sur nous« , soulignant par-là que la société s’occupait de ses clients pour leur permettre à eux-aussi de se détendre.

… Puis la rentrée bien remplie

La rentrée, la reprise, le retour après un repos bien mérité, prêt à repartir à la charge, remplis d’une énergie renouvelée pour aller de l’avant !
Voilà une autre animation Flash proposant des promotions sur les recharges en Carte Bleue des comptes clients de l’interface fonctionnelle du site.

Des partenaires supplémentaires, et qui s’impliquent !

L’alternative qu’apporte BDFWeb dans ce segment des bourses de fret à très rapidement suscité l’intérêt, et à fini sur le long terme par attirer l’attention d’acteurs majeurs dans le domaine du transport.
C’est ainsi que des organisations et des fédérations se sont engagés aux côtés de BDFWeb, gage et témoignage concret de l’efficacité et du réel apport des services en ligne de la société pour toute la profession du transport.

Une Bourse de Fret en constante innovation

L’innovation et la rapidité avec laquelle elle l’aura mise en oeuvre, aura eu un effet positif pour tout le domaine du transport : c’est qu’elle aura poussé la concurrence qui avait tendance à s’institutionnaliser à se remettre en mouvement pour proposer quelques rafraîchissements et éclaircissements de son offre.
En 2008, toujours active et réactive, BDFWeb aura continué à proposer des innovations à ses clients, dans le but de leur faire gagner en temps et en économies de carburant !

Les animations sympatiques qui suivent l’illustrent assez bien, parrainage, service d’appel automatisé, offres sponsorisées pour des résultats plus rapides, tout y est.

Et c’était attendu depuis longtemps !
L’hiver semble avoir été long, peu d’événements marquants dans l’actualité IT pour ces deux derniers mois … Enfin, à mon goût.

Le remplacement des énergies fossiles par des énergies propres et renouvelables étant d’actualité (et c’est tant mieux), il a fallu trouver une source alternative de chauffage : j’ai donc fait tourner mon quad-core à fond !
Tests du moteur de rendu Indigo Renderer, modélisations supplémentaires sur le projet de la maison aux arbres, grosses recherches de docs sur le C, le C++, et recherches de sources et conseils pour l’optimisation de projets actionscripts dans l’IDE de FlexBuilder3.

La section Flash de mon Portfolio est en ligne ! 

Il aura fallu bien du temps, mais disons que trois ans de Flash intensif, ça ne se mets pas en ligne sans réfléchir un peu, et il aura fallu de plus régler quelques contraintes de prise en charge de Flash par le plugin javascript …

Un salon important dans le domaine des énergies renouvelables se déroulant en fin d’année, l’entreprise Higéo avait besoin d’affiner le design de son site.
Bien qu’ayant parfaitement accompli son but, celui-ci nécessitait maintenant d’évoluer avec une nouvelle démarche marketing, servie par une nouvelle conception graphique.

Regrouper les documents, s’inspirer d’une charte existante

L’entreprise utilisait déjà une série de documents imprimés possédant une identité assez forte et intéressante, avec des couleurs bien saturées, aisément portables sur le web en RVB.
Situation idéale : pas besoin cette fois-ci de penser à la conversion des couleurs pour de futurs documents « print » en créant mon nuancier pour le site, le trajet à faire étant l’inverse !
Il s’agissait ici de récupérer un nuancier print existant, de l’adapter aux contraintes du web, voire de l’étendre.

J’ai donc récupéré des exports au format jpeg d’une plaquette et d’une chemise existantes utilisée par le client.
De même, j’ai obtenu un nuancier CMJN/Pantone de base, auquel j’ai ajouté quelques couleurs pour équilibrer et réchauffer l’ensemble qui me semblait manquer quelque peu de contraste tel quel, bien que le rouge particulier choisi par le graphiste précédent ait déjà possédé pas mal de personnalité.

Décliner, rechercher, affiner

La charte des couleurs pré-établie, il fallait créer un vocabulaire visuel pour composer les contenus, les mettre en page.

Ces éléments constitueront le style du site à proprement parler. Il ne s’agit pas seulement de choix de typographies adaptées à Internet et ses contraintes, ou de style de titre ou de paragraphe.
Mais il faut aussi repérer les éléments à présenter, les rendre facilement identifiables, en les insérant dans l’ensemble du site, sans qu’ils donnent l’impression de « pièces rapportées » :
Documents techniques, paragraphes explicatifs, dates, nouvelles brèves, formulaire de contact, panneau de message d’erreurs de ce même formulaire, etc …

Quelques recherches pour la page d’accueil

Dans l’ordre : Une ébauche rapide, une modification après retour client, une ré-orientation avec mise en accent sur l’argumentaire de droite en Flash/As3, invitant le visiteur dans sa consultation du site.
C’est d’ailleurs cette dernière proposition qui sera retenue pour fixer l’ensemble du style du site.

Le style du site dans son ensemble

Les images suivantes sont des captures du site en ligne, tel que vous pouviez le voir au 20 Janvier 2010 :

---

Tous mes vœux de prospérité, de réussite et de santé ! (libre à vous d’en changer l’ordre, par ailleurs )

Je crois que cette année sera faite pour une grande part de ce que nous aurons choisi qu’elle devienne.
Je sais bien qu’on ne maîtrise pas tout, que l’imprévu est le sel de la vie (et la vie est parfois un peu trop salée, dirons-nous ^___^), mais une grande partie de ce que nous vivons est le résultat de bien des décisions que nous avons prises.

C’est pourquoi, pour clore ces simples vœux, je vous souhaite enfin de faire les meilleurs choix possibles pour cette année 2010 : ceux qui produiront ce que vous en attendez, et qui iront même au-delà de ce que vous en aurez souhaité !

Bonne année à toutes et à tous !

* non, non, je ne me suis pas trompé sur le sens du signe entre 2009 et 2010 …

Je peux intervenir sur une partie seulement de la chaîne de travail d’un site.

Cela demande de la méthode, des capacités d’adaptation, le sens de la communication et du travail en équipe !
C’est un avantage de posséder et exercer soi-même ses compétences dans chacun des domaines qui constitue le flux de production d’un site !

Cela permet de comprendre les difficultés et les attentes, par exemple d’un graphiste ou d’un développeur, et d’aider à la communication, la compréhension des besoins de l’équipe … et de ceux du client !

Le graphiste aime voir ses idées et son travail de recherche graphique respecté, une mise en page qui bien qu’intégrant les contraintes du support Internet respecte autant que possible ce qui a été fourni en amont est d’autant apprécié, notamment en matière de typographie, par exemple …

S’Intégrer pour intégrer …

Étant intervenu sur la version 2.3 du site de la conception à la réalisation graphique, jusqu’à l’intégration du code, j’étais plutôt satisfait de cette version.
Mais six mois plus tard, il fallait rapidement faire un constat : la version devenait déjà obsolète, et si elle avait satisfait un temps au besoin en communication, elle était maintenant devenue inefficace.

Je n’avais plus le temps de m’occuper du graphisme du site, occupé à préparer un passage complet du site sur un CMS, ainsi que son intégration dans un SI.

Il fut décidé en interne de faire appel directement aux compétences de la graphiste et de la directrice marketing de la société sur ce projet, qui s’insérait alors sur une campagne de diffusion appuyée à la télévision.
Résultat : une maquette de site plus ciblée dans la campagne en cours, avec des tons de couleurs plus axés marketing que simplement communication, ancien axe de travail de la dernière version.

Un travail ajusté dynamiquement à la demande

---

Il fallait récupérer la maquette Photoshop de notre graphiste émérite pour en faire l’intégration (découpage des éléments, adaptation aux contraintes du net, rédaction du code).
J’ai trouvé que récupérer un travail graphique et marketing bien fait était aussi stimulant de le faire moi-même.

Cela permet de mieux se concentrer sur un domaine précis et d’être plus efficace sur un minimum de temps, contre une période peut-être un peu moins courte lorsqu’on intervient sur tous les postes de réalisation d’un site.

Le nouveau design fût intégré en cinq jours, version flash de la publicité 3D passant à la télé, et bannière flash pour la grille de diffusion et de partenariats comprises !

Le site est encore visible à cette adresse, bien que légèrement dégradé dans sa composition graphique par des mises-à-jours ponctuelles, contraintes de production oblige :
http://www.reseauatoutsoleil.com

Je travaille mon design en pensant à l’articulation des textes, des images, des médias, en les mettant en rapport avec les besoins du client : sa cible, mais aussi ses objectifs, ses propres intentions ou idées.

Ce processus de conception tend plus vers la démarche d’un designer d’interactions que celle d’un designer graphique.

Un travail réfléchi …

Conscient des intérêts à respecter au mieux certaines recommandations (celles du W3C notamment), je m’attache, toute les fois où c’est possible, à ne pas seulement adapter une maquette photoshop en pensant seulement à l’aspect du site, mais aussi à ses fonctions, ses objectifs, les attentes de ceux et celles qui vont le visiter …

Sans prétendre être ergonome, un métier à part entière qui s’exerce également vers l’Internet, j’ai été sensibilisé a cet aspect de la navigation d’un site au travers de nombreuses publications, tant sur Internet que par les autres médias.

www.bdfweb.com

La page d’accueil du site telle quelle, avant mon intervention sur le design complet :

Cela ne se voit évidemment pas, mais le design était en HTML4, en tables, qui plus est imbriquées. Le code était malheureusement lourd pour un site institutionnel simple.
Il est aujourd’hui communément admis qu’un code qui valide un minimum optimise le référencement naturel et fait partie du minimum des bonnes pratiques, mais a l’époque, il a fallu le vendre au directeur commercial ainsi qu’au PDG des sociétés du groupe !

www.bdfweb.com, version "Aquavista"

Il y a ensuite eu une version 0.2, qui a essentiellement consisté à passer le code HTML4 en xHTML, ainsi qu’a intégrer une demande précise du client : réaliser un nouvel habillage pour le site, dans un style proche du dernier système de Microsoft ainsi que de celui d’Apple (Mac OSX Tiger, à la date de la réalisation).
Le ton était donné : des formes arrondies, douces, des lueurs insérées dans du verre, des reflets, des ombres, des caustiques, etc …
Bien que pas particulièrement adepte de ce style que j’appelle du « Eye Candy » (traduisible plus ou moins par "tape-à-l’œil" ) l’ensemble répondait plutôt bien à la demande, qui a tenu en place 6 mois, avant que le PDG demande un nouveau design pour le site …