Capture d'écran de la page d'accueil du site Lovel

La société Lovel conçoit et vend des vélos électriques.
Elle avait besoin d’un site catalogue afin de les présenter.

L’architecture du site a été élaborée entre le client et le chef de projet.
Mon rôle a été de concevoir l’interface en suivant cette architecture et de l’intégrer dans le CMS mis au point et géré par le prestataire Now Editions

Le projet

Logo Lovel
Le logo fourni par le client

Le site s’articule autour des 3 vélos proposés dans le catalogue, et d’un module de customisation où l’internaute peut personnaliser les différents éléments qui composent le vélo.

Couleurs et polices de caractères

Le choix des couleurs

Pour concevoir la palette de couleurs, je suis parti du logo fourni par le client. Celui-ci est composé des couleurs noir et rouge.

  • Noir pour les textes
  • Rouge pour les icônes, les liens etc…

Les polices de caractères

  • Une seule police : Lato

J’ai choisis la police Lato car elle est neutre et d’une excellente lisibilité. Les titres ont un corps plus gras que les textes, lesquels sont dans un corps light.

Focus sur la page d’accueil

L’idée était de voir les 3 vélos sur la page d’accueil.
Celle-ci est composée d’un slider dans lequel défile une photo de chaque vélo, le nom du vélo et un lien permettant d’accéder à la fiche.
Sous le slider, on retrouve à nouveau les 3 vélos, cette fois-ci présentés brièvement, toujours avec le lien d’accès à la fiche.

Page d'accueil
La page d’accueil composée d’un slider et d’une brève présentation de chaque vélo.

Focus sur la page produit

La page produit est composée de 5 parties.

  • Un slider composé de 3 photos du vélo sélectionné.
  • Une description, des liens de partage sur les réseaux sociaux, et un lien vers une galerie de photos.
  • Une vidéo de démonstration.
  • Les caractéristiques techniques et le prix.
  • Les liens vers les autres vélos.

Chaque partie occupe toute la largeur de la grille (1280px), sauf le slider qui occupe la largeur de l’écran. Ainsi, chaque partie se distingue visuellement des autres.

Slider de la page produit
Le slider.
La présentation du vélo
La présentation.
La vidéo de démonstration
La vidéo de démonstration.
Les caractéristiques techniques
Les caractéristiques techniques.
Les autres vélos
Les autres vélos.

Résultat final

Résultat final
Résultat final

Téchnologies utilisées

  • Logo HTML5
  • Logo CSS3
  • Logo jQuery
  • Logo SVG