Le projet

Le blog du GIe Espace innovation est un projet initié par les trois sociétés RC&A, Factorielles et Avensi Consulting.

Le but du projet est de créer une tribune d’expression pour le GIE avec une forte importance donnée à la participation et réactions des visiteurs/lecteurs.

Cahier des charges :

Nous fixons un rendez-vous physique pour parler du projet, dégager les pistes de travail initiales tant d’un point de vue technique que graphique.

Créer un habillage personnalisé pour le blog du GIE Espace Innovation hébergé sous plateforme Typepad.

Rechercher et intégrer tout élément complémentaire nécessaire au bon fonctionnement du blog.

La cible client du blog : cabinet comptables, experts comptables qui sont le coeur de cible des 3 sociétés fondatrices du GIE.

Les textes seront rédigés par le client, ils sont déjà en partie réalisés et seront finalisés lors de la phase de production.

Il y aura certaines pages considérées comme statiques : A propos, Actualités générales, Contact.

La présentation générale de l’information devra tourner autour de ce schéma :

• Bandeau du haut : Logo EI + slogan Puis à droite, logos des partenaires
• Onglets : Accueil, A propos, Actualités, Contact
• Article (2/3 de la page) : Date de l?article – Titre de l?article – Auteur – Version imprimable – Faire suivre cet article – Lire la suite?
• Bandeau de droite : Rechercher – S?inscrire à la newsletter – Syndication – Les commentaires récents – Les notes récentes – Archives – Catégories – Liens utiles (avec logo)
• Bandeau bas de page : Différentes mentions – Haut de page – Accueil

Quelques aménagements ont été réalisés par la suite pour cause de limitations de possibilités de personnalisations « dynamiques » de l’architecture des blogs typepad hébergés. Ces aménagements simplifiaient le travail à effectuer et évitaient d’avoir à décomposer l’ensemble des modules/boucles intégrés dans les pages de template typepad.

En nous basant sur différents types de design existants et sur l’étude de la cible client, nous déterminons l’esprit graphique qui devra être donné au blog : Clair, lisible, efficace, professionnel, « classe ».

Comme il s’agit d’un projet suivi et piloté par plusieurs personnes géographiquement éloignées, un espace de collaboration et d’information est créé en ligne pour que chacun puisse suivre les évolutions du dossier au fur et à mesure de son avancement. Cet espace est secondé par la mise en place d’une « mailing list » classique couplée à un abonnement par mail au flux RSS de l’espace de collaboration : Tous les participants au projet sont prévenus par mail dss publication d’un nouveau contenu.

Passons à la production.

Le logo

Le logo est déjà existant, il servira donc de base à la construction chromatique de l’ensemble du graphisme : bleu, vert, orange et bien sûr, du gris.

L’interface graphique du site

Le layout général

Suite à différentes discussions le contenu général a été un peu repensé et l’architecture a été revue pour l’usage à court terme du blog et la prise en compte de son évolution future.

Voici la première pré-maquette proposée :

Oui, je pousse toujours mes pré-maquettes assez loin, souvent proches du rendu final d’ailleurs et ce d’autant plus que la piste de travail est claire.

Après confrontation de la maquette avec les clients, plusieurs modifications sont effectuées :

• La couleur Orange est trop dominante, étant donné que c’est un peu la couleur « affiliée » au RSS, il est hors de question de changer la couleur de ce pavé. De plus le titre orange, doit le rester, pour ne pas déséquilibrer l’ordre des couleurs et le balisage de lecture créé par les blocs verts (date et bloc de colonne de droite en diagonale). Nous allons donc opter pour un remplacement des couleurs des onglets vers du gris, ce qu’il y a de plus neutre.
• Les logos en haut à droite ne sont pas assez mis en avant, il va donc falloir modifier cette partie pour donner à chaque logo d’entreprise la visibilité qu’il mérite. Décision est prise d’essayer d’en faire une animation ou les logos seront affichés les uns après les autres.
• Pour la colonne de droite, l’ensemble est validé (en attendant l’ajout de logos liés aux derniers liens du bas) sauf le bleu utilisé qui est trop aérien, trop léger, nous allons essayer de lui trouver une teinte plus soutenue.

Ce qui nous donne la version suivante (sans les logos qui se retrouvent maintenant à part) :

Qui vous semble forcément très proche, mais les petits détails de modification sont très importants avec par exemple, l’ajout d’un deuxieme article dans la maquette pour que le client se rende bien compte du rendu final potentiel des articles « en résumé » et du rapport de force entre les gris typographiques et les blocs d’information de la colonne de droite.

Le bleu des blocs n’est pas encore assez soutenu, je vais donc aller directement au bleu le plus foncé que l’on retrouve dans le logo. Les liens de bas de page vont être remontés dans le bloc blanc d’information principale pour leur donner une meilleure lisibilité.

Le rendu final

Le plus simple est d’aller voir directement le site en ligne à cette adresse : http://www.espace-innovation.fr/

Vous y trouverez quelques variations mineures par rapport à la maquette pour une simple raison, je n’ai pas la main totale sur la structuration html car nous sommes dans le cas d’un produit « tout-en-un » hébergé.

En fait, il est possible de pousser encore plus loin la personnalisation graphique d’un blog typepad, mais le ratio temps passé/utilité n’est pas intéressant, d’autant plus que c’est prendre le risque que vos modifications ne survivent pas à une mise à jour du moteur typepad.

Technologie employée

C’est un blog typepad, tout simplement. Comme vous pouvez le voir, il est fort possible de totalement personnaliser un blog typepad.

Les besoins en terme de graphisme ont obligé une restructuration avancée du rendu html du blog, mais il est fort possible d’arriver à des designs évolués en gardant la structure par défaut, il faut dans ce cas s’adapter, ce qui n’est pas toujours simple.

Si je devais avoir un reproche à faire à typepad, c’est l’impossibilité de créer un template sur mesure de la partie de gestion des commentaires, de fait j’ai été obligé de m’appuyer sur la structure typepad pour leur donner un habillage en adéquation avec celui du blog :

Pensez-y si on vous commande un habillage de blog typepad, car si vous repartez d’une feuille de style vierge appliquée à une structure html que vous aurez créée sur mesure, cette partie ne sera plus habillée du tout, ce qui fait désordre.

Cerise sur le gateau

Le GIE a mis en place un mailing pour communiquer sur son blog et son actualité, c’est donc tout naturellement que nous avons créé une matrice html dont la charte graphique est proche de celle du blog :

Avec la prise en compte de la possibilité des clients mails à ne pas afficher les images ou à les bloquer :

Ce qui fait que le mail reste lisible, ce qui n’est pas le cas de nombreux mails de prospection que je reçois chaque jour.

Pour finir

Un travail très intéressant, des clients avec un projet pensé et travaillé mais ouverts aux conseils d’un professionnel du secteur, ce qui est très appréciable.

La maquette initiale a presque coulé de source, le travail en amont ayant été bien réalisé et les discussions sur les besoins et envies bien cadrées. Il n’y a pas de secrets, si vous savez écouter votre client, décrypter les non-dits et que votre client est en pleine confiance, tout se passe pour le mieux dans le meilleur des mondes.

Le fait de travailler sur une plateforme sur laquelle les possibilités de personnalisation du code sont quand même limitées est également très enrichissant, même si j’avais déjà eu affaire à typepad, entre autres pour le site de Ze Village.

En tous cas, bonne journée à vous, et travaillez bien.