Relooking extrême du blog

Si vous n’avez rien vu, voici ce qui a été modifié :

  • Les titres des billets : passés en Police de caractères Georgia et en tout majuscules, ils me plaisent plus comme ça et je les trouve plus clairement identifiables.
  • Le formulaire de commentaires : exit les fonds striés estampillés web2.0 que je n’ai jamais aimé pour un formulaire plus sobre et que je pense plus lisible.
  • Les rétroliens : ils passent tout en bas de la page d’articles, de façon à mieux mettre en avant les commentaires que je trouve personnellement plus importants.
  • Les citations : ça, ça fait déjà quelques temps que je les ai modifiées, maintenant je les trouve visibles et à mon goût.
  • Le corps des articles : Ca va faire plaisir à Florent.V, j’ai uniformisé les marges des titres et des paragraphes pour éviter l’effet d’escalier.
  • Le pied de page : Retouche des listes de billets, travail sur le nuage de tags pour le rendre plus exploitable (et il y a encore du travail).
  • Formulaires multiples et divers (contact, envoyer à un ami…) : début d’uniformisation avec le formulaire de commentaires.
  • Les liens : retrait de la couleur bleu, vieux reliquat d’un ancien thème, le temps de trouver une solution qui me convienne.
  • Flux RSS : Ajout par défaut de la catégorie dans le titre du billet ainsi que quelques informations complémentaires, mais je vais revenir dessus dans un futur billet.

C’est tout pour le moment, mais c’est déjà pas mal.

Donc, comme toujours, si vous avez des critiques, des conseils, etc. Quand on est le nez dans un design, on ne se rend pas toujours compte des détails gênants ou améliorations possibles qui peuvent servir à l’utilisateur final.

Mise en ligne de projet : Blog du G.I.E Espace Innovation

Projet d’habillage et de création de template personnalisé de blog Typepad :

Capture d'écran du site espace-innovation.fr

Espace Innovation a été créé à l?initiative de ses trois membres fondateurs, les sociétés RC&A, Factorielles et Avensi Consulting, afin d?aider exclusivement les experts-comptables à formaliser et à professionnaliser leur offre de conseil et plus généralement leur service client.

Source : http://www.espace-innovation.fr

Projet intéressant, des clients motivés et impliqués comme on aimerait en voir plus souvent.

Comme d’habitude, un billet parlant du déroulement du projet devrait être rédigé dans les jours à venir.

PS : je suis quand même un peu jaloux, même pas une journée d’existence officielle et déjà 26 commentaires.

Limitation des habillages avancés de blog Typepad

Vous pouvez faire des habillages avancés en éditant le code HTMl et la feuille de style CSS…

Ils oublient juste de rappeler pour les webdesigners qui ont la mémoire courte qu’il est impossible de modifier la structure de la page de prévisualisation de commentaires et du captcha… j’ai l’air fin avec mon nettoyage de balises moi.

Du coups faut feinter en jouant avec la structure html par défaut qui est lourde… mais alors lourde.

C’était mon petit aparté semi coup de gueule du jour, je retourne tout de suite terminer mon intégration.

Site internet WordPress : lamigraine.org

Le projet

Lamigraine.org est un projet de Xavier de Mazenod (Adverbe), il explique les raisons de ce projet sur blog d’Adverbe : Lamigraine.org, la communauté de la migraine et des migraineux

Cahier des charges :

Réalisation d’un site communautaire sur le thème de la migraine.

Il contiendra :

  • Des billets d’actualités avec possibilité pour les visiteurs de laisser des commentaires.
  • Des pages d’articles de fond statiques.
  • Un test/quizz/QCM.
  • Un formulaire de contact
  • un forum
  • Gestion de fils RSS

Les recommandations et éléments du client :

Design

  • Cible féminine
  • Doux mais sérieux
  • Web2.0 style. ;)

Le logo

Comme souvent, pas de réel besoin de logo, ça sera intégré à la charte graphique globale.

L’accroche

Initialement : La communauté de la migraine et des migraineux.

Changé depuis en : la communauté des migraineux.

Les pages/rubriques

Trop nombreuses pour les lister ici, mais tout est déjà prévu ce qui permet d’avoir une bonne base pour évaluer la complexité du design.

Les éléments graphiques

« Je te fais entièrement confiance. » Que je la déteste cette phrase.

Les textes

Une bonne partie est déjà prévue, ils seront travaillés par un rédacteur professionnel.

Design graphique

