École Pratique

Contexte

L'École Pratique forme du Bac+2 au Bac+8, en alternance ou en formation initiale, sur le campus de Luminy à Marseille. À la suite d'un appel d'offres de la CCI, j'ai travaillé avec Brandparty sur la refonte de son site. L'ancien site était plat et froid, avec des pages denses où l'information était difficile à repérer.

Je partais de presque rien : un logo, des couleurs pour les filières et un seul visuel de campagne, où deux grandes flèches se répondent, l'une pour entrer dans l'école, l'autre pour en sortir avec un emploi. Il fallait construire toute une identité à partir de cette base, et faire vivre six grandes familles de formations sans perdre le visiteur.

Ma mission

1. Direction artistique
2. Webdesign du site
3. Ergonomie et structure des pages
4. Création et déclinaison de la charte graphique
5. Prototypes sur Adobe XD

Une identité dynamique et colorée

L'ancien site reposait sur des aplats gris, des cadres épais et des titres bleus sur fond blanc. Du visuel de campagne, j'ai gardé les deux flèches, le bleu de la CCI et le jaune, auxquels j'ai associé les couleurs des filières. J'ai dynamisé la flèche pour en faire une forme à part entière, qui revient d'une page à l'autre : dans l'en-tête, sur les cartes de filière, dans les boutons.

Autour d'elle, j'ai développé une charte faite de formes et de motifs, de grands aplats de bleu et de blanc qui rythment le défilement, et de jaune par petites touches pour apporter de l'éclat. Le campus se trouve aux portes d'un parc national, il fallait absolument en profiter et utiliser les superbes photos à notre disposition. Pour la typographie, j'ai choisi la Poppins pour sa rondeur et sa lisibilité.

Une couleur pour chaque filière

L'école compte six grandes familles de formations, chacune associée à sa couleur :

1. Bâtiment durable et transition énergétique
2. Comptabilité, finance et gestion
3. Immobilier
4. Informatique et Green IT
5. Management et commerce
6. Nos formations continues

Le bleu de la CCI reste la couleur commune qui relie l'ensemble. Chaque page de filière prend ensuite la couleur de sa famille : le grand titre sur la photographie, les titres de section, les encadrés des formations et jusqu'au bouton « Candidater » de l'en-tête. Utiliser 8 couleurs ensemble demande un peu de rigueur pour conserver une bonne lecture.

Une page d'accueil construite pour mener à la candidature

Un futur étudiant arrive avec deux questions : qu'est-ce que je peux étudier ici, et est-ce que ça débouche sur un emploi ? J'ai construit la page d'accueil pour y répondre dans cet ordre, comme un parcours.

Les six filières viennent en premier, pour que chacun trouve tout de suite sa voie. Les chiffres clés rassurent ensuite sur les débouchés, puis le campus en images rend l'école concrète. Du contenu plus spécifique, utile au référencement, et les actualités montrent enfin une école qui vit.

À chaque étape, la suite est à portée : chaque filière invite à découvrir ses formations, et le bouton « Candidater » reste présent sur toutes les pages : dans l'en-tête sur ordinateur, et fixé en bas de l'écran sur mobile.

Des fiches de formation qui aident à décider

La fiche de formation est la page où se joue la candidature, et c'était la plus difficile à lire sur l'ancien site : une longue colonne de texte, sans repère. J'ai conservé toute l'information en la structurant autour d'un double menu. Le menu principal reste disponible, et une barre d'ancres propre à la fiche (points forts, programme, débouchés, admission, contact) permet d'aller directement à ce que l'on cherche.

Les infos clés (titre, format, durée, calendrier) sont regroupées dans une colonne à droite, avec en dessous un formulaire pour être rappelé. Dès le haut de la page, trois niveaux d'engagement sont proposés : télécharger la brochure, demander à être rappelé, ou candidater.

Résultat

L'École Pratique dispose enfin d'une identité graphique cohérente et forte. Les flèches, les formes, les couleurs de filière et la typographie forment un ensemble reconnaissable, qui donne à l'école une personnalité que l'ancien site ne lui offrait pas.

Le site est aussi plus ergonomique et plus clair. Chaque visiteur sait où il se trouve, accède vite à l'information qu'il cherche et garde toujours un chemin vers la candidature, sur ordinateur comme sur mobile.

Surtout, il donne envie. Là où l'ancien site se contentait d'informer, celui-ci fait ressentir l'énergie de l'école et invite à franchir le pas. En ligne depuis novembre 2026, il reste proche de mes maquettes.