Hôtel des arts

Refondre l'identité numérique de l’Hôtel Des Arts de Toulon

Étude de cas 2021
UX design / UI design / Identité

Photo de la façade très colorée de l'Hôtel des arts de Toulon

Le contexte

Proposer une offre culturelle de qualité

Nous avons été mandatés pendant 3 ans pour accompagner la métropole Toulon Provence Métropole dans sa communication territoriale et numérique. Conseil, conception, réalisation et suivi de réalisation sont les compétences que nous mettons au profit du territoire. Parmi les missions qui nous ont été confiées, la première a été de refondre l’identité numérique de l’Hôtel des Arts à Toulon.

Les enjeux de la refonte sont d’améliorer le design de l’interface mais aussi l’ergonomie et les parcours utilisateurs.

Identité visuelle

Un langage graphique inspiré du bâtiment

La refonte de l’identité d’Hôtel des Arts s’inspire de l’architecture du bâtiment, patrimoine emblématique qui rayonne sur l’ensemble du territoire toulonnais.

Nous avons créé un panel de formes géométriques (arc de cercle, verticale, diagonale…) issues de la façade du bâtiment afin d’articuler un typogramme.

Formes géométriques (arc de cercle, verticale, diagonale…) inspirées de la façade du bâtiment
Logotype de l'Hôtel des Arts de Toulon. Nom "Hôtel des arts TPM" aposé aux initiales "HDA" issues des formes géométriques inspirées de la façade de l'Hôtel des Arts.

Conception de l’interface

Penser l’interface en mobile-first

Le site Hôtel des Arts a été pensé en mobile first, puis décliné sous les différents formats tablette et desktop, dans un prototype navigable pour itération avec le client. Le prototype interactif nous a permis de déceler en amont l’ensemble des questions clés de l’ergonomie du projet.

Design de l’interface

Singulariser pour valoriser les expositions

Le design est dynamisé avec un éventail de couleurs définies en amont qui associe chaque visuel d’exposition à une teinte. Ainsi, la couleur porte l’identité de l’exposition.

Sur la page d’accueil, au fur et à mesure du scroll, les couleurs de chaque exposition se succèdent en fondu dégradé.

Maquette UI desktop de la page d'accueil du site Hôtel des Arts, avec une image de une sur un aplat jaune
Maquette UI desktop de la page détails d'une expo, avec la couleur dominante associée à cette expo et une grande image de une
Maquette UI desktop de la page Agenda, avec une liste d'expositions et une couleur associée à chaque expo
Maquette UI desktop de la page détails d'un événement, avec une image de une et un grand titre en typo avec sérif
Maquettes UI format mobile de 3 écrans du site web de l'Hôtel des Arts de Toulon
Maquettes UI format tablette de 2 écrans du site web de l'Hôtel des Arts de Toulon

Témoignage

« L’équipe de Perméable nous a accompagné sur 3 projets de sites internet ces derniers mois. Je salue leur capacité à rapidement cerner les enjeux, leur écoute et la justesse de leurs propositions. J’apprécie leur réactivité, leur créativité, leur adaptabilité aux contraintes du projet et la qualité de leur UX design.Une belle collaboration ! »

Sandrine Moulinas
Direction de la communication, Métropole Toulon Provence Méditerranée

Projet suivant

Inria Academy

Conception du site internet Inria Academy, formations de pointe aux technologies numériques