Website Design


Overheard @ Royce

Web Designer/Programming Committee
April 2023-May 2023

Overheard @ Royce was a marketing tactic for the Student Committee of the Arts’ Royce Hall show in Spring 2023. It reflects the headlining artist’s, Magdalena Bay, website and artist aesthetic that is inspired by 2000s web culture.



Introduction
For designing the website, I drew inspiration from Web 2.0 design styles and Magdalena Bay’s website design, which is also heavily early-Internet influenced. I used HTML and CSS to build the site from scratch.




My Role

As web designer, my role consisted of creating the website and publishing it via SCA’s website.

I also communicated with the rest of SCA’s programming committee about the website, other marketing tactics, and helped book and plan the show. Additionally, my band Chalk Talk was the student opener for this show.


Inspiration
To align with the Magdalena Bay’s website and artist aesthetic, we wanted the Overheard @ Royce website to have the same elements. The theme of ‘secrets’ is present in both their music and artist persona, so for marketing, we wanted to incorporate UCLA’s very own “secrets” page on the site. 


Design
Classic features of old websites include GUIs that utilize gifs, and blue hyperlinks, embedded music/images, and a fun and colorful look. I chose Times New Roman as the font, mirroring the default HTML font, as well as blue hyperlinks that turn purple after they have been clicked on. The background was similar to Magdalena Bay’s website, a night sky with shimmering stars, most likely drawn from Space Jam (a website from the 1990s that is a popular time capsule of early Internet sites).


Website Features
The website serves as a place to visit to learn more about the artists of the show and RSVP for the event.

On the Home Page, the user can find links to each artist’s website when they click on the logo or the artist image. As the user scrolls, they see Magdalena Bay (headliner) at the top, SASAMI (opener), then Chalk Talk (student opener), with gifs that link to the RSVP or other pages of the website. Gifs were used to provide an interactive and dynamic interface. There is also an embedded song by Chalk Talk on the homepage, drawing inspiration from MySpace that allowed embedded music on a user’s profile.



The Blog Page posted the secrets that were submitted to the textline advertised on the website and SCA’s Instagram, so users could interact by submitting to the blog for their anonymous secret to be posted.



The About SCA Page is meant for users to learn more about the on-campus club SCA and apply to be apart of the committee. It has links to the application as well as SCA’s main website.



Conclusion
Timeline ★
Booking the headliner for Royce occurred in Fall 2022, and the opener and student opener followed in later months. After the lineup was secured in April 2023, we started to brainstorm marketing ideas for the event that would take place in May 2023. 

Overheard @ Royce was developed in two weeks, in order to be released two weeks before the show, when we released RSVPs. The secrets were updated every couple days up until the day of the show. 

It now serves as an archival piece for SCA and its annual Royce Hall show.

Process ★
The process was very collaborative; my co-developer and I created the website guided by the inspirations and themes of the artists playing the show. We also collaborated with SCA’s directors and programming director to ensure it would be a successful marketing tactic. 

Reflections ★
This project reflects my passion for Web 2.0 and the evolution of the Internet and its culture, as well as music and events programming. Being able to blend these disciplines for marketing was very unique and fulfilling, and being able to plan the skeleton of it with the rest of the committee made the environment collaborative and creative.

From this project, I learned that I would like to do website design for artists in the future, customizing a website for their musical and visual style.

My band, Chalk Talk, was the student opener for this show! Here is us backstage


The Kids Don’t Stand A Chance: Community Market/Zine Release at In Sheep’s Clothing

Web Designer/Music Consultant
October 2022-January 2023

The Kids Don’t Stand A Chance is an event that happened in late January at In Sheep’s Clothing Records in Los Angeles. It was inspired by the youth culture that surrounded the 2000s indie rock music scenes, and incorporated themes of cyclical music trends and analog music.



Introduction
For designing the website/webzine, I strived to keep the style of early Internet blogs, to remain on theme with the event, as well as encompass a DIY aesthetic. I used HTML and CSS to build the website from scratch. 

Cover page for zine, introduction page on webzine 


My Role
As web designer, my role consisted of creating the webzine, and communicating with the editor-in-chief and the zine designer to meet their design and technological needs.

Additionally, as someone who is passionate and knowledgeable about music, I assisted the editor-in-chief on musical knowledge: cultural and historical. This knowledge helped event coordination and planning in addition to keeping the event relevant with the theme of cyclical trends. I also curated a vinyl DJ set and performed it at the event. (For music contribution details, see Music page.)


Inspiration
I used sites such as Internet Archive: Wayback Machine, and Miranda July’s Learning to Love You More to analyze ‘Web 2.0’ features and gain a further understanding of what the design would look like. The early 2000s marked the start of the Web 2.0 Internet era and was centered around blogs and DIY Internet content. Due to its DIY nature, this time allowed for one of the first music scenes that was accompanied by the Internet. This meant blog posts about albums, artists posting their content, etc. My client wanted the site (tkdsac.com) to look like a portal back to when anyone could customize their MySpace page.



Design
Classic features of old blogs include blue hyperlinks, black text, highlighted blocks of text, and an overall simplistic look. I chose Times New Roman as the font, since it is the default HTML font, and made blue hyperlinks that turn purple after they have been clicked on. The back cover of the zine was chosen by the client as the background for the site, and I decided to put it horizontally to make the front cover pop, as it was vertical lines on the front and back cover.

The website serves as an online version of the print zine. As the user scrolls down, every page of the zine has hyperlinks below it to accompany the information being addressed in the zine pages. 



Conclusion
Timeline ★
Early brainstorming the ideas for the event started around October 2022, when the editor-in-chief asked me to help with cultural and musical knowledge that the event was based on. 

The zine became an idea when the editor wanted a “time capsule” for the event, consisting of interviews and essays. The zine designer finished in mid-January 2023, and then I made the webzine in about a week, so the turnaround was quite quick. Ideas for the webzine had been discussed, and once I had all the information, I plugged in photos and links.

The website is no longer active, but served as an archive for the event.

Process ★
The process was very collaborative; the client would tell me ideas for how she wanted the website to look and I would give her a few options about how to execute her vision, then she would choose which one she liked the most. Going back and forth between the zine designer, the client, and myself was a helpful way to keep everyone on the same page and stick to the overarching themes of the project.

Reflections ★
Truly having a passion for the history of the Internet and its design styles through time, in addition to analyzing the cyclical trends of music made this a passion project as much as it was a project I did for a client. Our small event team of five people produced a very creative and collaborative environment.

For the future, I would like to experiment more with blending modern web features with older ones, to make the website I design more efficient. 

Me with the physical/print copy of the zine