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 :

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 :

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 :

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 ».

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.

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.

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

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 :

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. ;)