Site Prototype Deck
← → · Swipe · Click dots
Site Prototype
From Single Event to Motherbrand
May 2026
Context

Aus einem Festival
wird eine Markenfamilie.

Tension transformiert sich 2026 vom einzelnen Basler Sommer-Festival in eine Dachmarke mit drei Editionen pro Jahr — jede mit eigener Atmosphäre, gemeinsamer DNA.

Die Herausforderung: Eine Webseite, die diese Familie sofort lesbar macht, ohne die Einzelevents zu verwässern. Die Lösung: Ein Carousel, das alle drei Editionen gleichberechtigt zeigt — und gleichzeitig das nächste anstehende Event in den Vordergrund stellt.

The Editions

Drei Editionen 2026.

Jede Edition mit eigenem Charakter, eigener Typo, eigener Brand-Color — vereint durch die TENSION-Dachmarke und das Footer-Lockup als Familienklammer.

01 · Open Air · 3 Days
31 Jul — 2 Aug 2026
Gartenbad St. Jakob · Basel
02 · Lakeside · 1 Day
29 Aug 2026
Lake View · Locarno
03 · Indoor
TBA · Winter 2026
Messehalle · Basel
Brand Architecture

Konstanten schaffen Familie.
Variablen den Charakter.

Konstanten

Was alle Editionen teilen.

  • TENSION-Wortmarke als Brand-Anchor
  • Footer-Lockup "Tension – Electronic Music Festival"
  • Premium-Dark-Palette als Basis
  • Lato als Body- & UI-Typo
  • Universal-Header & Sub-Nav-Struktur
Variablen

Was jede Edition eigen macht.

  • Edition-Typo: humanistisch · script · brutalistisch
  • Edition-Color: Coral · Weiß · Cream
  • Atmosphärisches Header-Artwork (Skulptur-Sprache)
  • Hero-Background: hell · peach · beton
  • Konzept-Anker: Naturoase · Sundown · Industrial
The Hub · Live

Album-Cover-Carousel
als zentrale Bühne.

Die aktuelle Edition steht im Fokus, die anderen zwei als "Peek". Counter, Edition-Name, Detail-Bar und Glow-Color am Hero-Boden wechseln synchron mit der Active-Card.

Live · Click ← →
Mobile View · Live

Mobil getestet.
Voll responsiv.

Zwei echte Mobile-Frames mit dem laufenden Hub — DE und EN. Carousel mit sichtbaren Side-Peeks, Header bleibt minimal, Buttons stacken.

Hub · DE
Hub · EN
Per-Edition Atmosphere

Jede Edition,
ein eigener Raum.

Die Edition-Subpages tragen die Atmosphäre weiter: Header-Artwork als Full-Bleed-Hero, Edition-Color als Akzent, Sub-Nav für die Unterseiten innerhalb der Edition. Universal-Header bleibt — der Edition-Switch ist immer einen Klick entfernt.

Hero · Coral Gradient
Open Air · Warm · Urban
Hero · Peach Sundown
Lakeside · Mediterran · Intim
Hero · Concrete Dark
Indoor · Brutalist · Industrial
Motion & Details

Reife mit Vibe —
im Mikro-Detail.

Premium-Feel ohne Mainstream-EDM-Geschrei. Die Interaktion ist die Brand: schnell, präzise, mit Charakter.

Carousel-Cross-Fade
Counter, Edition-Name, Date, Location und CTAs fadeen synchron. Glow-Color am Hero-Boden morpht via @property.
Button-Fill-Sweep
Edition-Brand-Color schiebt sich beim Hover von links rein. Glow-Shadow in Edition-Farbe gleichzeitig.
Hero-Entrance-Stagger
Topbar (0.1s), Carousel (0.25s), Detail (0.5s), Dots (0.7s) — fadeUp in Sequenz beim Page-Load.
Footer-Hover-Choreografie
Events-Liste slidet rechts mit Underline-Indicator. Nav- & Social-Links mit animierter Underline.
Scroll-Reveal
Newsletter, Footer-Sections fadeen mit Intersection-Observer beim Reinscrollen. prefers-reduced-motion respektiert.
Edition-Color-System
CSS-Variablen --edition-color & --glow-color. JS setzt pro Active-Edition, alles andere animiert automatisch.
URL Structure

Skalierbar
strukturiert.

Mehrsprachigkeit als Subdirectory — Standard für SEO, sauber für hreflang, einfach zu erweitern für neue Editionen oder Sprachen.

tension-festival.ch/ ├── / → auto-redirect zur Browser-Sprache ├── /de/ Hub DE (Carousel) │ ├── /de/summer/ Tension Summer │ ├── /de/locarno/ Tension Locarno │ └── /de/winter/ Tension Winter ├── /en/ Hub EN │ └── ... analog └── /assets/ shared Logos, Headers, Fonts
What's Next

Vom Prototyp
zum Launch.

Der Prototyp steht. Was zur Production-Site fehlt:

Live Prototype

Klick durch.

Der Prototyp läuft lokal — Carousel anklicken, durch die Editionen rotieren, Buttons hovern, Sprachen wechseln.

Open Prototype
/ DE / EN