23 janvier 2020
Aujourd’hui, pour ce premier article, je vous explique de A à Z les étapes cruciales de mon travail sur la refonte du site d’Indieviduals, une entreprise experte dans la mise en place de projets e-commerces, de création de sites, de conception et d’expédition de projets.
Je vous pose d’abord le contexte : à la base ma collaboration avec Individuals datait d’il y a un an. À l’époque, j’étais chargé de m’occuper de la refonte de leurs différentes boutiques de goodies en ligne, incluant celles des célèbres streamers français ZeratoR ou encore Mister MV.
Récemment, Indieviduals m’a recontacté. Cette fois, la société voulait que je me charge de la refonte de son site vitrine, que je vous invite à regarder ici. Pourquoi ? Le site avait été fait rapidement, un peu à la hâte, et il ne correspondait plus vraiment à l’image que l’entreprise souhait transmettre à sa potentielle clientèle. La résolution 2020 était donc de faire une refonte en parfait accord avec son identité.
Je connais bien l’univers Indieviduals. Je comprends bien ses valeurs, je sais ce qu’elle représente, je saisis aussi les envies des créateurs du projet.
J’ai donc pu tout de suite commencer à me lancer dans le travail graphique du site vitrine avec la réalisation de cette illustration en 3D isométrique que l’on peut retrouver sur l’accueil du site.
Je dois vous dire aussi que c’est la première fois que je m’essaye à ce type de modélisation 3D. J’ai procédé à plusieurs tests avant d’obtenir un rendu qui puisse être exploitable sur le site. Pour toute cette partie, j’ai utilisé Cinema 4D.
Suite à ça, j’ai pu commencer une première maquette de l’accueil et je suis arrivé assez rapidement au résultat final. Le but était d’obtenir quelque chose de simple, de clair et avec les informations facilement accessibles. J’ai pu dérouler le reste de la maquette assez facilement en respectant cette contrainte.
Concernant le choix des couleurs, j’avais une certaine liberté dans mes choix : l’utilisation du blanc et du bleu m’a semblé logique et cohérent pour une transition en douceur avec l’ancien site.
Une fois la maquette terminée, j’ai dû réfléchir au choix de la technologie qui serait potentiellement utilisée pour l’intégration du site.
Si on choisissait cette méthode, on partirait sur une techno sans back-end. Très simple et efficace, cette solution permettrait de se concentrer sur les performances du site. Mais le problème est la maintenabilité et l’administration pour Indieviduals.
La choix de partir sur le développement d’un thème WordPress est apparu naturellement car c’était le choix qui a été privilégié sur la précédente version : il n’y aurait pas eu trop de problème pour former les personnes qui seraient chargées de l’administration. Par contre, le choix de WordPress est un peu lourd pour un petit site vitrine et on perdrait un peu en termes de performance.
Angular serait le compromis parfait entre les deux premiers choix. La performance du statique, couplée à une administration avec WordPress via le REST API serait une bonne alternative pour Indieviduals.
Bon, vous pouvez facilement deviner que mon choix s’est porté sur la dernière solution, à savoir Angular.
Le but est d’avoir d’un côté le front qui nous rend le design via Angular et de l’autre la partie administration qui serait dissociée avec WordPress. Le tout doit communiquer avec l’API que fournit WordPress de base. Cette utilisation de WordPress est appelée WordPress Headless. Pour cette première version, je n’ai pas utilisé WordPress pour gérer l’administration, mais son implémentation est prévue dans un futur proche.
Le développement du site est relativement simple. En revanche, le seul point qui a été un peu bloquant a été l’animation au scroll.
L’idée de base était d’utiliser ScrollMagic, que j’avais pu utiliser auparavant, le tout couplé à GSAP (TweenMax). L’intégration de ScrollMagic sur Angular est un peu chaotique, donc j’ai pris le choix d’aller vers le plus simple avec AOS qui est une librairie permettant l’animation d’éléments assez facilement. Pour le coup, la solution fut la bonne car la mise en place a été très rapide.
On arrive maintenant au formulaire de contact.
N’ayant pas encore WordPress d’implanté, je n’avais pas à disposition de moyen d’envoyer de mails. Le choix s’est porté sur NodeJS avec la création d’une petite API via Express pour récupérer les informations du formulaire et de Nodemailer pour l’envoi de mails.
Une fois tout terminé et préalablement testé, j’ai pu mettre en place l’hébergement.
Pour ça, mon choix s’est porté sur Google Cloud qui donne une grande souplesse au tout pour un prix moindre, App Engine pour le petit script NodeJS et un bucket pour le front.
Voilà pour les différentes étapes de ce projet que j’ai pris beaucoup de plaisir à réaliser. J’espère avoir été clair et que cet article vous a plu.
À bientôt pour de nouvelles analyses de mes projets !