Refonte du site des Emaux de Marie

Page d'accueil du site des Emaux de Marie

Le contexte:

Pour cette refonte réalisée en mars-avril 2010, l’objectif était de créer un site vitrine esthétique mettant en valeur les créations proposées par l’atelier. Créer un bel objet pour présenter de belles choses.

Note: les besoins de Marie ayant évolué depuis la mise en ligne de cette refonte, une nouvelle version du site est en projet pour l’été 2011.

La prestation comprend:

Le webdesign (sur la base d’indications précises transmises par la cliente en début de projet et adaptées ensuite à l’écran), le développement, l’intégration des contenus, le traitement de toutes les images (dimensions, recadrages, création des miniatures), la création de la galerie photo, l’optimisation pour le référencement naturel*, la mise en ligne, les mises à jour (ce site vitrine ne dispose pas d’une interface d’administration), et la maintenance.

Le cahier des charges:

Le site devait tenir sur une hauteur d’écran en 1024×768 pixels sans que l’on n’ait besoin de « scroller » avec la souris. Les cinq carrés de couleur, présents dans le logo de l’atelier, devaient être mis en valeur à travers tout le site. Il devait également être coloré et sur fond blanc, avec une police de caractère très ronde.

Les problèmes posés par les contraintes de départ:

Un site qui doit tenir dans une hauteur d’écran pose un certain nombre de problèmes dans l’organisation et la présentation du contenu. Le site des Emaux de Marie est une petite structure web, mais les contenus prennent de la place et la zone qui leur était dédiée une fois le design des pages établi était plutôt restreinte. Comment faire donc pour présenter, en si peu de place, toutes les créations, tous les textes, et toutes les photos annexes que ma cliente voulait voir apparaître? Les essais ont été longs et nombreux!

Les solutions trouvées:

• Si la page ne doit pas bouger, alors c’est le contenu  qui doit se déplacer. La galerie photo est donc organisée par série de 12 vignettes, la navigation entre chaque série se faisant par clic sur des liens numériques ou un bouton « suivant ». La première série disparait pour laisser apparaître la seconde, etc.
• Donner un sens aux petits carrés présents en haut de chaque page en les transformant en petites « boîtes à secrets ». De la page de l’atelier à la page d’erreur, chaque carré cache une image différente, qui apparait au clic par un effet d’agrandissement. La place étant réduite, l’image qui apparait peut-être déplacée d’un endroit à un autre, et retourne se cacher lorsque l’on clique dessus. L’intérêt de ce système est dans la surprise qu’il crée pour l’utilisateur curieux: là où normalement rien ne devrait se trouver, il se passe quelque chose. Les moins curieux passant sans doute à côté de ces petites surprises, ne sont insérées dans les carrés que des images d’importance moindre. Les essentielles sont affichées dans la galerie photo.

Voir le site en ligne