Les points importants pour commencer à travailler :

  • La cible
  • Le contenu

La cible est essentiellement féminine, donc on va essayer de gratter un peu d’idées/informations du côté des sites d’information/communautaires féminins. De plus, si vous êtes un professionnel sérieux, vous allez également aller regarder du côté de la presse papier, c’est d’ailleurs un conseil que je vous donne en tant que professionnel : Utilisez la presse papier pour intégrer les codes graphiques d’un secteur.

En effet, si les codes graphiques internet sont énormément soumis aux modes en matière de webdesign, la presse papier est plus constante et plus fidèle aux codes graphiques sectoriels, trop de webdesigners se basent uniquement sur ce qui se fait « online » et boudent la communication traditionnelle.

Deuxième point, c’est un site de contenu, le nombre d’informations et d’éléments de navigation visibles est très important, cela entraine donc des choix au niveau de l’ergonomie et de la construction du layout.

Nous identifions donc avec les clients tous les éléments de navigation présents dans les pages et construisons à partir de ceux-ci l’architecture des blocs d’information :

  • Ce sera un site en trois colonnes
  • Un accès direct aux articles des rubriques est obligatoire pour favoriser leur lecture
  • Les one-shot (pages hors rubriques) sont identifiés, hiérarchisés et regroupés par « sous groupes ».
  • la part principale est bien sur donnée au contenu central

Ce qui nous donne le squelette intitial suivant :

Squelette du site lamigraine.org

Le logo

Pas de logo de prévu, on va donc créer un « pseudo logo » qui s’intègrera dans la charte globale du site.

Par contre, un élément visuel « fort » est important pour identifier le site au premier coup d’oeil. Nous décidons de choisir une photo qui sera intégrée en premier point de lecture de l’écran : en haut à gauche.

Le choix est difficile, il nous faut une femme, ni trop jeune, ni trop agée, ni trop belle ni trop laide, ni trop marquée par la souffrance tout en symbolisant la migraine.

Après avoir visionné je ne sais combien de photos, notre choix se porte sur la photo ci-dessous qui nous semble répondre parfaitement à nos besoins :

photo de jeune femme souffrant de la migraine

L’interface graphique du site

On a tous les éléments en main, le squelette, la cible, un visuel d’accroche, des ressources (online ou papier), les rubriques, les contenus, y a plus qu’à, facile…

Le porte mon choix de couleur principale sur le vert et son rendu bio/médical couplé avec une forte base blanche. La couleur de soutien sera le bleu et la couleur de contraste le orange (avec une hésitation pour une gamme de roses pour cette dernière couleur). Le rouge est banni.

Les éléments de navigation qui doivent être les plus visibles sont ceux des colonnes, il est donc nécessaire d’atténuer la visibilité des liens du haut et du bas de page.

Les rubriques et leurs articles seront déroulées dans la colonne de gauche, ce qui donne un bon contenu qui a juste besoin d’être structuré et souligné. par contre à droite nous n’avons que quelques liens, on décide donc d’habiller les liens de la colonne de droite avec des icones de façon à ce que leur impact visuel équilibre la masse d’information à gauche.

Je commence donc mon travail de recherche et d’étude à partir de tous les éléments en ma possession, ça déroule plutôt rapidement, je me suis fait une image mentale assez claire de la plupart des éléments constituant la page, ainsi des effets à appliquer sur les parties « graphiques ».

Voici donc la première « maquette » proposée au client :

premers éléments de maquette du site la migraine

Comme vous le voyez, certains éléments sont encore à l’état de « piste de travail », mais l’esprit général est là, et donc avant de continuer à travailler je demande son avis au client. L’idée lui convient, on part donc là dessus en appliquant des modifications/améliorations sur les éléments qui nous semblent en avoir besoin.

Le layout général

La première proposition était étudiée pour tenir dans du 800*600, après quelques tests de lisibilité des textes, nous décidons de passer le layout vers du 1024.

Le haut de page

Ajout d’un bouton vers la page d’accueil, nous plaçons le formulaire de recherche et le formulaire d’inscription à la mailinglist et ajoutons des informations pour le flux RSS. La hauteur sera également réduite, pour gagner de la place dans l’affichage du contenu et pour le rendre moins « proéminent ».
Le blanc des liens en image est volontairement « atténué » pour éviter un contraste trop fort et donc un impact visuel trop important pour des liens de « deuxième importance ».

capture du haut de page du site lamigraine.org

Le bas de page

