Le site d’une consultante en enregistrement des médicaments : reconstruit, avec un schéma animé

La tâche

Finaliser un site réalisé par un autre développeur alors qu’il ne reste aucun fichier source : conserver le contenu, rendre le schéma clair et vivant, et soigner l’affichage du site sur téléphone.

Ce que j’ai fait

• Le site reconstruit à partir d’une copie : un code HTML propre, tout le texte lisible sans JavaScript
• Le cycle complet d’enregistrement sous forme de schéma SVG : sur ordinateur, les étapes s’allument tour à tour, un clic fige une étape et ouvre sa description
• Sur téléphone, le schéma devient un récit : l’anneau se fixe en haut de l’écran, la comète et la surbrillance suivent les cartes au fil du défilement
• Des animations sans bibliothèque : les blocs apparaissent au défilement, les chiffres s’incrémentent, les cartes s’éclairent sous le pointeur, les photos ont un léger effet de parallaxe
• En arrière-plan du premier écran, des molécules et leurs liaisons dessinées sur un Canvas ; moins nombreuses sur téléphone, pour que le texte reste lisible
• Les images prises au hasard remplacées par des visuels pertinents, les contacts qui ouvrent la messagerie depuis un bouton, l’adresse qui se copie en un clic
• Versions russe et anglaise, menu mobile utilisable au clavier, progression de lecture dans l’en-tête
• Le réglage « réduire les animations » est respecté : les animations se désactivent, le contenu reste