Refonte de site anonymisé

Spormax

Centre d’entrainement multi disciplines

Des cours de sports de combat

Le projet est une refonte d’un site de sport. Je présente ici, seulement la page d’accueil.

Le commanditaire trouve que son site a mal vieilli. Il désire un visuel fort, moderne, épuré, avec des touches colorimétriques qui diffèrent de la concurrence.

Mon choix : se détacher des tons rouges, souvent vu dans le monde du sport.

Aperçu

Le site d’origine se composait d’une page d’accueil, et une page par discipline (pour définir chaque disciplines). Pour aérer les informations, il m’a semblé pertinent d’étendre les données sur plusieurs pages.

L’accueil permet de teaser chaque objet (la salle, les coachs, les disciplines, les abonnements et enfin la boutique.)
La page disciplines liste les disciplines avec une définition, le coach et les horaires des cours.
La page forfaits offre un détail clair et éclairé des différents types d’abonnements. Également, cette page offre un formulaire téléchargeable avec les conditions requises pour la pratique sportive.
La page contact propose un formulaire sécurisé pour envoyer un message au centre.
La page boutique, ajouté par rapport à mes observation, permet de mettre en lumière les articles vendus physiquement dans le centre.
Le compte, ajouté par rapport à mes observation, permet aux clients et administrateurs d’avoir une plateforme pour les abonnements, les achats/ventes des articles et enfin, une messagerie privée.

L'animation des liens

Voici le code qui présente l’animation des liens dans la barre de navigation.

L'animation des CTA

Voici le code qui présente l’animation des boutons dans les sections de chaque page.

L'animation des vignettes

Voici l’animation qui s’articule pour donner des détails aux vignettes.

L'animation lors du scroll

Lors du scroll, les titres et les lignes associées grandissent comme ci-dessous.

L'animation des titres

Voici un effet qui peut s’articuler pour certains titres.

L'animation des liens

Voici la version hover des liens dans le footer.

Retour sur le web

Si vous ne l’avez pas encore fait, je vous invite à découvrir d’autres travaux web que j’ai réalisé lors de mon parcours en tant que concepteur designer UI. Je vous invite également à découvrir qui je suis.