Clinique Dentaire Geneviève Lafrance

person Mon rôle
Design d’interface, Prototypage
schedule Durée du projet
1 mois (Avr. 2021)
group Équipe
Edgar Vehbiu (Motion Designer)
Aperçu du site web de la Clinique Dentaire Geneviève Lafrance
Contexte

Au cours de cette mission en tant que travailleur indépendant, l’agence web Wazoom m’a mandaté pour repenser le site d’un de ses clients, la clinique dentaire Geneviève Lafrance, en mettant l’accent sur le design UI, compte tenu du manque de focalisation UX dans le cadre de ce projet.

Pour commencer, la clinique a dressé une liste de sites qu’elle trouvait inspirants. En collaboration avec Wazoom, nous avons décidé de suivre une approche minimaliste, tout en mettant l’accent sur des interactions et des animations modernes. Ensuite, j’ai créé les maquettes statiques du site pour les versions desktop et mobile, en y ajoutant des annotations pour les animations. Cela s’explique par les défis techniques rencontrés dans Figma à ce moment-là, car la mise en place de ces animations était complexe.

Face à ces défis, Wazoom a fait appel à un motion designer indépendant pour collaborer avec moi. En lui transmettant mes maquettes statiques, nous avons ensuite discuté des animations à intégrer, dans le but de créer une maquette vidéo présentable au client. Cette démarche visait à offrir une représentation plus réaliste du résultat final du site, facilitant ainsi la compréhension tant du client que du développeur.

Globalement, j’ai pu bénéficier d’une liberté créative totale tout au long du projet, avec pour principal impératif de transmettre une image accueillante et apaisante, compte tenu du contexte parfois stressant lié aux visites chez le dentiste.

Inspirations

Ce projet s’est nourri de diverses sources, en particulier pour la conception circulaire, l’utilisation de l’effet de défilement horizontal du texte, l’agencement du texte au-dessus d’une image sur la page d’accueil, et la création d’un demi-cercle sur la page « à propos ». Voici, ci-dessous, quelques exemples qui illustrent ces choix de conception.

Inspiration 1 - Clinique Dentaire Geneviève Lafrance
Inspiration 2 - Clinique Dentaire Geneviève Lafrance
Inspiration 3 - Clinique Dentaire Geneviève Lafrance
Inspiration 4 - Clinique Dentaire Geneviève Lafrance
Maquettes filaires
Maquettes filaires page accueil
Maquettes filaires page à propos
Maquettes filaires nos services
Maquette haute-fidélité animée

Après avoir conçu mes maquettes filaires, je les ai ensuite stylisées avant de les partager au motion designer. Nous avons ensuite collaboré pour discuter des animations que je souhaitais intégrer dans le projet. Le produit final de cette collaboration se matérialise à travers la maquette animée que voici.

Version mobile

Enfin, une dernière déclinaison a été conçue afin de faciliter l’intégration pour le développeur et offrir une meilleure vision du rendu au client sur les appareils mobiles.

Version mobile page accueil
Version mobile page à propos
Version mobile nos services