Explorabox
2025
Dans le cadre de mon TPI – CFC d’interactive media designer, j’ai été mandatée pour concevoir et développer une identité de marque cohérente et multisupport pour ExploraBox, une plateforme fictive proposant des expériences surprises à travers toute la Suisse.
L’ensemble devait refléter les valeurs centrales du projet : curiosité, simplicité, surprise, ancrage local et durabilité, surprise, tout en respectant les attentes du public cible.
*Ce projet a été créé dans le cadre de ma formation et est donc fictif.
Choix du style
L’identité visuelle du projet repose sur une palette contrastée, une typographie à forte personnalité, et des éléments graphiques simples, mais systématisés.
Ces choix visent à construire une image de marque accessible, mais marquée, capable d’émerger dans un environnement concurrentiel souvent neutre ou standardisé.
L’ensemble forme un design système cohérent, flexible et facilement déclinable sur tous les supports (site, application, print), assurant une reconnaissance immédiate tout en gardant une forte lisibilité.
Étapes de conception
La maquette a été réalisée dans Figma en suivant une méthode itérative centrée sur l’utilisateur.
J’ai d’abord structuré le contenu via un zoning, un sitemap et un wireframe pour poser les bases de la hiérarchie et valider la structure globale.
Composants et variables
La maquette UI hi-fi intègre des composants réutilisables pensés pour le développement web, avec des comportements responsives.
Des tests utilisateurs ont permis d’ajuster la lisibilité, les contrastes et l’ordre des sections.
Enfin, certains éléments ont été modifiés après l’intégration pour optimiser l’expérience sur écran.
Code
Le site a été développé avec Visual Studio Code (HTML, SCSS, JS), en utilisant le starterkit de eikon.
Le versionnage a été assuré via GitHub, ce qui m’a permis de faire des tests et corrections en dehors des heures de travail, notamment lors de problèmes bloquants.
Pour faciliter l’intégration responsive, j’ai utilisé la grille Bootstrap ainsi que certains composants intégrés, comme les accordéons et les formulaires. Les sliders ont été réalisés avec le plugin Swiper, qui permet une gestion flexible des sliders avec plusieurs options de personnalisation.
J’ai également installé le plugin PostHTML afin de créer des composants HTML réutilisables et facilement modifiables, notamment pour le header, le footer, la FAQ etc.
