Pour bien commencer, je laisse la parole à l’initiateur du projet, Xavier de Mazenod de la société Adverbe :

Site-web-pme est un projet destiné à faire accéder les PME et TPE au Web dans de bonnes conditions.

D’expérience, nous avons constaté que les petites entreprises avaient du mal à se mettre au web, même pour un premier site vitrine. Les offres du marché très orientées « outils » ne répondent souvent pas à la demande de conseil, de formation et d’accompagnement du dirigeant d’entreprise.

Dans l’offre de site-web-pme, nous accompagnons les TPE et nous nous déplaçons une journée chez elles afin de co-construire leur site web et de rédiger les textes nécessaires.

Cette prestation complète repose sur une bonne connaissance des PME et sur une solide expérience des métiers du Web.

Pour une meilleure compréhension du projet, vous pouvez vous rendre directement sur Site Web PME, création de sites internet pour PME ou lire sa présentation par Xavier sur le blog d’Adverbe.

Et maintenant étudions le projet sous son aspect technique.

Le projet

Cahier des charges :

Petit résumé sous forme de liste :

• Le nom du site : Site Web PME
• Clientèle ciblée : TPE et PME
• 4 ou 5 pages administrables et une page contact.
• Délais de réalisation assez courts (une semaine) pour pouvoir communiquer rapidement sur le produit
• Gestion d’actualités
• Code respectant les standards

Les recommandations et éléments du client :

Design

• Le design ne doit pas faire « blog »!
• S’inspirer de quelques adresses de sites fournies.
• Faire « pro » et sérieux.

Le logo

Pas de logo spécifique prévu dans un premier temps.

L’accroche

Votre site web clé en main en 24h.

Les pages/rubriques

Rubrique générale regroupant les pages du site :

• Accueil
• L’offre
• Déroulement
• Tarifs et moyens
• Aller plus loin
• Qui sommes-nous/mentions légales
• Contact

Et une rubrique regroupant les actualités

Les éléments graphiques

Rien, comme il s’agit d’une marque/service en pleine création, il n’y a pas encore d’éléments de com graphique, logo ou autre plaquette, à moi de tout créer.

Les textes

Fournis rapidement, et dans leur version quasi finale, forcément, le client est un pro de la rédaction web.
Comme ils sont déja structurés et calibrés, ça va pas mal aider pour le travail de design du site.

Passons à la réalisation.

Design graphique

Pour changer, je ne vais pas commencer par étudier le logo, celui-ci n’étant pas prioritaire, mais commencer directement par l’étude de l’interface.

L’interface graphique du site

Comme dit si bien l’adage, « Rien ne se créé, rien ne se perd, tout se transforme. », je décide d’aller voir ce qui se fait à droite à gauche comme sites sur le sujet.

Rien de réellement nouveau mais quelques idées montent petit à petit quand à la façon de hierarchiser l’information sur le site à venir.

Je commence donc ma maquette, structurant les informations avec une idée assez claire, mettre en valeur le redactionnel de homepage tout en facilitant la lecture des autres parties.

Soit, garder une structure classique avec une barre de navigation horizontale, un redactionnel clé, et des petits résumés des autres pages que l’on retrouvera dans le site. Il faut que les actualités soient visibles au premier coup d’oeil donc je les place à un niveau assez haut de l’information.

Construction des principaux blocs, début de mise en page, quelques bidouilles graphiques, je part à la recherche de quelques images pour créer une iconographie classique pour une prémaquette.

Comme beaucoup de gens dans mon secteur, je suis quelqu’un qui travaille à l’oeil et j’ai souvent besoin de pousser mes constructions graphiques ‘maquette » assez loin pour voir si ça fonctionne.

Ca nous donne donc une première maquette :

Ca me semble fonctionner pas mal du tout, on distingue bien (trop?) les différents blocs d’information, pour ce qui est de la construction, on va rester là dessus.

Je retourne donc fureter du côté des banques d’images, et retombe sur la photo représentant l’horloge « zen », j’aime bien, je décide de voir les autres contributions du photographe, erreur…

Pour le reste de la petite histoire, vous pouvez aller lire ou relire l’article suivant, « Cet étrange processus que l’on nomme création« , ou j’explique ce qui s’est passé dans ma recherche graphique.

Je paufine, à la recherche d’une ambiance semi zen, semi « corporate », je cherche une iconographie complète et je finalise quelques détails, ce qui donne la maquette suivante :

Ca change.

Nous nous retrouvons le soir même avec le client sur Skype, je lui annonce la chose de la façon suivante :

Bonsoir Xavier,
J’ai une bonne et une mauvaise nouvelle…
Alors la bonne c’est que j’ai pas mal avancé sur ta maquette.
La mauvaise c’est que je me suis un peu éloigné de tes recommandations initiales…

