Décibel Nord

(01) Brief

Le point de départ.

Contexte

Pour sa huitième édition, le festival change d’échelle et ouvre un camping. Jusqu’ici, la programmation passait surtout par Instagram et le site ne servait qu’à rediriger vers la billetterie. Sur téléphone, la programmation était un PDF.

Objectif

Un site qui a l’énergie d’une affiche collée dans la rue, vende les pass trois jours avant les billets à la journée et suive les vagues de mise en vente sans refonte.

Public

18 à 30 ans, étudiants et jeunes actifs de la métropole lilloise et de Belgique, qui arrivent à 90 % depuis un lien sur les réseaux sociaux, sur téléphone, souvent pendant les annonces de programmation.

Contraintes

• Encaisser les pics de trafic au moment des annonces sans ralentir
• Une programmation mise à jour vague après vague par l’équipe, sans développeur
• Lisible en plein soleil et sur des téléphones d’entrée de gamme
• Billetterie externe : le site prépare l’achat, il ne l’héberge pas

(02) Direction artistique

Une affiche qui ne tient pas en place

« Rose fluo, jaune acide et noir, une condensée en capitales sur toute la largeur, et deux rubans de scotch qui se croisent en bas de l’écran. Le site se lit comme une affiche, s’écoute comme un line-up et ne se calme jamais vraiment. »

• Affiche sauvage
• Fluo
• Scotch
• Trame
• Compte à rebours
• Énergie

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titre, logotype, rubans, macaron du pass

  Anton

  400, capitales

  3 JOURS, 40 ARTISTES, 0 SOMMEIL.

  Une condensée très haute qui tient trois lignes géantes sur un écran de téléphone, comme une affiche de concert. Chaque ligne a son traitement : pleine, en contour, puis jaune avec une ombre portée.

• Noms des artistes dans la programmation

  Cabinet Grotesk

  800, capitales

  NOVA FRISK · MIRA DELTA · SAINT RIVAGE

  Plus large qu’Anton, très grasse et serrée à −3 %, elle distingue les têtes d’affiche du reste du line-up sans changer de ton.

• Compte à rebours, dates, lieu, jours du line-up

  Geist Mono

  400, chiffres tabulaires

  J-42 : 18 : 06 : 33

  Le compte à rebours ne doit pas trembler : la chasse fixe garde chaque chiffre à sa place quand il change.

(05) Grille & mise en page

La structure sous l’image.

1. 01Le titre est la composition : trois lignes de hauteur égale, chacune avec un traitement différent, sans image derrière.
2. 02La programmation se lit en colonnes par jour, la tête d’affiche plus grande que les deux suivants, chaque jour séparé par un filet épais.
3. 03Le macaron du pass trois jours chevauche le titre et la programmation, comme un autocollant posé par-dessus l’affiche.
4. 04Second écran sur fond encre : le samedi en ordre de passage (noms géants, scène et heure en mono) à gauche, les trois pass en tickets perforés à droite, et un ruban d’infos pratiques en bas.
5. 05Sur mobile, la programmation passe en trois colonnes sous le titre, en jaune, et le macaron remonte en haut à droite. Le second écran garde trois artistes et le pass 3 jours.

(06) Composants

Les pièces de l’interface.

• C.01

  Compte à rebours

  « J-42 : 18 : 06 : 33 » dans la navigation, avec les deux points qui clignotent et les secondes qui défilent. L’urgence est réelle : c’est le temps avant l’ouverture des portes.

• C.02

  Bouton « Prendre son pass »

  Bloc encre à texte jaune, en capitales grasses, avec une ombre portée jaune décalée sans flou : un bouton imprimé, pas une pilule d’application.

• C.03

  Macaron Pass 3J

  Étoile à vingt-quatre branches dessinée en clip-path, jaune sur rose : « Pass 3J 89 € ». Le prix du pass est l’information la plus visible après le titre.

• C.04

  Programmation par jour

  Vendredi, samedi, dimanche : trois blocs avec la date en mono et les artistes par ordre d’affiche. On voit tout le line-up sans ouvrir un menu.

• C.05

  Rubans croisés

  Deux bandes de scotch inclinées qui défilent en sens inverse : l’une avec les artistes, l’autre avec l’actualité de la billetterie (« Sold out vendredi », « Dernière vague », « Camping inclus »).

• C.06

  Bouton « Billets » de navigation

  Pilule encre et jaune toujours visible, même sur mobile à côté du menu, avec un compteur jaune qui roule à chaque pass ajouté. Un ticket « Pass 3 jours × 1 » tombe en biais pour confirmer.

• C.07

  Ordre de passage

  Onglets par jour, puis une ligne par artiste : au survol, un aplat rose monte sous le nom, qui passe à l’encre, et une pastille « ▶ Écouter » apparaît.

