Site internet WordPress : lamigraine.org

Et voila, le quatrième billet de la série « processus de création ».

Je vous présente donc lamigraine.org, site à vocation communautaire sur le thème de la migraine et des céphalées.

Pour reprendre les bonnes habitudes, nous allons donc étudier ce dossier, du cahier des charges initial à la réalisation finale.

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

Cordialement,
Aymeric Jacquet

Tags : , , , , ,

Be Sociable, Share!

8 Commentaires pour Site internet WordPress : lamigraine.org

  • Florent V.

    Beau résultat, très AJcréa dans le style (en particulier sur l’utilisation des couleurs). ;)

    Sinon, je ne me fais toujours pas à ton obsession des blocs de texte (titres, paragraphes, blocs de citation, autres) non alignés à gauche. Moi le design en escalier que ça crée parfois (jusqu’à quatre lignes différentes) m’horripile, mais bon… Suis sans doute psychorigide. :/

    Le 30 avril 2007 à 12 h 47 min

  • M’en parle pas, je me suis encore réveillé avec la tête qui faisait boumboum… La migraine du matin, la plus dure à faire disparaitre.

    M’enfin, cible féminine tu as dit ? Comme s’il n’y avait que les femmes qui faisaient le coup de la migraine ! ;-)

    Petite curiosité : quand je clique sur un des liens de la colonne de droite, la sélection se fait sur toute la largeur

    (oh oh, je viens de découvrir la poignée pour agrandir la zone de commentaire. Stylé !)

    Le 30 avril 2007 à 13 h 32 min

  • Florent : tu es psychorigide.

    JulienA : c’est un effet de bord du « remplacement » de texte par des fond d’images sur des liens, quand le texte du lien est positionné hors écran via un text-indent négatif. la zone de sélection n’apparait que sous Firefox.

    Le 1 mai 2007 à 9 h 27 min

  • Cyril

    Pas de souci concernant les boutons « je m’abonne » et « recherche » ?
    J’ai donné quelques cours de prise en main d’Internet à des « technophobes », pendant leur navigation ces gens là cherchent beaucoup « la souris qui se transforme en main » pour naviguer et cliquer.
    Ou alors j’aurai bien vu un petit rollover.

    Le 2 mai 2007 à 11 h 39 min

  • Très bonne réflexion Cyril, je l’avoue, c’est un oubli de ma part. >> Todo list.

    Le 2 mai 2007 à 12 h 13 min

  • Celine : je ne suis que le prestataire ayant réalisé le site internet de lamigraine.org. Vous pouvez par contre prendre contact avec l’équipe du site ou poser vos questions sur les forums, vous trouverez surement des réponses à vos question.

    Pour rappel, l’adresse du site :
    http://www.lamigraine.org

    Le 14 mai 2007 à 15 h 42 min

  • celine

    bonjour je voulai vous que depuis 14ans j’ai des migraine astroce je n’en peu plus sa me fatiguer beaucoup je suis souvent fatigué envie de dormir a cause de me migraine .quand j’ai mes migraine je suis enervé et mon mari ne suporte pas quand je les ai du moins personne.je voudrai que vous m’aider j’ai eu plusieur tratement de fond comme nocertone ou vidora ou replax mais sa ma rendu malade j’ai pas surporter.aider moi svp

    Le 14 mai 2007 à 15 h 36 min

  • said

    slt voila je suis un jeune de 41 ans atteint d une migraine depuis 10 jours et je cherche un medicament efficace merci

    Le 2 octobre 2007 à 23 h 53 min