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