Aller au contenu

[001] Identité et site

Festival de la rue d’Aubagne

Client
Festival de la rue d’Aubagne
Année
2026
Discipline
Identité et site
Rôle
Identité, design et développement
Site
festivaldelaruedaubagne.fr
[Vidéo 01] Le site en entier, de l’accueil aux chiffres0:24

Un festival de musique et de talks né des effondrements de la rue d’Aubagne, dont tous les bénéfices vont à la lutte contre le mal-logement. Le site reprend l’affiche : la carte de Marseille défile sous les textes, posés sur des formes d’arrondissements.

Chemin de fer

7 sections à plat1 440 × 6 873 px
  1. Section « Accueil » du site, à plat
    [01] Accueil1 440 × 900
  2. Section « Line-up » du site, à plat
    [02] Line-up1 440 × 1 472
  3. Section « Talks » du site, à plat
    [03] Talks1 440 × 466
  4. Section « Pourquoi ce festival » du site, à plat
    [04] Pourquoi ce festival1 440 × 636
  5. Section « Associations » du site, à plat
    [05] Associations1 440 × 1 425
  6. Section « Infos pratiques » du site, à plat
    [06] Infos pratiques1 440 × 696
  7. Section « Chiffres et pied de page » du site, à plat
    [07] Chiffres et pied de page1 440 × 1 278

Ordinateur1 440 px

Téléphone390 px

[Vidéos 02 et 03] Ordinateur et téléphone, même minutage, même échelle0:15

Les formes blanches ne sont pas des images. À chaque largeur d’écran, le script cherche dans chaque silhouette le plus grand rectangle au format du texte, puis agrandit la forme jusqu’à ce qu’il le couvre. Le titre passe toujours par l’angle de l’écran, la date sort toujours par le bord droit.

Le fond est un seul cadastre de 3 840 × 13 000 pixels, passé au filtre Note Paper, découpé en dix bandes chargées à l’approche. Il passe du bleu au rose sur les chiffres du mal-logement, une seule fois, en fondu lent.

Accueil du site du festival : titre rouge sur une forme blanche, date et lieu sur une autre, cadastre bleu en fond.
Le même accueil avec ses tracés de construction : contours des formes et leur rotation, zones de texte qu’elles couvrent, polices et tailles, bandes du fond.
[Radiographie] Glisser pour voir ce qui construit l’accueilFormes, zones, polices, fond

Détails

Quatre mouvements du site
[Détail 01] Filtres du line-up0:09
[Détail 02] Fiche d’un artiste0:08
[Détail 03] Les formes se recalculent à chaque largeur0:08
[Détail 04] Le fond passe au rose sur les chiffres0:10

Charte

Identité du festival

La charte tient en peu de choses : une silhouette du 1er arrondissement pour logo, une seule police, six couleurs, le cadastre de Marseille et sept formes d’arrondissements. Le site n’utilise rien d’autre.

Page de la charte : le logo sur fond bleu clair et sur fond rose clair
[Charte 02] Logos sur fond coloré
Page de la charte : le logo rouge et le logo bleu sur fond noir
[Charte 04] Logos sur fond foncé
Page de la charte : les graisses de la Snaga Uni Display, de Thin à Black
[Charte 05] Snaga Uni Display
Page de la charte : noir, rouge, bleu, blanc cassé, rose clair et bleu clair, avec leurs valeurs
[Charte 06] Couleurs
Page de la charte : le cadastre bleu, avec le petit carré rouge du lieu de l’effondrement
[Charte 09] Cadastre et repère
Page de la charte : les silhouettes d’arrondissements en blanc sur le cadastre
[Charte 10] Formes d’arrondissements
Affiche du festival avec ses repères d’impression : titre, date, lieu et line-up sur le cadastre bleu
[Affiche] Épreuve d’impression
Accueil du site du festival sur téléphone
[Téléphone] Accueil du site

Pistes

Accueil, octobre 2026
Première version de l’accueil
[Piste 01] Première version
Proposition 1 : titre sur la forme 06 qui part de l’angle haut gauche
[Piste 02] Proposition 1
Proposition 2, retenue : titre sur la forme 07, date sur la forme 06 qui sort à droite
[Piste 03] Proposition 2Retenue
Proposition 3 : titre sur la forme 01, en diagonale
[Piste 04] Proposition 3

Après la première version, trois propositions de formes pour l’accueil. Retenue : la deuxième, avec la forme déplacée vers la gauche et vers le haut.

Fiche technique

Mesuré le 19.10.2026
Pages
Une page et les mentions légales
Code
HTML, CSS et JavaScript, sans framework, GSAP pour le mouvement
Fond
Cadastre de Marseille, 3 840 × 13 000 px, en dix bandes AVIF
Formes
Sept silhouettes d’arrondissements, recalculées à chaque largeur
Police
Snaga Uni Display, par Adobe Fonts
Fluidité
60 images par seconde en défilant, sur ordinateur et téléphone
À l’ouverture
1,2 Mo sur téléphone, 2,5 Mo sur ordinateur
Vie privée
Aucun cookie, aucune mesure d’audience
Écrans
Vérifié de 360 à 1 920 px de large
En ligne
Octobre 2026
Voir le site en lignefestivaldelaruedaubagne.fr
Projet suivant[002] Identité visuelle Lorem Ipsum