Le projet a été lancé il y’a de cela quelques temps par… ma soeur.

Et oui, la famille et les amis représentent souvent votre premier réseau de prescription quand vous lancez votre entreprise, du moins si vos produits et services sont susceptibles de les interesser.

L’adresse du site : http://www.elevage-chevaux-gesvres.com

Le projet

Cahier des charges :

La demande initiale peut se résumer par une liste de demandes :

• Le site devra présenter l’élevage du Gesvres et ses chevaux mais potentiellement également d’autres élevages amis
• Le site devra avoir à la fois un côté « pro » et familial
• Le site devra permettre à plusieurs personnes d’écrire du contenu
• Le contenu du site pourra être géré par les utilisateurs
• L’interface de mise à jour devra être assez simple, les utilisateurs potentiels n’ayant pas un gros niveau informatique
• Le site sera en trois langues à l’avenir : Français, Anglais, Allemand
• Le site devra pourvoir éditer des actualités

Les recommandations et éléments du client :

Pour faire simple, je donne un résumé du mail reçu à l’époque :

Le logo

Quelque chose de frais, qui évoque le Gresvres (une très belle vallée au nord de la ville de Nantes), avec par exemple quelque chose qui serpente et des feuilles stylisées où l’on peut inscrire « Elevage du Gesvres ».

L’accroche

J’essaie d’élever du cheval de sport à orientation concours complet (eventing en anglais).

Genre: « Un élevage au service du complet »
ou « élevage du Gesvres »: chevaux de sport à orientation concours complet.

La deuxième phrase à été préférée pour sa plus grande diversité de mots clés.

Les rubriques

• Les poulinières
• Les poulains
• Les étalons choisis

Mais aussi en saut d’obstacle… (prévu initialement)

• Les poulinières
• Les poulains
• Les étalons choisis

Sur ces rubriques/pages, s’est également greffée une page de présentation de l’élevage.

Les éléments graphiques

Beaucoup de photos des différents chevaux de l’élevage, certaines prises par un professionnel, mais les copies sont de faibles qualité, en tous cas, il y’a de la matière.

Les textes

Fournis rapidement, assez complets, peut-être trop complets pour un usage internet. Pas de surprise, la cliente étant également pigiste pour le journal L’éperon.

Nous avons donc tout ce qui nous faut pour lancer le projet.

Vous pensez qu’il manque la question de l’hébergement et du nom de domaine? A l’époque il n’en était pas encore question, le site devant être hébergé en sous domaine d’ajcrea.com.

Passons maintenant aux choses sérieuses, la réalisation du site en lui même.

Design graphique

Le logo

La cliente ne désire pas un gros travail au niveau du logo, mais juste avoir un logotype reconnaissable et surtout que le texte soit lisible est sans fioritures inutiles.

En se basant sur ses recommandations, je fouille dans mes banques d’images, mes visus vectoriels, bref ma matière première.

Je trouve un motif de faible qualité, un peu « crassou » mais dont la forme me plait bien :

Un peu de nettoyage, un passage sous flash pour vectoriser l’objet et nettoyer ses courbes et direction photoshop, pour une fois je ne passerais pas par la case illustrator, j’y penserais si un jour le logo à vocation à être utilisé en haute definition pour du print.

Ma première idée, est de retravailler le logo en trois couleurs sur le thème des saisons, verte en grosse majorité, orange et rouge pour surligner l’ensemble et donner plus de structure.

Après plusieurs tentatives infructueuses d’intégrer le texte « Elevage du Gesvres » sur ce modèle, je passe à quelque chose de radicalement différent, des fois les fausses bonnes idées font perdre du temps si on s’y accroche trop.

Je décide de séparer clairement le logotype du texte pour former un ensemble « bloc » aisément utilisable sur tout type de support.

Je n’en suis pas content à 100%, je pense que je vais retravailler le texte à l’avenir pour rendre l’ensemble plus harmonieux et plus équilibré, mais l’essentiel est là : Il est lisible et reconnaissable et la cliente le valide.

Pour l’instant je trouve que le texte fait un peu trop « posé là ».

Il est temps alors de passer à l’étape suivante.

L’interface graphique du site

Le logo créé, j’ai déja une bonne base de codes couleurs à utiliser dans le site, il ne reste plus qu’a travailler une interface propre et lisible et qui indique immédiatement au visiteur de quoi le site parle.