Quelques litres de sueur perdus pendant qu’il regarde la maquette et finalement un gros soulagement quand il valide, le design et l’iconographie lui plaisent, on peut donc continuer mais en changeant la pseudo accroche que j’avais esquissé.

J’ai ensuite créé un petit logo simple, travaillé sur le design du footer « dans le move », et eclairci les blocs d’informations de droite, que je trouvais finalement trop lourd et trop écrasants visuellement parlant avec leur double fond bleu/blanc, ils parasitent l’information.

Voici donc la version suivante et quasi finale :

Exite le fond graphique de page qui au final était bien trop lourd et n’apportait rien.

Comme les positions des blocs d’information sont fixés, nous partons de cette maquette pour commencer l’intégration html.

Mais plusieurs choses me gènent, et de plus en plus…

• Je trouve le logo laid.
• L’effet haut de page/bas de page plus larges que le contenu, que je trouvais sympa au début, me semble du plus mauvais effet.
• Trop d’ombres et trop de « bump » je trouve l’ensemble inutilement lourd.

Retour à la design machine, retouches, réglages, tests, et dernière version (finale?) :

Le footer a également été modifié pour recevoir les derniers contenus validés.

A savoir que pendant tout ce temps, j’ai travaillé sur une version Online et intégrée, cela permet au client de finaliser ses textes et au webdesigner d’adapter et de fignoler son design en fonction du contenu « définitif », pas de perte de temps entre la validation finale et la mise en ligne. De plus comme le rédactionnel change peu, on peut commencer de « référencer » alors que l’on est encore en pleine production.

Petite précision, toutes les captures que vous voyez au dessus sont tirées des maquettes photoshop, d’ou les quelques variations que vous pouvez voir avec le site internet en ligne, même si grâce aux CSS elles sont minimes et ce sur n’importe quel navigateur (je ne parle bien sur pas des IE 5 et autres dinosaurs).

Le logo

Pas de réelle demande du client, c’est du bonus, histoire de finaliser.
Et de plus je voulais intégrer une troisième couleur pour rajouter un élément visuel structurant au site.
Si vous regardez bien vous avez trois « points » verts, en haut à gauche du header, au milieu de la partie droite et en bas à gauche du footer.

Encoire une fois, me voila en train de fouiller dans mes archives de visuels multiples et divers, et je finis par trouver ce qui me convient :

Application des trois couleurs en ton pastel, car je ne veux pas qu’il parasite la lecture par des teintes trop « vraies » :

Intégration dans le design, quelques tests de taille, quelques effets pour le faire légèrement ressortir, et voila la version en ligne.

Il y’a eu de nombreux essais quand au texte appliqué du nom du site, j’ai fini par revenir à un stype très simple, mais si les chipoteurs pourront dire que l’ombré du texte n’est pas logique avec l’ombré du logotype, pour l’instant ça reste comme ça.

Technologie employée

Ce coup-ci encore, c’est un moteur dotclear, et donc tout à été refait en template dotclear.

Les plugins utilisés :

• Pages connexes pour pouvoir gérer des pages en dur ou pour certains plugins
• Lecteur RSS pour l’affichage des actualités.
• Personnalisation d’urls pour des urls plus parlantes et mois longues.
• Ping, pour pinguer différents services online avec les actualités.

Et c’est tout.

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

Autres manipulations :

• Un dotclear proprement à la racine
• Un mode « home » qui affiche le premier billet de la catégorie « Général ».
• Application du lecteur rss pour l’affichage des actualités de la catégorie « Actualites »

La mise en page de la partie « contenu » de la home, c’est à dire à partir de « votre site Internet » jusqu’au « en savoir plus » du dernier onglet, est entièrement construite via des classes css appliquées au texte de l’article. Tout le contenu html étant écrit DANS l’article.

Pour finir

Vous allez encore dire que je m’accroche à des détails, mais il y’a encore quelques petites choses qui me gènent, je n’y peux rien, j’ai du mal avec tout ce qui est « bumpé » et « ombré », alors je vous livre un petit secret, j’ai continué à travailler la maquette et je vous livre une partie du résultat :

Je préfère, et je crois que le client aime bien aussi, il y’a encore des réglages à faire, mais il est fort possible que le design de Site Web Pme subisse une légère modification dans les jours à venir.

Comme toujours, vos avis et critiques sont les bienvenus.

Bonne journée à vous, cordialement,
Aymeric Jacquet

EDIT du 31/12/2006 : Ce billet étant la cible principale des attaques de spam sur L’AJblog, je suis obligé de bloquer les commentaires.