Projets

Publié le 17 mai 2017

One page pour Alessio Agencement đŸȘ‘

Alessio Agencement est une filiĂšre du groupe Ravello. La sociĂ©té a pour vocation de proposer des produits destinĂ©s Ă  l’amĂ©nagement intĂ©rieur et extĂ©rieur des espaces de vie. Elle est localisĂ©e dans une ville des Hautes Vosges : La Bresse. Ce site Ă  Ă©tĂ© rĂ©alisĂ© dans le cadre de mon stage de dĂ©veloppement web dans l'agence de communication LĂ©zards'CrĂ©ation et est disponible Ă  l'adresse : http://alessio-agencement.fr  

Identité visuelle

Le site web vitrine pour Alessio agencement est donc composé d'une seule page qui présente l'entreprise et expose ses domaines d'expertise.

Harmonie colorée

Le design du site se veut simple et aéré pour refléter la qualité des services de Alessio agencement ainsi que son sérieux. L'harmonie colorée se compose en plus de noir et du blanc de deux couleurs : un gris et un brun-doré. [harmonie_coloree]

Typographie

La typographie choisie Ă  Ă©tĂ© Open Sans. Elle dispose de nombreuses dĂ©clinaisons et permet de nuancer le texte courant des titres. Elle est trĂšs lisible mĂȘme dans une petite taille de corps de texte car elle ne dispose pas d'empattements. C'est donc un bon choix puisqu'elle permet de mettre en forme les textes et est adaptĂ©e Ă  la lecture sur le web.  

Maquettes

Le site est composé respectivement de :
  • Un menu de navigation fixe reprenant le logo de Alessio agencement et plusieurs liens menant chacun Ă  une partie du site
  • Une entĂȘte comprenant la tagline, les domaines d'expertises de la sociĂ©tĂ© et un slider pleine page
  • Une section prĂ©sentant la sociĂ©tĂ© et ses valeurs
  • 3 sections, chacune dĂ©crivant les services de l'entreprise : amĂ©nagement intĂ©rieur, amĂ©nagement extĂ©rieur, autour du verre
  • Une section de contact avec un formulaire permettant de contacter l'entreprise, des informations sur leur emplacement et une Google Map.
Voici trois extraits de la maquette réalisée par une graphiste de l'agence Lézards'Création :  

DĂ©veloppement

J'ai dĂ©veloppĂ© le site avec le CMS Wordpress. Cela permet au client de pouvoir modifier le contenu du site comme le texte et les images facilement dans un but de pĂ©rennisation. Pour faciliter la mise en page suivant une grille de 12 colonnes et les alignements, j'ai utilisĂ© Bootstrap qui ma permis que la disposition des Ă©lĂ©ments soit parfaite rapidement. La plupart des informations sur la page sont intĂ©grĂ©es avec des champs personnalisĂ©s ACF (Advanced custom fields) ce qui permet au client de pouvoir modifier facilement les Ă©lĂ©ments de contenu. Bien que l'utilisation de ce plugin Ă  facilitĂ© l'intĂ©gration, le fait d'avoir toutes les informations sur la mĂȘme page ainsi que de ne pas laisser la possibilitĂ© de rajouter des colonnes de contenu a considĂ©rablement augmentĂ© le nombre de champs ACF. Ne pouvant pas utiliser de rĂ©peteurs, chaque Ă©lĂ©ment doit ĂȘtre associĂ© Ă  un champ prĂ©alablement crĂ©Ă©. Cela reprĂ©sente des dizaines de champs trĂšs similaires les un aux autres et c'est cela qui a fait la principale difficultĂ© du dĂ©veloppement. La librairie slick.js Ă  Ă©tĂ© utilisĂ©e pour intĂ©grer les sliders et fancybox.js pour les galeries. D'autres librairies comme AOS, parallax.js et jQuery ont Ă©tĂ©s utilisĂ©es pour animer et faire des effets visuels sur la page.  

Bilan

Ce projet a Ă©tĂ© trĂšs agrĂ©able Ă  rĂ©aliser car j'ai beaucoup aimĂ© la maquette graphique, ce qui m'a motivĂ© pour le dĂ©veloppement du site. Bien qu'il a fallu ĂȘtre trĂšs concentrĂ© pour ne pas faire d'erreur avec les champs personnalisĂ©s, tout le site s'est construit dans de bonnes conditions et le rĂ©sultat me plaĂźt beaucoup : http://alessio-agencement.fr