Elysium Website (Under Construction)

Full-stack Web Development, 2024-2025.

In my junior year, I worked in the web development team for CMU's student run fashion club, Lunar Gala, which hosts the largest annual fashion event in Pennsylvania. The team's main deliverable is to create the website based on the 2025 theme, Elysium.

Process:

After receiving the theme pitch, our team first began with ideation. There are four sections of the show; Emergence, Blossom, Hubris, and Embrace. I was curious as to how to bring the narrative structure of the show into the website.

How can we combine elements of the natural world and man-made technology into a cohesive narrative? In my Figma Moodboard, I drew inspiration from nature photos, the Art Nouveau art movement, 90s anime, and sci-fi films.

I noticed the similarities of the Elysium storyline and the sensibilities of the Art Nouveau movement which took place from the late 1800s until the start of World War I. During this movement, people had a sense of optimism with recent technology advancements. Artists combined elements of nature with man-made equations such as French Curves, which were originally created for the sake of mechanical linkages.

I experimented with bezier curves and circular arcs to create elegant stems, and sinusoidal movement to mimic how tree branches sway in the breeze.

Site Interaction:

Our team nailed down site interaction to ensure a comfortable interface for the user before finalizing visual elements. We explored the idea of using a preloader as the hero element. The preloader would display a radial timeline to represent the four acts and be completely separate from other pages of the show. This way, the hero element of the site does not distract from other information we wanted to present.

Archive:

This year, we included a new feature on the website, an archive that showcases the other team's work. Left-Right keys navigate between acts and Up-Down keys navigate between the main page and the archive.

We explored different types of interactions to display the assets. For instance, the user could toggle between a typical carousel with lightbox display or dragging loose pages around the window on mouse click.

Takeaways:

I had been part of Lunar Gala Creative Team for two years; Photo Member in my freshman year and Head of Photography in my sophomore year. My main reason for switching to web team this year was to learn the best practices of making a website for a client from start from finish. Also, much of my coding experience at CMU so far has consisted of solo-projects to gain technical competency at a systems level, so I wanted an opportunity to collaborate with other developers to achieve a common goal.

Furthermore, working on this project has taught me that the integration of art and technology must be thought out carefully. My experience in Computer Graphics offered insight as to what was computationally feasible and what was not, but through collaborating with designers, I learned that the Lunar Gala website should support the content, not "show-off" the power of the fanciest library out there.

Last updated 1/6/25.