Capture d'écran de la page d'accueil du site Leader Aventure

Leader Aventure est une école de pilotage de 4×4 et SUV. Elle propose des stages et des formations pour les particuliers et les entreprises.

Le client a fait appel à mes services afin de moderniser l’interface de son site catalogue, et le rendre responsive.
Mon rôle a donc été de repenser l’interface et de modifier l’intégration des pages déjà existantes dans le CMS mis au point et géré par le prestataire Now Editions

Le projet

Logo Leader Aventure
Le logo fourni par le client

Pour concevoir la nouvelle interface, je suis parti du nouveau logo fourni par le client et du contenu de l’ancien site.

À partir du logo, j’ai cherché la palette de couleurs et les polices de caractères (fonts).

À partir des pages existantes, j’ai repensé l’organisation de la navigation, ainsi que la page d’accueil afin que celle-ci donnent les informations essentielles sur l’entreprise.

Couleurs et polices de caractères

Le choix des couleurs

Le logo est composé des couleurs orange et jaune, du noir et du blanc. La couleur dominante est le orange. La couleur complémentaire du orange est le bleu. Je décline le bleu et le orange dans une teinte plus sombre et j’ai les couleurs pour créer la palette.

Palette de couleurs
Palette de couleurs

Les polices de caractères

J’ai choisis la police Open Sans car elle est neutre et d’une excellente lisibilité. Les titres sont dans le style ‘Condensed’ avec un corps plus gras afin de les distinguer des textes, lesquels sont dans le style regular.

Repenser la navigation

Au niveau de l’architecture

Le site était initialement constitué de deux colonnes:

  • une colonne pour la navigation incluant toutes les entrées de menu
  • une colonne pour le contenu

Pour la nouvelle interface, je suis parti sur une seule colonne de 1170px. Le contenu occupe ainsi toute la largeur, ce qui permet d’aérer les différents éléments.

Par contre, la navigation initiale rassemblait toutes les entrées de menu. Trop pour tenir dans les limites de cette unique colonne. Je l’ai donc séparée en deux parties:

  • le menu principal qui regroupe l’activité de l’entreprise
  • le menu secondaire qui regroupe les informations telles que les témoignages clients, les partenaires, les liens professionnels…

Au niveau de l’interface

Le menu principal est placé en haut de page. Le menu secondaire est placé dans le le pied de page sous le titre ‘À propos’.

Capture d'écran de la navigation
Le menu principal est situé en haut de la page. Les sous-menus apparaissent au survole de la souris.
capture d'écran du pied de page
Le menu secondaire est situé en bas de la page sous le titre ‘À propos’

Sur la version mobile, le menu principal est caché par défaut et apparaît quand l’utilisateur appuie sur le bouton ‘menu’. Il est pas contre impossible de faire apparaître les sous menus au survole de la souris. Pour pallier à cette contrainte, ceux-ci sont toujours affichés.

navigation sur smartphone
La navigation sur mobile. Sur l’image de gauche, la navigation est fermée. Sur l’image de droite, elle est ouverte, ainsi que les sous-menus toujours affichés.

Repenser la page d’accueil

Pour concevoir la page d’accueil, je me suis inspiré du principe du site One Page. Le principe de celui-ci est de concevoir une seule page sur laquelle est affichée l’ensemble du contenu divisé en plusieurs parties.
Suivant ce principe, j’ai donc divisé la page d’accueil en 3 parties:

  • À qui s’adresse Leader Aventure
  • Quelles sont les prestations proposées
  • Témoignages clients

L’idée est ici de proposer une navigation plus détaillée. Chaque bloc, distingué visuellement par un fond blanc et une ombre portée, est le résumé d’une page avec un lien permettant d’y accéder.

À qui s'adresse Leader Aventure
1ère partie : À qui s’adresse Leader Aventure.
Prestations proposées
Seconde partie : Quelles sont les prestations proposées.
Témoignages clients
3ème partie : Témoignages clients

Résultat final

Page d'accueil sur l'ensemble des devices
Page d’accueil sur les différents devices

Téchnologies utilisées

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