Lézards Créationlz

Refonte de site pour les laboratoires Analysis 🔬

Publié le 5 juin 2018

Analysis est un laboratoire multi-sites regroupant 6 laboratoires dans les Vosges. Sa création a permis de répondre à l’évolution économique et réglementaire de la profession tout en maintenant une biologie de proximité.

Analysis à contactĂ© l’agence LĂ©zards’CrĂ©ation pour rĂ©aliser leur refonte de site web. C’est le dernier site web que j’ai rĂ©alisĂ© dans le cadre de ma licence professionnelle webdesign en alternance dans l’agence. Une graphiste de l’agence Ă  rĂ©alisĂ© le webdesign et j’ai rĂ©alisĂ© le dĂ©veloppement web du site.

🥼
👩🏻‍⚕️

Identité graphique

Nous avons essayé de nous détacher le plus possible du côté médical des laboratoires pour ne pas brusquer ou effrayer les utilisateurs. Nous avons donc pensé l'interface pour qu'elle soit douce, agréable, réconfortante. le design du site doit être aéré pour ne pas surcharger l'utilisateur d'information.

L'utilisation de couleurs apportant confiance et sérieux est crucial pour un site qui aborde le domaine de la santé. Le bleu sombre - marine est la couleur principale de l'interface du site, il est efficace car il est assez sombre pour l'utiliser sur des grandes zones d'aplats. La couleur tonique est un bleu beaucoup plus clair, il nous permet de mettre en valeur des éléments à l'intérieur de sections portant la couleur principale. Nous l'avons aussi utilisé en dualité avec la première couleur pour les éléments de titrage, ce qui reflète une certaine précaution.

Harmonie colorée

[harmonie_coloree]

Le gris clair - presque blanc - nous permet d'habiller tous les fonds se trouvant derrière le contenu du site. Cela limite d'avoir un fond trop froid, du fait qu'il ait une légère teinte grise. L'utilisation de motif en pointillé pour certaines parties en arrière-plan du contenu fait un rappel direct avec la précision et le domaine d'expertise d'Analysis.

L'aperçu des maquettes réalisées avant le développement du site se trouvent à la fin de l'article.

DĂ©veloppement

Pour le développement, nous avons principalement utilisé des modèles de pages Wordpress afin de constituer les quelques mises en page de la maquette. Les pages qui sont agencées selon des onglets ont été générées sous forme de slider avec le plugin JS Swiper. Pour le contenu et sa mise en forme, nous avons constitué un contenu flexible dans le back-office de Wordpress avec Advanced Custom Fields Pro (ACF). Cela permet de mettre a disposition des champs de paramétrage de mise en forme directement lors de l'édition de page, cela limite aussi la quantité de code à écrire pour prévoir les différentes mises en page puisque tout en géré sur le même morceau de code.

Une des fonctionnalités prévues était le paiement en ligne des factures. Nous avons donc intègré un TPE de paiement ainsi qu'un formulaire fait sur mesure. Nous avons utilisé une expression régulière en javascript pour vérifier un champ en particulier. Je trouve que c'est un moyen simple, rapide pour vérifier des informations.

Tous mes projets