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

Gostyle est une entreprise spécialisée dans le changement complet d’ascenseurs.

Le site vitrine de la société avait déjà plusieurs années. Mon rôle a été de mettre à jours l’interface et de l’intégrer dans le CMS mis au point et géré par le prestataire Now Editions

Le projet

Logo Gostyle ascenseurs
Le logo fourni par le client

Comme pour le site de Leader Aventure, je suis parti du logo fourni par le client et du contenu de l’ancien site pour concevoir la nouvelle interface.

Couleurs et polices de caractères

Le choix des couleurs

J’ai repris les couleurs du logo pour constituer la palette de couleurs. Celui-ci est composé des couleurs rouge et bleu.

  • Le bleu est utilisé pour les titres, les liens, les icônes et les bordures.
  • Le rouge est utilisé pour faire ressortir certains titres.

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.

Focus sur la navigation

La navigation est conçue comme un tableau de boutons d’ascenseurs, les entrée de menu correspondant aux différents boutons. Chacune des entrées est illustrée par une main à l’index tendu, laquelle symbolise l’action d’appuyer sur le bouton pour se rendre à l’étage désiré. Ici, nous changeons de page.

La navigation
Sur la navigation, chaque entrée de menu est illustrée par une main dont l’index est tendu, semblable à laction d’appuyer sur un bouton.

Autre aspect de la navigation : elle reste toujours apparente. Elle se déplace avec le contenu mais se fixe en haut de l’écran lorsque le contenu de la page dépasse les limites du navigateur. Ainsi, même lorsque l’internaute atteint le bas de page, la navigation reste accessible.

La navigation reste toujours visible
La navigation reste toujours visible à l’écran, même quand l’internaute atteint le bas de la page.

Résultat final

Résultat final
Résultat final

Téchnologies utilisées

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