Creation of the Website

During the past few weeks, we have worked on creating a website to accompany our CD booklet and music video. This was done using the online website creator; Wix.

This was the original template's home page which appeared to need a lot of work to change. Firstly, we needed to change the background to something more appropriate to our project (which would feature on all of the pages that follow) after several different backgrounds were tested, we opted for a scenic screen capture from our video which we then had to edit so that the lighting and colours allowed for text to be viewed. We also removed the large icon and text from the centre and replace it with a large title of our artist to be placed at the very top of the page. The social media links were also moved and were each linked to Madeon's official pages. The navigation buttons at the bottom were only added to this page whilst the ones at the top remained in the header on the rest of the pages.

The News page was fairly straight forward in terms of the design. We simply split the text box which scrolled down the page into two parts in order to have everything instantly seen without the need to scroll down as this affected the size of the background picture. Once we had finished doing that, we were able to fill in the information with events including the plan for the music video and the release of the song we were covering. We also decided at this point to colour code each page, making the boxes red throughout as opposed to the flashing multi-coloured ones that were originally there.

We did a followed a near identical process for the news page, splitting the text box and adding in information about a tour including dates, location and price.

For the music page, we had to replace the music app that already existed and opted for YouTube clips with links to the same songs oniTunes.  We had originally had 4 videos on the page, however due to the aspect ratio on certain computers, not all could be viewed properly.

We decided to completely scrap the bio page as it was not vital to the website and it didn't seem to blend very well with the other content.

We created our own brand new Store page which frequently features on real artists' websites selling merchandise etc. We added images of genuine Madeon merchandise and made some realistic prices to accompany them.

The header contains the Artist's title alongside the logo From the initial 'M'. This logo is also a button that links directly to the homepage.

Website Colour Schemes and Mise-en-scene

Mise-en-Scene: For our website we have decided to subvert from a lot of the conventions used by the original artist.
We will utilise screenshots from our final production piece and landscape shots taken when filming in order to make up the background, as opposed to Madeon who used a landscape artwork rather than a real picture. This background will be enhanced in order to be the middle ground between the two contrasting moods in the video. This will be the tone throughout the rest of the website.
The information will be laid out in a very simple and easy to use way through the use of tabs linking to different pages and large text boxes with information displayed in a simple list form.
The conventions of the genre and of music in general will be conveyed through the frequent use of the artists logo and brand.


Colour Scheme:
we have chosen to use several different vibrant colours for the text boxes and the text itself. This was an attempt to adhere to the conventions of the genre. This was decided through the frequent use of neon and strobe lighting seen in different music videos categorised in the same genre and is something we will pay homage to.
The background may make the text colour difficult to choose as it is likely to consist of several different colours which may blend the text in. We will attempt to counteract this by adding a translucent layer behind the text to help distinguish the text from the background.


Below is the homepage of Madeon's official website:

Brand Development

I have created a post on Glogster to explain how we developed a brand using our products.
Brand Development