• C.08

  Pass en tickets

  Trois tickets perforés (39, 89 et 119 €) avec un bouton « + » qui devient « ✓ », et au-dessus le stock restant du pass 3 jours, qui baisse d’une unité à chaque achat.

• C.09

  En-tête jaune

  Au défilement, une barre jaune acide à filet encre descend avec le nom, trois liens et le bouton « Billets » et son compteur.

(07) Motion

Chaque mouvement a un rôle.

• boucle

  Fond liquide

  Maillage génératif en WebGL rose, jaune et violet, rapide (vitesse 0,5) et granuleux. La foule en niveaux de gris se fond dedans en multiplication, avec une trame de points par-dessus.

• entrée

  Titre en cascade

  Les trois lignes montent hors de leur masque à 40, 130 et 220 ms (1,1 s, ease-out-expo cubic-bezier(0.16, 1, 0.3, 1)), comme trois coups de caisse claire.

• RubansRubansRubansRubansRubansRubansRubansRubans

  boucle

  Rubans

  Ils se déroulent d’abord par clip-path (1,3 s, à 180 puis 300 ms), puis défilent sans fin : 22 s pour les artistes, 26 s en sens inverse pour la billetterie.

• emphase

  Macaron

  Il se pose à 520 ms avec un rebond (échelle 0,4 et −30°, 0,9 s, cubic-bezier(0.34, 1.4, 0.64, 1)), comme un autocollant claqué sur l’affiche.

• entrée

  Line-up

  Les trois jours glissent depuis la droite, l’un après l’autre, à 220, 310 et 400 ms.

• SéparateurSéparateurSéparateurSéparateurSéparateurSéparateurSéparateurSéparateur

  boucle

  Séparateur du compte à rebours

  Clignotement franc en 1,1 s, sans transition (steps), comme un afficheur à LED. Les secondes défilent en même temps, une par seconde.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  boucle

  Visite simulée

  Une boucle de 12 s : « Prendre son pass » s’enfonce, le compteur de billets passe à 1 et un ticket tombe, la page défile vers le line-up du samedi dont les lignes s’inversent au passage du pointeur, puis le pass 3 jours est coché et le stock baisse. La foule saute à 128 BPM et les secondes du compte à rebours défilent.

(08) Choix expliqués

Ce qu’on a décidé, et pourquoi.

1. 01

   Choix 1 : Le titre comme affiche

   Le public arrive depuis les réseaux sociaux et décide en trois secondes. « 3 jours, 40 artistes, 0 sommeil » résume l’offre et le ton en une lecture. Aucune photo ne pouvait le faire aussi vite sur un écran de téléphone.

2. 02

   Choix 2 : Le pass 3J mis en avant, pas le billet jour

   C’est le pass qui finance le festival et remplit le camping. Il a son macaron, son prix et le bouton principal. Les billets à la journée restent accessibles depuis la billetterie, un clic plus loin.

3. 03

   Choix 3 : Des rubans éditables plutôt que des bannières

   « Sold out vendredi », « Dernière vague » : l’équipe change ces messages en une minute pendant les mises en vente. L’information de dernière minute devient un élément graphique et non une fenêtre surgissante.

4. 04

   Choix 4 : Toute la programmation sur l’accueil

   L’ancien PDF faisait fuir les visiteurs sur mobile. Neuf noms, trois jours, une hiérarchie claire : on repère son artiste et on achète sans changer de page.

5. 05

   Choix 5 : Un fond animé qui tient sur petit téléphone

   Le maillage WebGL est chargé après le texte, et un dégradé CSS des mêmes couleurs s’affiche en attendant ou si le téléphone n’a pas de carte graphique. La photo de foule est servie en AVIF à la bonne largeur et chargée en différé.

6. 06

   Choix 6 : Du fluo, mais lisible

   Le texte courant est toujours en encre sur rose ou en jaune sur encre, deux paires très contrastées. La ligne en contour, plus fragile, n’est utilisée qu’en très grand corps.

7. 07

   Choix 7 : Le bruit s’arrête sur demande

   Avec « réduire les animations », les rubans s’immobilisent, le compte à rebours ne clignote plus, la foule ne saute plus, la visite simulée n’est pas jouée et l’intro est remplacée par l’état final. Toute la programmation reste du texte réel.

(09) Arborescence

7 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

Objectifs visés — projet fictif, aucun chiffre mesuré

Part des pass 3 jours

55 %

Objectif sur l’ensemble des billets vendus, contre 38 % l’an dernier.

Clics vers la billetterie

+40 %

Depuis l’accueil, pendant les semaines d’annonce de programmation.

Vente du camping

1 500 places

Écouler toutes les places avant la dernière vague.

Disponibilité lors des annonces

100 %

Aucun ralentissement pendant les pics de trafic, grâce à des pages statiques.