Plouf!
Constat de départ
La municipalité de Lyon dispose de 6 piscines ouvertes toute l’année et 5 autres ouvertes selon la saison. Cependant, les informations répertoriées sur le site internet de la municipalite au sujet de ces piscines sont difficilement accessibles, faisant perdre un certain temps de recherche à l’utilisateur.
Réponse
Pour pallier ce problème, un site fictif indépendant (PLOUF!) a été imaginé. Il possède une arborescence claire ainsi que d’une identité marquée et actuelle. Les pictogrammes viennent faciliter la prise d’information tout en participant à rendre l’identité forte et unique.
Rôle
Brand design | UI/UX | webdesign
Contexte
Fictif | Projet de 1ere année de BTS
Année
2018
Sommaire
1 | Identité visuelle
2 | Pictotèque
3 | Navigation
4 | Produit final
Identité visuelle
Recherches
& réflexions
Lisible | Epuré | Double niveau de lecture
L’identité visuelle de PLOUF a été pensée afin de de faire des pictogrammes animés, un élément à part entière du site visant à simplifier la navigation.
J’ai souhaité créer un univers jovial et espiègle tout en m’éloignant de l’idée que l’on peut se faire d’une piscine municipale.
Le logo
Pour le logo, la typographie simplifica a été choisie. La forme du F rappelle celle des vagues de la piscine.
L’animation a été faite en 2021, lors d’une reprise du projet pour le mettre à jour.
Typographie & couleurs
Les typographies sont linéaires afin de créer un ensemble cohérent avec les pictogrammes. Les couleurs sont deux bleus saturés dont un bleu profond rappelant l’univers des piscines.
Les pictogrammes
Afin de faciliter la prise d’information et de donner vie à l’identité du site, une famille de + 16 pictogrammes animés ont été produit. Ils représentent chacun un service ou une installation proposé par les piscines de Lyon.
Navigation
Le site PLOUF! s’articule autour d’une navigation simplifiée et centrée sur les piscines de Lyon en prenant en compte les niveaux d’informations et les besoins des utilisateurs.
Menus déroulant
Pour chaque page de piscine, des menus déroulants ont été intégrés à chaque section afin de permettre à l’utilisateur de se rendre directement à l’information qui l’intéresse.
Produit final
Version mobile
La version desktop est une adaptation de la version mobile, reprenant les mêmes codes.
La mise en page a été entièrement pensée pour faciliter l’adaptation responsive.
