April 11, 2026

Overview

Hexaleph is a rock band based in Cuenca, Ecuador. Their brief was simple and unforgiving: a website that sets the tone of the band before the visitor ever clicks play. No Bandcamp embeds pretending to be a homepage, no generic WordPress theme — a site that feels like the band's own artifact. I took the project end-to-end: art direction, UX, visual design, and production frontend.

UX investigation

• Audience framing: two real visitor types — fans looking for the next show or a new release, and promoters/venues doing a five-second credibility check. The homepage had to serve both in the first viewport.
• Reference study: a directed look at how independent rock and metal acts present themselves online (tour pages, press kits, merch, streaming links). The goal was to isolate the functional conventions worth keeping (clear tour dates, obvious streaming links) from the stylistic defaults worth breaking.
• Conversations with the band about influences, artwork, stage aesthetic — translated into a moodboard that drove every later design decision.
• Priority map: music → shows → about → contact. Every other candidate section had to earn its place against those four.

UI direction

• A bold, type-forward hero that behaves like a gig poster, not a corporate header.
• A restrained dark palette built from the band's existing artwork, used consistently so that photography and cover art can carry the visual weight.
• Editorial rhythm: sections breathe, tour dates read like a printed schedule, and the press/bio section is laid out like liner notes rather than a web page.
• Motion with intent: subtle scroll-driven reveals and controlled hover states — enough to feel alive, not enough to compete with the music.
• Accessibility and performance: semantic structure, keyboard-navigable streaming links, lazy-loaded imagery, and fast Core Web Vitals — because a slow band site is a closed tab.

Key features

• Hero / identity statement with the band name, region, and the single strongest piece of art.
• Tour dates component with venue, city, and ticket links, easy for the band to update themselves.
• Streaming hub linking to Spotify, Apple Music, YouTube, and Bandcamp from a single consistent component.
• Bio / press kit section with high-resolution press photos and a downloadable one-sheet for promoters.
• Contact for booking and press inquiries, routed to the band directly.

Gallery

Technologies used

• Frontend: modern component-based stack with Tailwind for the visual system.
• Content model: structured so the band can add a show or a release without touching code.
• Deployment: a static-first pipeline optimized for speed on mobile networks, since the majority of the audience arrives via social links on a phone.
• Design: Figma for the visual system, real artwork and typography tests driving the final direction rather than generic stock.

Measurable outcomes

• Lighthouse performance score of 98+ on mobile, measured on a throttled 4G profile.
• Largest Contentful Paint under 1.4s on mid-range Android devices, thanks to WebP artwork and aggressively sized hero imagery.
• Total page weight under 400 KB for the homepage including typography and imagery.
• 100% keyboard-navigable: every streaming link, ticket link and contact action passes a keyboard-only tab pass with a visible focus state.
• WCAG AA contrast verified on every foreground/background pair in the dark palette.

Outcome

A site that reads as an extension of the band rather than a third-party page about them — equally useful to a fan checking the next show and to a venue deciding whether to book them. A small project, but the kind where every visible and invisible decision — typography, spacing, image compression, tap target size — has to be deliberate, because there is nowhere for sloppy work to hide.