Overzicht
UX-onderzoek
- Publiek afbakenen: twee echte bezoekerstypes — fans die op zoek zijn naar de volgende show of een nieuwe release, en organisatoren en venues die in vijf seconden de geloofwaardigheid checken. De homepage moest beide bedienen in de eerste viewport.
- Referentieonderzoek: een gerichte blik op hoe onafhankelijke rock- en metalacts zich online presenteren (tourpagina's, perskits, merch, streaminglinks). Het doel was om de functionele conventies die de moeite zijn om te houden (duidelijke tourdata, voor de hand liggende streaminglinks) los te maken van de stilistische standaarden die je beter doorbreekt.
- Gesprekken met de band over invloeden, artwork en podiumesthetiek — vertaald naar een moodboard dat elke latere ontwerpbeslissing stuurde.
- Prioriteitenkaart: muziek → shows → over → contact. Elke andere kandidaatsectie moest haar plek verdienen tegenover die vier.
UI-richting
- Een gedurfde hero met typografie vooraan die zich gedraagt als een gigposter, niet als een bedrijfsheader.
- Een ingetogen donker palet opgebouwd uit het bestaande artwork van de band, consistent gebruikt zodat fotografie en cover art het visuele gewicht kunnen dragen.
- Editorial ritme: secties ademen, tourdata lezen als een gedrukt programma en de pers- en biosectie is opgemaakt als liner notes in plaats van als een webpagina.
- Motion met intentie: subtiele reveals die door scrollen worden gestuurd en gecontroleerde hoverstates — genoeg om levend aan te voelen, niet genoeg om te concurreren met de muziek.
- Toegankelijkheid en performantie: semantische structuur, streaminglinks die met het toetsenbord werken, lazy-loaded beelden en snelle Core Web Vitals — want een trage bandsite is een gesloten tab.
Kernfuncties
- Hero / identiteitsstatement met de naam van de band, de regio en het allersterkste artwork.
- Tourdata-component met venue, stad en ticketlinks, makkelijk door de band zelf bij te werken.
- Streaminghub die linkt naar Spotify, Apple Music, YouTube en Bandcamp vanuit één consistent component.
- Bio- en perskitsectie met persfoto's in hoge resolutie en een downloadbare one-sheet voor organisatoren.
- Contact voor booking en persvragen, rechtstreeks naar de band.
Galerij
Gebruikte technologieën
- Front-end: een moderne componentgebaseerde stack met Tailwind voor het visuele systeem.
- Contentmodel: zo gestructureerd dat de band een show of een release kan toevoegen zonder code aan te raken.
- Deployment: een static-first pipeline geoptimaliseerd voor snelheid op mobiele netwerken, omdat het grootste deel van het publiek via social links op een telefoon binnenkomt.
- Design: Figma voor het visuele systeem, waarbij echt artwork en typografietests de uiteindelijke richting bepaalden in plaats van generieke stock.
Meetbare resultaten
- Lighthouse-performancescore van 98+ op mobiel, gemeten op een afgeknepen 4G-profiel.
- Largest Contentful Paint onder 1,4 s op mid-range Androidtoestellen, dankzij WebP-artwork en agressief geschaalde hero-afbeeldingen.
- Totaal paginagewicht onder 400 KB voor de homepage, inclusief typografie en beelden.
- 100% met het toetsenbord te bedienen: elke streaminglink, ticketlink en contactactie doorstaat een tabtest met alleen het toetsenbord, met een zichtbare focusstate.
- WCAG AA-contrast geverifieerd op elk voor- en achtergrondpaar in het donkere palet.