J’ai de la chance, j’ai beaucoup de photos.

Je fais une première sélection de photos, puis une seconde, en pensant en même temps au découpage et a l’impact que la photo choisie aura sur le design du site.

Je fini par en choisir une que je trouve parfaite :

Hélas la chromie n’est pas bonne et la qualité très moyenne, de plus la photo est assez haute, et je ne suis pas fan des habillages qui mangent la moitié de l’écran.

J’étudie comment l’intégrer et comment la cadrer, je décide de l’inclure à la foi dans le header, le menu et en fond de contenu.
Voici la première ébauche :

Après quelques réglages et pas mal de tests, voici ce que vous pouvez voir actuellement sur le site en ligne :

Le fond de l’image du header a été adouci et coloré pour ne pas nuire à la lisibilité de l’ensemble. En effet, un fond trop « graphique » peut gêner la lecture d’un site car l’oeil s’arrête sur le détail.

La colonne de droite est soulignée par un fond image léger, avec une chromie différente du fond du contenu, pour bien différencier les deux espaces tout en restant dans l’esprit du site.

Une puce de titres a été créée à partir d’une des photos fournies.

On retrouve les couleurs du logo dans la hiérarchie de l’information, il y’aura sûrement des réglages à faire à l’avenir, mais l’essentiel est là.

Technologie employée

Si vous êtes habitués des CMS et autres outils de blog, vous aurez reconnu sans peine la « dotclear touch ».

L’ensemble de l’interface du site a été convertie en template dotclear, tout l’habillage graphique étant géré par CSS.

C’est un dotclear tout ce qu’il y’a de plus classique sur lequel ont été greffés les plugins suivants :

Pages connexes pour pouvoir gérer des pages en dur ou pour certains plugins

• Courrieleur, pour la gestion de la page contact, de la mailing list et du petit gadget « recommander ce site ».
• Personnalisation d’urls pour des urls plus parlantes et mois longues.
• BBclone statistiques pour des statistiques légères
• Galerie pour gérer les galeries de photos à l’avenir.

Vous trouverez l’ensemble de ces plugins sur le wiki de dotclear.

Voici les autres manipulations appliquées au moteur dotclear :

• Un dotclear proprement à la racine
• Un mode « home » qui affiche le premier billet de la catégorie « concours complet » et les billets de la catégorie « actualités »
• Un « fil d’ariane » pour localiser le visiteur dans la nomenclature du site

Et deux ou trois réglages personnels, principalement au niveau de comportement css.

To do list pour l’avenir

Il y’a encore quelques réglages tant graphiques que techniques à effectuer sur le site mais pour le moment, j’attends un retour de la cliente et des autres utilisateurs et visiteurs potentiels du site.

Je crois que je vais surtout dans un premier temps faire des essais au niveau de la colonne de droite pour la rendre plus.. plus dans l’ambiance du site, pour l’instant elle me semble trop détachée de l’interface globale

Les galeries viendront assez rapidement, du moins dés qu’elles seront plus étoffées, il faut que les utilisateurs s’habituent d’abord à l’interface de mise à jour.

J’ai prévu également un gros travail tant au niveau de la structure xhtml que du css pour que le site réponde mieux à mes critères actuels de qualité, la maquette css est assez ancienne et depuis mes compétences ont pas mal évolué, pour exemple, la structure du site actuelle répond assez mal aux agrandissements de polices par les visiteurs, et ça me gène franchement. Je vais également étudier la possibilité de passer soit en design proportionnel aux tailles de polices, soit en design fluide s’adaptant à la résolution d’écran, du moins si cela ne m’oblige pas à dépasser un certain poid des graphismes, à l’étude donc.

Pour étendre l’accessibilité, c’est également en projet, ça se fera au fur et à mesure.

Vous aussi vous pouvez participer, si vous avez envie, n’hésitez pas à me faire votre retour sur le site, son graphisme, son utilisabilité, son ergonomie, ce qui vous plait, vous déplait, je suis ouvert à toute critique.

Pour rappel, l’adresse du site de l’élevage du Gesvres : http://www.elevage-chevaux-gesvres.com

Voila, désolé si c’était assez long, mais j’espère que ça vous a intéressé, je pense à l’avenir, en fonction du temps disponible, faire un retour sur chaque projet réalisé par AJcréa.

Bonne journée à vous, cordialement,
Aymeric Jacquet