Etude de cas : Habillage du Blog Typepad Espace Innovation

Entête du site du GIE espace Innovation

Pour rappel, ce projet a été mis en ligne le 12 Juin 2007, j’en ai parlé dans l’article suivant : Mise en ligne de projet : Blog du G.I.E Espace Innovation.

Comme tous les articles de la série, je vais vous proposer une étude du projet, du cahier des charges initial à la réalisation finale.

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.

Logo du GIE Espace Innovation

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 :

première maquette graphique du projet Espace Innovation

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) :

deuxieme maquette graphique du projet Espace Innovation

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 :

habillage partie commentaires typepad

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 :

matrice de mail html pour le GIE

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

matrice de mail html pour le GIE sans images

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.

Cordialement,
Aymeric Jacquet

Tags : , , , ,

Be Sociable, Share!

8 Commentaires pour Etude de cas : Habillage du Blog Typepad Espace Innovation

  • Cyril

    Excellent style graphique !
    Clair, propre, très joli !
    J’aurai juste une ptite remarque : je trouve les liens « Version imprimable | Recommander cet article » un peu collés au contenu du billet.

    Bonne continuation et bravo.
    Cyril

    Le 19 juillet 2007 à 16 h 47 min

  • Merci Cyril, ta remarque est, de plus, très pertinente. Ce contenu est géré, actuellement, directement par le client, je vais lui en parler.

    Il y a quelques autres petits détails que j’ai repérés à l’usage et que je devrais corriger dans les jours à venir, mais je ne vais pas dénigrer mon propre travail. ;)

    Le 19 juillet 2007 à 16 h 55 min

  • style graphique soigné, avec une charte précise, bravo

    Le 19 juillet 2007 à 18 h 26 min

  • Bonjour,
    Je confirme notre grande satisfation tant au niveau du résultat, qu’au niveau de la manière de travailler (souplesse, échanges, réactivité…).
    J’en veux pour preuve, nous allons très probablement commander un second blog pour notre service SAV.
    Merci à Aymeric Jacquet.
    Jérôme CLARYSSE, RC&A

    Le 20 juillet 2007 à 9 h 19 min

  • design matin : merci beaucoup, au passage, j’aime beaucoup le design de ton blog, parfait dans sa simplicité. De toutes façons, tout ce qui joue avec les blancs de façon astucieuse, j’aime.

    Jérôme CLARYSSE : merci encore une fois pour vos retours sur notre projet et j’espère que nos futurs projets vous donneront également entière satisfaction.

    Le 20 juillet 2007 à 16 h 50 min

  • Arlette Vidal-Naquet

    Je souhaiterais pénétrer sur mon blog avec un autre serveur que Firefox que dois-je faire

    Le 30 mai 2008 à 11 h 19 min

  • Arlette Vidal-Naquet : là, j’avoue ne pas comprendre votre question.

    Le 30 mai 2008 à 11 h 25 min

  • *sand*

    Bonjour,

    La prise en compte des clients mail qui bloquent les images me paraît très judicieuse. Cela peut sembler quelconque et anodin, mais un mail lisible dans tous les cas, c’est ce qui fait toute la différence !

    Le 7 juillet 2008 à 17 h 06 min