Site avec Dotclear : Le site Internet de l’Elevage du Gesvres

Je vous avais parlé de mes projets de création de sites internet en cours, certains sont en stand-by à cause des vacances des clients, mais le site de l’élevage du Gesvres est en ligne et quasiment finalisé.

Si ça vous intéresse, je vais faire un petit historique du projet, étude du design et explications des technologies employées.

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 :

Version de base.

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.

version 3 couls.

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.

Version finale

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 :

Hugo de base.

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 :

Interface + hugo.

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

interface finale

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 :

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

Cordialement,
Aymeric Jacquet

Tags : , , ,

Be Sociable, Share!

10 Commentaires pour Site avec Dotclear : Le site Internet de l’Elevage du Gesvres

  • Le site est magnifique et plus encore, savoir quel a été ta pensée lors de la créa du logo me parait fort intéressant… Je doute qu’on en apprennent bcp sur le " Gresvres " et ses canassons mais le process de fabriucation d’un logo correspondant aux attentes du client n’a déjà plus de secrets pour tes visiteurs ;o

    Le 22 août 2006 à 14 h 55 min

  • Nilo

    Bonjour,

    cela fait quelques temps maintenant que je lis ton (j’espère que le tutoiement ne dérange pas) blog avec beaucoup de plaisir.
    J’ai trouvé ce billet très intéressant, étant moi même en cours de création d’entreprise dans la même branche que toi (je me ferais petit ;)), ce genre de billet est vraiment très utile pour apréhender ta façon de bosser et éventuellement remettre à plat la mienne, en tout cas un billet qui m’a fait réfléchir, ce qui n’est finalement jamais inutile.

    Concernant le site en question, j’aime beaucoup l’ensemble, j’aurai simplement quelques petites remarques :
    1. la colonne de droite me chagrine, peut être la faute à l’image en fond qui gagnerait peut être à être plus éloigné de l’image du header.
    2. dans le menu du haut, lorsque le curseur passe sur les liens le texte devient blanc et sur certains boutons ce n’est plus très lisible, notamment "présentation" et "étalons choisis"
    3. dans le footer, lors du passage sur les liens ils virent au rouge avec un fond beige qui ne cadre plus avec l’image.
    4. le lien "propulsé par dotclear" n’est pas intégré au reste, mais se promène tout seul tout en bas à droite.

    Voilà, j’espère avoir apporté un peu d’eau à ton moulin. :)

    Le 6 octobre 2006 à 11 h 21 min

  • Aymeric Jacquet

    Bonsoir Nilo,

    Merci sur ce retour très interessant et bravo pour ta création d’entreprise, je te souhaite toute la réussite possible, même si tu es "concurent". ;)

    Pour revenir sur tes critiques (fondées) :
    Je n’ai pas trop travaillé la colonne de droite, car elle a vocation à être profondément modifiée, du moins dés que l’on trouve du temps avec la cliente pour en parler.
    Quelqu’un m’avait déja fait la remarque pour le menu (d’ailleurs c’est étange, j’ai l’impression que des commentaires ont disparu), je le note donc et vais voir à y truver une alternative.
    Pour les liens du footer, très interessant à savoir, car sur mon écran la couleur sous les liens est gris bleuté, il vafalloir que je vérifie les valeurs.

    Pour le lien dotclear, par contre c’est volontaire, utilisant un produits Open Source je veux en faire tout de même la promotion (sauf demande explicite du client, mais pas sans m’être battu), sans que cela envahisse l’écran. C’est donc pour cela qu’il se trouve à cette place, par contr il est fort possible ue tu ssois en résolution au dessus de 1024, donc effectivement dans ce cas le lien peut sembler très lointain.

    Bon je crois qu’il est l’heure d’aller me coucher là.

    Le 7 octobre 2006 à 0 h 34 min

  • Nilo

    Bonjour Aymeric,

    concernant les liens du footer, si ça peut t’aider je suis sous Firefox 1.5.0.7 (Win XP SP2).
    Pour le lien Dotclear, effectivement je suis en 1280, et il me parait donc bien seul dans son coin. ;)

    Merci pour les encouragements (concurrent ou collaborateur, qui sait).

    Le 7 octobre 2006 à 11 h 40 min

  • Nilo

    Pendant que j’y suis, une remarque concernant ton site, lorsque je suis sur le blog je ne trouve pas de lien pour aller sur le site pro, c’est voulu ?

    Le 7 octobre 2006 à 11 h 41 min

  • Aymeric Jacquet

    Je crois que je m’attaquerais aux modifications du site de l’élevage du Gesvres quand il passera en phase : modifs après retour utilisateurs. Sûrement bientôt je l’expère.

    Pas d’erreur sur le lien site pro/blog c’est effectivement volontaire pour le moment, il y’a quand même un lien, là en dessous, ©2006 AJcréa : Création et Formation, j’ai un projet "liaison" plus explicite, mais il va falloir que je dégage du temps pour ça.

    Pour le "Merci pour les encouragements (concurrent ou collaborateur, qui sait)" envoies moi un email à postmaster – AT – ajcrea.com, et on en reparle hors antenne. ;)

    Le 7 octobre 2006 à 21 h 37 min

  • bonjour, je partage l’avis de mike, le site est magnifique! vraiment sympa ce site

    Le 16 février 2007 à 10 h 02 min

  • Trés réussi

    Le 30 avril 2007 à 23 h 46 min

  • dreadstock

    C’est une trés bonne idée de faire partager et surtout de prendre le temps de faire partager son expérience. Merci beaucoup !

    Le 26 février 2009 à 14 h 12 min

  • Oui en effet c’est une chouette idée de prendre du temps pour faire partager votre experience. Longue vie à votre blog :)

    Le 8 janvier 2010 à 20 h 36 min