Armurerie Évrard

Site vitrine Wordpress avec catalogue de produits

L’armurerie Évrard est une boutique situé à Desvres dans le Pas-de-Calais. Son projet était de refondre l’ancien site et de montrer les produits disponibles en magasin via un catalogue en ligne sans e-commerce. Concernant la partie technique, il s’agit d’un site Wordpress avec WooCommerce.

L’enseigne avait besoin de mettre en avant son atelier, son stock de produits d’occasion, d’insérer des bannières et vidéos données par le fournisseur. Ils voulaient aussi un design où ils peuvent insérer une photo en arrière plan comme sur cette exemple.

Design process

Je suis intervenu en tant qu’UI designer et intégrateur. Olivier Kowalski s’est occupé du développement Wordpress et JS. J’ai d’abord fait valider l’aspect général du site via la page d’accueil en version “bureau”, puis je suis passé à la création du site dans le navigateur avec CSS. Dans un environnement GIT, le projet se déroule à merveille. Je transmet mes besoins en terme de structure HTML à Olivier puis je me m’occupe du design responsive en CSS. C’est rapide et efficace.


Pour ce projet, la navigation et l’image d’arrière plan restent fixés ce qui rend la capture “pleine page” impossible à faire. Je vous invite à visiter le site pour avoir un aperçu réel du design que j’ai conçu.


Résumons. Le projet devra avoir deux navigations (activité du magasin et catalogue) et le client souhaite une image d’arrière plan. Je n’aime pas vraiment l’exemple donné par l’armurerie parce que le contenu perd sa lisibilité. Un filtre de couleur superposée à une image de fond fonctionne bien pour une en-tête parce que c’est court à lire mais pour le corps de texte, c’est plus fatigant pour l’œil parce que cela créé du bruit visuel.

Je suis parti sur un design à 3 colonnes. À gauche, le logo et la navigation des pages statiques, au centre le contenu et à droite — à partir de 1500 pixels de large, l’image désirée par le client.


Accueil

Comme il s’agit d’un commerce local, j’ai placé les informations d’ouverture et de contact tout en haut afin qu’elles soient accessible instantanément. J’en ai profité pour placer un bouton qui amène vers la page notre atelier puisque c’était une demande du client qu’elle soit mise en avant.

En dessous, nous avons le menu du catalogue où l’item occasion est mis en avant par rapport aux autres items.

Puis viens le carrousel. En temps normal, je fais tout mon possible pour éviter le recours à ce système pour promouvoir du contenu parce qu’ils ne marchent pas. Mais ici, l’enseigne reçoit des bannières et des vidéos directement de son fournisseur.

Le reste du contenu


Nos cartouches

Exemple d’un bloc présentant les différentes cartouches d’une famille

Notre atelier

Design “desktop” du contenu de la page “Notre atelier”

Page produit

Les pages produits contiennent un titre, un prix, une galerie photo, une description, parfois une vidéo, les caractéristiques et les produits associés.



Crédit du projet

  • UI Design et intégration CSS : Moi-même
  • Arborescence, Développement Wordpress & JS : Olivier Kowalski

Visiter le site

Des changements ont pu être fait par rapport aux captures d’écrans présentées dans cette étude de cas

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.