Elysium Website

Front-End Web Development (Next.js, React)
Duration: 6 months

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.

The devil is in the details–gradient blur is not natively supported in CSS. To create a frosted glass look that gradually changes in opacity and blur-strength, we had to make use of some practical effects.

Archive:

This year, Kaitlyn Ng and I worked on a new feature, an archive that showcases the other creative departments' work.

A new feature on the site presented an exciting opportunity to reintegrate Chinese culture into Lunar Gala. The overstimulating noise of the typography serves as a vestige of the iterations that didn't make it to the final launch. Drawing from Kaitlyn's and my shared experiences growing up as queer Asian women in the Bay Area, we tapped into our vivid lexicon of Asian-American iconography—Chinese medicine, bustling Asian supermarkets, and nostalgic cartoons—to shape our vision.

However, since Lunar New Year is celebrated in countries beyond China, we thought it would be more effective to uplift the voices of other students, highlighting their interpretations of the holiday. So, we turned the landing page into an open call, inviting Pan-Asian creators to design multiple landing pages.

Designing with modularity in mind, we aimed to ensure that future generations of LG can continue using the archive site to preserve their work. As the proverb goes, 'The predecessors plant the trees; the descendants enjoy the shade' (前人栽树，后人乘凉)—we see this archive as a foundation for future creatives to build upon. To support this, we decided to write instructions on how to add entries to the website.

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.

As a third year student, I found the feedback from my peers to feel a bit redundant, which inspired me to seek critique from web developers outside of CMU–thank you, Ryan Yan! By doing so, I gained fresh perspectives and valuable insights.

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.

A successful website for a large organization such as LG should serve as a palette cleanser, not an experimental art piece. Coming from a fine-arts background, I had to put my selfish-ambitions aside, but I did not forget them; those ideas are precious seeds that will motivate future projects.

You may also like