Banner image of Ripple Music Festival

Ripple Music Festival

Project Type
Branding, Identity, Product Design, UX/UI, Coding
Duration
7 weeks
Program Used
PS, AI, Figma, Sublime
The Ripple Festival was an independent project aimed at designing content for an imaginary music festival. The objective was to develop a brand identity for the festival, including a name, logo, poster, and three merchandise designs. I was to showcase two music genres with a minimum of five artists in the festival lineup to highlight.

Background

The genres of Acid Jazz and EDM were the primary music sampling a connection with the soundtracks of "Jet Set Radio Future." This roller-skate and graffiti-themed video game introduced me to Shibuya-Kei music, which contains Acid Jazz, EDM, Soul, and more.

Target demographics
- Primarily urban males aged 20-30 in North America, who experienced the Y2K era and resonated with retro culture.
- Sought nostalgic experiences with a modern touch.

In order not to confuse the audience and broaden the festival’s appeal, I decided to deconstruct Shibuya-Kei and choose the two most popular genres within the style — Acid Jazz and EDM — to help a broader audience to better understand the style.

Logo

Process of the Ripple logoColour and black and white version of the logo

The name "Ripple" embodied the imagery of a song creating a "zap" in one's memory and forming a ripple of afterthoughts.

The Logo is based on the keywords: Curiosity and Engaging
The zig-zag shape represents characteristics of EDM: inorganic and electrifying. The colour is based on the lights at most of the EDM music concerts.
The circular pattern is inspired by the Bauhaus design style which is often seen in Acid Jazz's music album/poster. The action of ripple is commonly represented with repetitive lines (circles) as well.

The overall composition is in a diagonal structure to a sense of movement and energy.

Poster & Bill Board & Advertisement

The process of making the poster with four images from sketch, digitalization, and improvementsFinal version of the posters, the left one shows the artists while the right one shows the mascot

I drew inspiration from the visual elements of Acid Jazz, EDM, Jet Set Radio Future's UI, and older TV screens. I combined these influences with a funky and energetic color palette to create posters for the music festival. Illustrator is used for the digitalization of logo and poster sketches, applying techniques such as the 3D effect of Extrude and Bevel, and Inflate, demonstrated through the logo. The usage for Photoshop is transferring my illustrations to the final poster version, utilizing artist photos with post-production enhancements and horizontal halftone filter.

This high-contrasting colour palette also stands out in urban settings against concrete buildings and nature, and on digital platforms against white or black background. It demands attention.

Merchandise

Four spray can colour with one limited edition in black and white

Merchandise items drew inspiration from the elements found in Jet Set Radio and the two music genre. These items are popular music festival products that have sentimental value, and gamers have the tendency to complete in-game collections. Therefore, each item have different variations to make the products seem like a set.

The concept of monochrome originated from the initial sketches created during the process stage, symbolizing a starting point—a concept in its purest form. All mockups were crafted using Photoshop, with the exception of the pins, which were created in Illustrator utilizing similar 3D effects.

Landing Page

Additionally, I also took on the task of designing a new website using Figma and Sublime.

The mockup of the landing pageThe coded version of the landing page on the left and the codes on the right

The festival website is a landing page provides information about the festival, including details about the artists, radio station, ticket types, event details, and merchandise. The website’s goal is to simplify and enrich the user's search experience about the essence of the music festival and differentiate it from competitors. Lo-fi and hi-fi wireframes were designed in Figma, integrating the illustrations and the color scheme from the music festival. Later, I coded the site with HTML and CSS using Sublime to see if I can apply what I have learned from the coding class.

The Figma prototype features interactive elements for the artists and radio sections, incorporating hovering and transitional effects. However, to apply these interactions on the coded version of the website, it would require JavaScript and advanced CSS (which I have not learned). Therefore, I modified the structure, buttons, and layout for a simpler appearance.

Coding proved to be the most challenging aspect of the project. I dedicated a long time to experimenting and testing various designs, attempting to replicate specific visual elements through coding. Given my minimal language proficiency with HTML and CSS, this posed a significant challenge, requiring me to approach design from a completely different perspective. I had to utilize ChatGPT to help me achieve certain layouts.

What I've Learned

Working with different sets of high-contrast colors was really challenging, as the design could become visually overwhelming without thorough planning. This issue particularly showed on the landing page, where the chosen color combination seemed to clash for attention. In future projects, I plan to stick to just two or three color combinations to avoid such visual conflicts.

The process of coding in HTML and CSS was genuinely the bigger challenge and required considerable mental effort. It deviated significantly from what I consider intuitive, and grasping the concept of breaking down certain elements into multiple layers proved to be...Beyond my mental capacity. For instance, tasks like stacking images on top of each other required precise positioning in coding, whereas in Figma, I could achieve the same result by simply dragging one image on top of another. It was an eye-opening process to learn the limitations and boundaries of designing for web.

© 2024 Designed by an INFJ