N1ghtterrors
N1ghtterrors
a website designed to capture the essence of n1ghtterrors
Timeline
3 years
Role
Photographer Videographer UX Frontend, Vanilla HTML/CSS Backend, Node.js / Express / Supabase / Stripe Product Designer Printer Graphics
Team
Failenn Aselta Jason Goodman Sydney Lovro Mo Rader Peggy
Tools
Visual Studio Code Gemini Resend Supabase Express.js Stripe Vercel Vanilla HTML/CSS Node.js
PROJECT OVERVIEW
Design and ship a website for a clothing line that speaks to its edgy essence.
N1ghtterrors emerged in response to a call to reintroduce provocation design culture. Conceived as a clothing line rooted in the idea of sublimity, the project explores psychological extremes through narrative-driven graphics. Each garment presents a visual meditation on unseen instability, juxtaposing figures such as Donald Trump and Joe Biden with allegorical references to Lucifer. The imagery examines themes of power, duality, ascent, and collapse, prompting reflection on broader questions surrounding civilization and collective ambition. Rather than prescribing a singular interpretation, N1ghtterrors invites viewers to confront their own perceptions. The work ultimately asks not what is depicted, but what the audience chooses to see.
The challenge
N1ghtterrors' unique and raw style needs a website that further speaks to the brand collective it has created.
THE RESEARCH
Target User
Participant
Isabella
21 Years Old
Environmental Studies Student
Portrait generated with Gemini
Frustrations
- The site feels intentionally chaotic, but key controls (menu vs cart) aren't equally discoverable.
- The typeface matches the brand, yet long reading moments become tiring without clearer hierarchy.
- Unconventional interactions are exciting, but she needs small cues to understand what's clickable and what comes next.
How Might We
How might we create a website which encapsulates the raw edge of N1ghtterrors clothes?
By creating a unique website with atypical interactions and graphics which mimic the clothes.
Collage
Created with Photoshop
User Feedback
Created with Google Sheets and Napkin.ai
“What menu? But I see the cart button. I would make it a bit more noticeable. It wasn't clear to me what it was.”, User 1
“My big brain and internet training. Aka an old person might not know but a young person will figure it out fs.”, User 6
Key Learning, Navigation Visibility
Feedback made it obvious: the cart button read as an interaction affordance, but the menu did not. I learned to make entry points loud even when the aesthetic is intentionally abrasive.
Key Learning, Typeface Legibility
Users wanted the edge without the strain. The type choice matched the brand, but the reading experience needed guardrails, contrast, sizing, and a calmer hierarchy in key moments.
Key Learning, Writing as Guidance
The strongest improvements came from small pieces of copy: a cue to keep scrolling, a hint that a control is interactive, a line that reframes what to do next. The writing became the UX.
IDEATION
Three visual directions explored before committing.
The brief was specific: the site had to feel like their music, abrupt, nocturnal, confrontational. Not just dark-mode, but genuinely hostile to comfort. Three directions were explored before landing on the final language.
Decision
Why organic motion over static layout
Static dark layouts for band sites are common to the point of genre convention, they signal 'band website' without signaling anything specific about this band. The sway animation was chosen because it references the physical experience of being at a show: the way the crowd moves, the way sound pressure feels. It's also technically achievable within WordPress constraints using CSS keyframes, which meant it wouldn't add load time the way a JS animation library would.
High Contrast Brutalism
Stark white-on-black grid, dense type, no imagery. Felt technically correct but lifeless, the music has texture and this didn't.
Rejected, too clean
Degraded Grain + Video Overlay
Full-screen video background with heavy film grain and disrupted typography. Energy was right but load time was unacceptable on mobile data.
Partially adopted, grain kept, video removed from background
Dark Glass with Organic Motion
Glass-morphism over dark photography with the site's signature swaying animation. This was the one, it captured the band's aesthetic without sacrificing performance.
Final direction
USER TESTING
Tested with band members and a sample of existing listeners.
Two audiences, two different goals: the band needed to recognize themselves in the site; listeners needed to find music, shows, and merch without friction.
“It actually feels like us. Most band sites look like a WordPress template. This doesn't. It feels like something we would make.”
Tyler · Band member
“Takes forever to load on my phone data. By the time anything showed up I already went back.”
Anonymous · Listener, mobile usercritical feedback
“I stayed on the site for like 15 minutes. I never do that. Usually I just check the tour dates and leave.”
Jordan · Fan, 3 years
“Merch was hard to find. I had to scroll past a lot before I got to where to actually buy anything.”
Sam · Listener, first visitcritical feedback
Key finding
Mobile load time was the most critical failure point. The video and grain layers were the main culprits. Post-testing, both were aggressively lazy-loaded and the mobile layout was given a lighter-weight fallback path.
ENGINEERING
Pseudocode & Code for Checking Stock
Made with Mermaid.js and Vanilla HTML/CSS + JavaScript
Key Learning, Vanilla Constraints
Building with Node.js and Vanilla HTML/CSS instead of a framework enforced a deep understanding of the fundamentals and produced the raw Y2K aesthetic the brand demanded.
Key Learning, AI-Assisted Iteration
Developing before AI tooling was widespread meant the architecture was sound before Gemini and Cursor accelerated the final iteration, the foundation never had to be rethought.
Key Learning, Diagram-First Planning
Writing the pseudocode and Mermaid flow before touching the implementation forced clarity around stock-check state transitions and cart logic, decisions that would have been expensive to change later.
GALLERY
Design decision
Why mobile-first, despite being a desktop-era band
The band's audience primarily discovers them through Instagram and Spotify on mobile. Building desktop-first would have meant retrofitting the layout, a pattern that consistently produces cramped mobile experiences. The final design was built mobile-up, with desktop treated as the wide-viewport variant. The trade-off: some of the atmospheric photography is more impactful at desktop widths and feels slightly cropped on mobile.
Prints and Photography
Taken with Fujifilm XT-30
IMPACT
A live site that the band actively uses and promotes.
Live
client-approved site
3 yrs
in active production
0
redesign requests
WHAT I LEARNED
- 1
Brand fidelity over personal style
N1ghtterrors has a specific visual language, raw, nocturnal, confrontational. The job was to serve that language, not impose my own aesthetic. Learning when to disappear as a designer is as important as knowing when to lead.
- 2
Motion is meaning
Every animation on the site was chosen to feel like the music: abrupt, textured, unresolved. Motion that matches the emotional register of the brand communicates something copy never can.
- 3
Shipped work teaches what mockups don't
Seeing the site live on real devices, in real contexts, revealed edge cases no Figma frame anticipates. Building and shipping is the fastest feedback loop available.
CONSIDERATIONS
Brand Fidelity
Users stayed 3× longer. Matching the band's visual language meant the site felt like an extension of the music, not a shop.
Performance
Mobile load time was the critical failure point. Lazy-loading the video and grain layers resolved drop-off for mobile users.
Navigation Clarity
Post-testing copy changes surfaced the menu without breaking the aesthetic. Writing became the primary UX intervention.
Engagement
0 redesign requests. The visual language landed on first delivery by matching the brand's emotional register precisely.
Tradeoff made
Unconventional navigation was chosen over standard menu patterns. The gain: a site that felt genuinely like the music, not a template with a dark theme applied. The cost: the menu was not immediately discoverable and required post-testing copy fixes to surface the entry point without breaking the aesthetic. That fix was a few lines of copy, not a layout change, which confirmed the core direction was right. Discoverability was a solvable problem; sacrificing the brand register would not have been.
For the next iteration, I would resolve the navigation earlier in the process and pressure-test the typeface legibility before release. The site earned its strangeness. It just needed cleaner entry points.
Early Shirt Iterations
Taken with Canon Rebel
