Desktop and mobile side by side, one row per page. Scroll each row sideways; click any screen to open it full size. Goes with the Beatport Live website design brief.
Homepage
Homepage · mobileHomepage · desktopMobile menu (open)
City sign-up pop-up (homepage)
City sign-up pop-up · mobile (bottom sheet)City sign-up pop-up · desktop
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 texts · mobile04 Day of: doors time, check your texts · 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
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, quick edits, briefsCMS · Edit The Block event (festival link-out, DJ competition, winners)CMS · Homepage editor (hero, next up, sign-up pop-up)
↘ [Website wireframes]
