← Portfolio · Ghouls In The Basement case study

Ghouls In The Basement — Digital wireframe

Single-page band homepage blocked out in low-fi before the 8-bit visuals went on. The site is one long scroll, so the wireframe is one tall frame with the eight content zones labeled and annotated. The goal here was structural: confirm the order, the rhythm between text and image, and where the Sheet-fed sections sit relative to the band-edited static ones.

Single page

ghoulsinthebasement.com — full page wireframe

Desktop · 1280 × variable · Top → bottom
01 · Identity zone
1
02 · News flash · Sheet-fed
2
03 · Bio panel + hero shot
3
04 · Tour-date table · Sheet-fed
4
05 · The four ghouls
5
06 · Photos & tapes · Sheet-fed
6
07 · Guestbook · Netlify Form
7
08 · Footer
8
1Identity zone — pixel masthead, dual marquees, four social pills (Bandcamp / Spotify / YouTube / Instagram), anchor nav. First impression in one glance, before anyone scrolls.
2News flash — first row gets a blinking NEW!! badge. Pulled from the Sheet's News tab so the band can edit without code.
3Bio + hero shot — short intro copy plus a single anchor photo. The "who are these people" panel.
4Tour-date table — Date · Venue · TIX. Sheet-fed (Show dates tab) so the band updates rows without touching the file.
5The four ghouls — four member portraits, each clickable to a lightbox. Hardcoded (band photos don't change).
6Photos & tapes — mixed photo and video grid. Sheet-fed (Media tab). Type/Title/File columns determine if a row renders as image tile or inline video.
7Guestbook — Netlify Form. Submissions route to the band's shared inbox for moderation before the band approves an entry to appear on the page.
8Footer — © line + "please do not steal" copy. Minimal, intentionally — the page is the brand.