LA CRéation du site

Ne disposant d’aucune connaissance en développement web au départ, j’ai néanmoins choisi de relever le défi en prenant en charge la réalisation du site internet responsive sur Framer, en tant que membre du pôle web. À partir des wireframes conçus par d’autres membres du groupe sur Figma, j’ai assuré l’intégration et le développement, en me formant au fur et à mesure. Pour créer un questionnaire interactif connecté à une base de données, j’ai appris en autonomie le langage React, soutenue par mes enseignants et en m’appuyant sur des outils comme ChatGPT.

Dès l’arrivée sur le site, l’utilisateur découvre une landing page épurée et intuitive, conçue pour donner envie d’aller plus loin. Elle présente un bouton d’appel à l’action visible, permettant de lancer directement le questionnaire, ainsi que plusieurs panneaux informatifs statiques exposant le concept de Kedis., son fonctionnement et ses objectifs. Une FAQ déroulante répond aux interrogations courantes, et des liens vers nos réseaux sociaux complètent cette première immersion.

Le design du site repose sur une direction artistique pensée par Maximilien Mattagne, qui a servi pour tout l’univers visuel : logo, typographies, palette chromatique et éléments graphiques s’allient pour offrir une expérience responsive et accessible sur tous types d’écrans.

Enfin, j’ai mis en place une base de données sur Excel que j’ai connecté grâce à JSON au code regroupant des recommandations d’adresses, permettant ainsi une génération de résultats personnalisés et réellement adaptés aux attentes des utilisateurs.

LES COMPOSANTS

Chaque type d’interaction a été pensé comme un asset à part entière. Nous avons fait le choix de varier les formats de réponse pour éviter toute monotonie. Certaines prennent la forme de sliders, d’autres de checkboxes. On retrouve des boutons radio et des boutons simples avec pictogrammes pour des réponses plus visuelles et directes. Une attention particulière a été portée à la responsivité, pour garantir une expérience optimale quel que soit le support de navigation.

le récapitulatif

Il se présente sous forme de carrousel de « fiches-lieux ». Lorsqu’un lieu est sélectionné, une fiche détaillée s’affiche avec des informations complémentaires : les horaires, l’adresse, une description de l’endroit, le lien du site internet et des badges illustrant ses spécificités (PMR, toilettes, parking, wifi, coup de cœur, espace fumeurs, terrasse, etc.).