Il restera très simple, on lui garde tout de même une certaine hauteur, pour souligner la fin de la page et se garder la possibilité d’y ajouter aisément du contenu à l’avenir. même traitement pour les liens image que pour le haut de page.

capture du bas de page du site lamigraine.org

Colonne de gauche

Après plusieurs tests plus ou moins heureux d’habillage des listes de liens, je décide d’utiliser des titres graphiques pour présenter les rubriques, d’habiller les liste de liens avec une puce graphique et de séparer les listes avec une ligne en « tirets ». Chaque titre de rubrique à une couleur, nous utilisons les trois couleurs du site (vert, bleu, orange), comme il y a plus de 3 rubriques nous utilisons plusieurs fois les même couleurs, mais jamais à la suite pour qu’il n’y ait pas de confusions.

capture de la colonne gauche du site lamigraine.org

Colonne de droite

Les premières versions « d’onglets » graphiques étaient trop gros, ils sont donc retravaillés, de plus de nouveaux éléments viennent se greffer (derniers commentaires, derniers visiteurs mybloglog etc.). Chaque « onglet » est identifié avec une icône représentant le sujet abordé. même logique au niveau des codes couleurs, bien que l’on retrouve maintenant des doublons, les positionnements des onglets ayant changé de nombreuses fois (tiens ça me fait penser qu’il faudra que je regarde ça à l’avenir).

capture de la colonne droitedu site lamigraine.org

Contenu central

Le travail effectué est un peu trop long à expliquer, chaque type de mise en forme de texte a sa classe CSS attitrée, les listes ont leurs puces d’une couleur différente de celles utilisées dans la colonne de gauche, chaque niveau de titre a sa couleur et sa mise en forme, etc.

Un gros gros travail au niveau de la feuille de style.

Le rendu final

Le plus simple est d’aller voir le site en production :

lamigraine.org – la communauté des migraineux.

Ou si vous préférez :

capture du site lamigraine.org


Technologie employée

Si l’envie m’en prend, je ferais un descriptif technique complet des technologies employées. Ce qui est intéressant pour l’instant, c’est que le site a été architecturé sur un moteur WordPress couplé avec un forum BBpress.

Je n’ai plus la liste des plugins utilisés sous la main, mais pour l’instant, cet article ne parlera vraiment que de l’aspect graphique.

Pour finir

Un long projet, très intéressant, je pense que le design final répond bien aux attentes initiales du client. Un gros travail de tests et de réglages a été effectué au niveau de la mise en forme de textes, partie qui est bien souvent non intégrée ou non pensée à l’avance dans des devis de création graphique. En cela l’expérience a été enrichissante, car elle me fais entrevoir de nouvelles difficultés à prévoir lors de l’étude d’un projet web, ce que j’appellerai à l’avenir : le niveau d’excellence exigé.

PS : petite dédicace à un de mes lecteurs habitués : Julien, je crois que ce site t’intéressera. ;)

Thème spécial noël en cours

Mais là, j’ai franchement la flemme de le finir donc je laisse en chantier. Si c’est trop pénible à lire, je replace le thème par défaut.

Désolé pour le dérangement temporaire.

EDIT du 23 : quelques ajustements. Toujours pas fini. Par contre une bonne nouvelle, IE7 gère les transparences png24.

Thème Dotclear de l’AJblog à télécharger

Suite à cette proposition faite à erix, un de mes lecteurs, je place donc le template du blog en téléchargement pour ceux que ça pourrait intéresser.

A cette adresse :
http://www.ajcrea.com/ajblog.rar

Quelques précisions tout de même :

Il s’agit d’une archive contenant tous les fichiers du template AJblog et non un template auto-installable
Les fichiers php ou html son codés en UTF8 (sans BOM) si votre blog est en ISO, pensez à changer ça dans votre éditeur de texte préféré.
Je n’ai pas nettoyé mes fichiers php des appels à des plugins, il y’en a peu, mais pensez-y tout de même.

C’est tout pour le moment.

Tout ce que je demande, comme toujours, c’est de ne pas oublier de citer l’auteur du thème, c’est à dire moi même, si vous le réutilisez, et ne pas réutiliser le Logo.

Dernier point, ce template a été pensé pour mon blog, en fonction de son contenu, donc pour l’adapter au votre, il faudra surement faire quelques petits réajustements au niveau du CSS (qui au passage n’est pas à 100% optimisé).

Si vous avez des questions ou des soucis, postez un commentaire, je me ferais un plaisir d’y répondre.

Cordialement,
Aymeric Jacquet