#StopWarInUkraine Save the children
ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
12 Collect

Case Study: Special website to celebrate SIRUP's 5th anniversary by tote inc.

Article by tote_webdesign in Web Design -

SIRUP is a Japanese singer-songwriter who debuted in 2017 and celebrated his 5th anniversary this year in 2022. We will talk about the production of a special website created to commemorate the 5th anniversary of his debut.


First of all, let us briefly introduce SIRUP 🧑‍🎤​

SIRUP's vocal style freely moves between rapping and singing, and his music is a fusion of gospel and hip-hop with his own roots in neo-soul and R&B.

The site consists of two pages with different purposes.

  1. A page introducing the history of music releases over the past 5 years.
  2. A page introducing the 5th anniversary live.

Page 2 was incomplete at the time of publication in May 2022, and more information will be added as we move toward the November live.

SIRUP's 5th anniversary - Entire site navigation.


FONT

In order to find a font with an '80s R&B taste, which is the base of his music, we researched the designs of movies, program titles, and CD jackets of the time. As a result, we selected "Glodok", but there were large variations in spacing between letters and size differences between Os, so we made the choice to use SVG for the design quality.

Animation with font "Glodok".


COLOR

Since there were two different tastes of artist photos, they were assigned to two pages. In order to give each page of the site its own identity while maintaining a sense of unity, the reddish orange included in both artists' photos was used as the common color, and other colors that go well with the artists' photos were assigned to each page.

Different color schemes for different pages.


LOADING

In order to anticipate the release history of the stack of CDs that follows loading, the disc, which is the content of the CD case, is made to rotate.

Animation with disc.


STICKER

We wanted to create a unique web presentation for stickers, which are usually sold as merchandise.
We created a different layer for the four different artist photos and the circle that serves as the base, the logo, and changed the rotation speed slightly to create a sense of discomfort.

Animation with stickers.


CD JACKET

With the abundance of services for enjoying music in our daily lives, such as social networking services like Twitter and Instagram, music distribution services like Apple Music and Spotify, and YouTube, we thought about what we could do only with a website.

“We aimed for interactive and entertaining content that appeals to the senses of sight, sound, and touch. ”

With the increase in digital releases, there are fewer opportunities to feel the weight of physical CDs, so we digitally recreated the way people used to stack up their favorite artists' CDs in a corner of their rooms when CDs were at their peak.

We have aggregated all the information you need about SIRUP's five-year release history, including songwriting information and links to music distribution services, music videos, and more.

Clicking on the CD strip plays the song's chorus, so even if you have forgotten the song title, you can easily find the song you are looking for.

Animation with CD jackets.


Technologies

Animation: GSAP, Three.js


Company Info

Tote is an interactive design studio that has specifically created many websites for music artists. We strive to create websites that viewers can immerse themselves in and enjoy through the use of design and animation.