Website Development

For the website, I started from the idea of using a GIF for the home page. After I decided on the book concept for this music promotion, I thought of making a GIF that alternates from a picture to a drawing/illustration. So, I did an experiment in the pre-production stage.

Post about the GIF experiment: https://saebommoonalevelcoursework.home.blog/2019/10/30/making-an-animated-gif/

Nowadays, not many people visit the website of the artist; they rather visit their social media accounts to get more information about the artist. From this trend, what I focused on was to make the website interesting. I got an inspiration from the film ‘Corpse Bride’ website, which the menus and buttons are animated.

Corpse Bride website

I first made a pencil drawing by using an online drawing filter from a footage of the music video.

And then, instead of making a GIF with AfterEffects, I found an online GIF maker, which was much easier.

This is a screen grab of the first draft homepage. I put the GIF on the background. For the menu, I didn’t know how to make them separated and arrange them on any location of the page, so I just made them as a set on the left side. I put ‘BTS’ with the same font that I used for the digipak and the logo of BTS on the top of the page. Also, I put social media links, so the visitors can easily get more information about the artist.

However, I thought the GIF is quite distracting as it keep changes and the menu bar was hard to recognise. Therefore, I changed the homepage completely- I used the same old paper texture that I used for the digipak and put the main illustration of Little Red Riding Hood turning around.

I found out how to make the each menu separately- I had to make an individual button for each of them and put a link of the landing page.

I referred back to the ‘Corpse Bride’ website and decided to draw some more illustration of trees and birds, as an enchanted, mysterious forest was the setting of the music video. Also, there’s scene when the characters interact with a bird.

Therefore, I drew more illustrations and scanned them to make them as PDF files.

I put the tree and bird illustration around the main image of Little Red Riding Hood. Each buttons were set with a bird in different colour so the visitor of the website can easily recognise them from the black and white pen illustration.

After I set all the elements on their position, I group each branches and birds and animated them to appear as if the tree grows out from the side. This worked very well and made the home page interesting. I also added the tree branches and birds on every other pages of the website to make it more entertaining.

Under the main image of illustrations, I put the music video of ‘Mikrokosmos’ and a banner that promotes recent albums of BTS.

The banner is an automatic slideshow and each background of the slide is matched with the colour scheme of the album. I put a link of online shop so the visitor can but the album straight away.

<Profile>

One of the recognisable conventions of K-POP artists’ website from other genre is that they profile each band members. The TA of K-POP usually have a ‘bias’ in a band, who is their favourite member. Each of the member have a clear ‘position’ in the band- there are several roles within one band, like the vocalist, the rapper, leader or the visual. As appearance/look of the artist is very important to appeal to their TA, there’s a ‘visual’ member in the band. On the website, each members are profiled with their individual pictures, birth dates and their positions (vocalist/rapper/leader).

Monsta X website profile

For the profile page, I put a short description of the band and followed the convention of putting individual profiles of each members.

<Tour>

I put tour dates of BTS and put a link to online ticket selling. I put the GIF that I made for the initial homepage on the top of this page.

<Discography>

For the discography page, I put all the albums that BTS ever released in order and put a link to online shop, so the audience can buy the album directly.

If they click the album, the album description/introduction page comes up. For the MAGIC SHOP album page, I put the night sky footage background to match the album’s design. All the products (digipak, music video, tracklist) are included in this page with online music streaming service, photos, introduction of the album and album/digipak specification.

It is conventional for a K-POP digipak to have an album/digipak specification about what it’s consist of for the consumers as there’re more contents like random photo cards, posters, lyrics etc. compare to other genre’s digipaks.

<Shop>

In K-POP, merchandises have a good sale to their audiences. Therefore, I created various merchandises including photobook, collaboration book, slogan, lightstick, official fanclub membership, t-shirts, phone cases and notes.

<Fan Club>

Another unique convention of K-POP band is that they have a official fanclub that is usually embedded on the website for the link. The official fanclub that is held by the agencies and named by the band themselves. This allows their TA to have a sense of belonging inside the fandom and by giving some benefits like getting pre-sale tickets of the concert/live shows, getting official merchandises (which often referred as a ‘official fan club kit’) etc, they ensure to maintain their fan base. The TA (fans) can sign in every year and they are separated as generations. (for example, 4th generation fanclub member has sign in the 4th year after the fanclub has beed established.) The membership is usually in sale on the official online shops of the band, which are embedded on the website.

I put a link to a sign up form for Korean fanclub and international fanclub. All the details about the benefits and terms of the membership is informed on this page.

<Schedule>

Since K-POP fans are active and wants to know everything about the band and follow their schedules, I put a schedule about any events, TV show appearances or tour dates on the website.

I put a link to the Tour page as the visitor might want to go to the concert after checking their schedule while looking at this page.

Overall, I tried to create a sense of branding by using the same fonts, illustrations, background and a logo for every page of the website. I’m very satisfied with the animation that I put as it makes the website much more entertaining, which will lead to more promotion of BTS.

BTS Website: https://niconi1366.wixsite.com/mysite

Leave a comment