BIGBANG's Career Timeline (2007–2016)
Personal Project
Brand Identity
Responsive Web
Front End Development
My Role
Developed the visual brand and identity
Researched and curated source materials across BIGBANG's career
Designed the UI/UX from wireframes through prototyping
Built the site using HTML, CSS, and JavaScript
Team
Design Lead (me) • Content Writer • Web Developer
Results
Designed and developed a fully responsive, scroll-driven one-page timeline from scratch
Deepened fluency in JavaScript through hands-on, self-directed experimentation
Shared and presented the site at BIGBANG fan meetings, where it resonated with the community
Challenge
A self-directed passion project built during university to explore JavaScript, motion, and interactive web design — using one of K-pop's most iconic careers as the subject.
As an avid fan of BIGBANG — the South Korean group that helped define a generation of K-pop — I built this as a passion project during university while teaching myself JavaScript. I wanted to go beyond static layouts and actually make something feel alive through motion and interactivity.
The subject matter was personal, but the design problem was real: BIGBANG's career spans nearly a decade of genre-shifting music, major concert tours, and cultural milestones. The challenge was figuring out how to organize that dense, nonlinear history into a single, scroll-driven experience that felt considered and navigable — not overwhelming. I also created a visual identity for the site rooted in the BIGBANG brand itself.
Insights
The design had to serve the archive
A timeline lives or dies by its organizational logic. With nearly a decade of releases, performances, and cultural moments to work with, the challenge was knowing what to leave out as much as what to include. I organized the timeline around the milestones that defined their career arc — album releases and major concerts — giving each era a clear visual anchor. The goal was a narrative you could scan at a glance but slow down to explore, without feeling overwhelmed by the volume of history.
Motion should feel seamless, not showy
From the start, I wanted the interactivity to feel effortless rather than flashy. Working with JavaScript for the first time meant resisting the temptation to add motion for its own sake — and instead asking whether each interaction made the experience clearer or more fluid. That constraint shaped every decision.
What I did
Visual Identity
I drew directly from BIGBANG's visual world to build the site's identity — centering the iconic yellow crown from their official fan light stick, the 'bong,' as a nod to the fandom itself. The layout stays anchored in black and white, a deliberate choice to let the color from their album art and promotional photography do the heavy lifting. Rather than compete with their visuals, the design steps back and frames them.
Information Architecture
I organized the timeline around the milestones that defined BIGBANG's career arc—album releases and major concerts—giving each era a clear visual anchor. The goal was a narrative you could scan at a glance but slow down and explore, without feeling overwhelmed by the density of a decade's worth of history.
JavaScript & Interactivity
My focus was on making the interactivity feel effortless rather than flashy. The carousel and navigation jump links were built to move smoothly between moments — no jarring snaps or disorienting jumps. I wanted the pacing of the site to echo the way you'd actually move through a timeline: with a sense of flow and continuity, not a series of disconnected clicks.
Responsive Design
Adapting the timeline for mobile meant rethinking almost every structural decision I'd made for desktop. Typography that worked at large screen widths needed a completely different hierarchy at small sizes. The jump links — which function as persistent navigation on desktop — had to be reimagined for compact screens without losing their utility. And the navbar needed to collapse gracefully without burying the navigation. It was my first real experience designing two distinct but coherent systems for the same content.
Results
This project was equal parts design exercise and learning experiment. Building it end-to-end—research, visual identity, UX, and front-end—gave me a foundation in JavaScript that I couldn't have built any other way. More than that, it taught me how to make design decisions with no brief, no client, and no team: just a subject I cared about and a standard I set for myself.
The site was shared and presented at BIGBANG fan meetings, where it connected with the community it was built for—which felt like the right measure of success for a passion project.
Learned how to design & develop a one-scroll landing page
Learned how to utilize javaScript
United BIGBANG fans during fan meetings