MEDIA 2026

PROJET WEB

Le site des PO 2026 – Les coulisses

Comment le site est passé d'une page brute à ce que tu vois aujourd'hui. Fais défiler : la maquette se construit étape par étape.

00 / 09

  1. Le site brut

    Au départ : du contenu, mais pas de direction. Une seule police, aucune couleur, des blocs collés et des formes simples faites en code.

  2. Les couleurs

    Une palette de coucher de soleil : bleu ciel, rose, corail, crème, tenue par un bleu nuit pour les textes et les boutons.

  3. La typographie

    Trois polices, trois rôles : Asimovian pour les titres, Space Mono pour les textes et les boutons, Shippori Mincho pour le japonais. Les tailles guident l'œil.

  4. Les espacements

    On donne de l'air : marges régulières, coins arrondis, ombres nettes. Le compte à rebours chevauche le bas du décor, comme un panneau de gare.

  5. Les dessins maison

    Le Fuji, la porte et les nuages en formes de code sont remplacés par les dessins vectoriels de l'équipe, faits dans Illustrator. Les cerisiers arrivent.

  6. Le hero repensé

    L'adresse flottait au-dessus du logo et la date était seule en bas. Maintenant : le logo, puis la date et le lieu côte à côte, à la même hauteur.

  7. Le décor s'anime

    Le renard respire, les nuages dérivent, les blocs apparaissent au défilement. Tout reste doux, et s'arrête si l'ordinateur demande moins de mouvement.

  8. Un soleil à l'heure suisse

    Le soleil suit l'heure réelle et tourne autour du Fuji. La nuit, le ciel s'assombrit et le renard s'endort. Ici, une journée entière défile en quelques secondes.

  9. Le texte qui roule

    Les petites phrases en japonais affichaient les deux langues à la fois. Maintenant, le japonais et le français s'échangent comme les rouleaux d'une machine à sous.

  10. Un pied de page qui respire

    Quatre blocs avec le même espace entre eux, les logos Média et Vaud de même hauteur avec CPNV en dessous, et les crédits de l'équipe.

ET MAINTENANT

De nouveaux projets

Le site a grandi avec les élèves : le magazine Divergences rejoint les projets de création d'entreprise, et la page Projet web rassemble les sites réalisés dans l'option.

Voir le site → Voir Divergences → Tous les projets web →