GalaxyBoyz

A band website built on oversized type and scroll motion, so visitors feel the band’s character the moment the page loads.

Role

Visual UI Design · Responsive Grid · Motion Design

Impact

Built a responsive narrative website that keeps its brand impact intact across desktop and mobile.

Tools

Figma · Extreme Typography · Responsive Grid · GSAP ScrollTrigger · Vue 3

Design Highlights

Layout Strategy: designed an asymmetric 12-column grid that breaks convention while keeping a steady visual rhythm
Typography: used oversized, high-contrast type scales to build a strong and memorable brand anchor
Motion Narrative: choreographed scroll-driven animation to pace the story instead of decorating it

Positioning

A visual website that makes the band identity immediate

GalaxyBoyz is an identity-led web experience. Oversized typography, strong composition, and scroll motion make the band personality recognizable before anyone reads the detailed content. I designed the interface, planned desktop and mobile grid behavior, and implemented the scroll motion with GSAP and Vue 3.

Problem & Goal

Create impact without losing orientation

Music sites need memorability, but oversized type, heavy motion, and unconventional grids make navigation and reading harder when they run unchecked. The goal was to stay expressive while keeping entry points obvious, hierarchy readable, and layout behavior sound at every screen size.

Key Decisions

Use controlled contrast as the visual rule

Used oversized typography as the brand anchor, then paired it with deliberate whitespace so the page never turns noisy.
Gave desktop and mobile separate grid logic, so the identity holds at both breakpoints instead of merely shrinking.
Kept navigation and CTA behavior predictable, which is what allows the surrounding layout to get more experimental.

Key Screens

Typography, hierarchy, and responsive grid behavior

These screens show how one visual identity adapts from a large desktop composition into a tighter mobile layout.

GalaxyBoyz visual hierarchy breakdown. — Hierarchy: oversized type anchors attention while supporting content stays readable.

GalaxyBoyz desktop grid logic. — Desktop grid: asymmetry creates energy while keeping repeatable layout rules.

Web Design Case

Responsive expression across desktop and mobile

Layout density, type scale, and image rhythm all shift across breakpoints, but the emotional tone stays constant.

GalaxyBoyz mobile grid logic. — Mobile grid: compresses the composition without flattening the brand character.

Motion Design Case

Motion used as narrative pacing

Scroll moments were choreographed so motion follows the content rhythm rather than becoming surface decoration.

Scroll-driven motion controls when users encounter key identity moments.
Tying motion to layout structure keeps the implementation maintainable.

Scrolling the built site: the oversized wordmark passes through the viewport before the tour dates arrive, so the band personality lands before any content has to be read.

Design Checks

These are checks I ran against my own design, not findings from user testing: whether the visual direction communicated the band personality, and whether navigation and content sections were still findable underneath it.

2 breakpoints: Desktop and mobile layout logic
12 cols: Asymmetric grid foundation
Scroll motion: Narrative pacing control

Reflection

Next iteration should connect visual impact with conversion goals

The site establishes mood well. The next improvement is connecting those identity moments more directly to listening, event, and merchandise actions.

Add clearer CTA states for listening platforms and event conversion.
Measure whether scroll motion increases engagement or distracts from navigation.