Beatport Live↘ [Website wireframes]

Every page, every state.

Pick Desktop or Mobile, then open any screen. Every screen is clickable: buttons and menus take you to the screen they lead to. Goes with the Beatport Live website design brief.

Homepage

Homepage · mobileHomepage · desktopMobile menu (open)

Events – upcoming and past (from Beatportal)

Events · mobileEvents · desktopEvents search: no results · desktopEvents search: no results · mobile

City page

City page (London) · mobileCity page (London) · desktopCity page with events (Los Angeles) · desktopCity page with events (Los Angeles) · mobileCities overview · mobileCities overview · desktop

Event page – one URL, six states (Elderbrook x Eli & Fur, LA). 06 Recap is the row below.

Event lifecycle: one URL, six states01 Announced: Co:brand RSVP drop · mobile01 Announced: Co:brand RSVP drop · desktop02 On sale: Beatport Tickets · mobile02 On sale: Beatport Tickets · desktop03 Sold out: waitlist in the drop + city sign-up · mobile03 Sold out: waitlist in the drop + city sign-up · desktop04 Day of: doors time, check your email · mobile04 Day of: doors time, check your email · desktop05 Just happened: Missed it? Sign up · mobile05 Just happened: Missed it? Sign up · desktop

06 Recap – one video only: full set, else clips, else a photo

Recap: full set, so no clips (DJ Seinfeld) · mobileRecap: full set, so no clips (DJ Seinfeld) · desktopRecap: no full set, so clips (Sara Landry) · desktopRecap: no set or clips, so a photo from the night (Daniel Avery) · desktop

The Block – a stage inside someone else’s event: no tickets, a DJ competition (Teletech Bristol)

The Block · how the campaign differs (no tickets, a competition)The Block at Teletech Bristol · mobileThe Block at Teletech Bristol · desktopThe Block DJ competition (Teletech, full Co:brand drop) · mobileThe Block DJ competition (Teletech, full Co:brand drop) · desktopThe Block winner · mobileThe Block winner · desktop

Sign up (from homepage and city pages)

Sign up · mobileSign up · desktopSign-up confirmation · mobileSign-up confirmation · desktop

Other pages – About, Legal, 404

About · mobileAbout · desktopLegal and privacy · mobileLegal and privacy · desktop404 · mobile404 · desktop

Back end – CMS (Webflow): how the team edits the site

CMS · Events collection (auto-sorted by date)CMS · Edit event (Co:brand link, sold out switch, lineup and links, Know before you go, recap)CMS · Edit city (pages fill themselves)CMS · Links tiles (one list, custom order)CMS · Edit link tile (image, event or URL, order, show until)Designer · Homepage Upcoming list settingsKeeping the site current: what updates itself, what the Live team does, what the web team buildsCMS · Edit The Block event (festival link-out, DJ competition, winners)CMS · Homepage editor (hero, next up, sign-up pop-up)