Website Prototype 1

Website design Journey:

To create the website I used Wix.com a cloud based web development platform that allows users to create HTML5 websites and mobile sites.

In order to obtain the desired outcome of my website, powerpoint was inappropriate because of the restricted layout and lack of options. However, I used the ideas from my mock up as guidance, which made it much easier to create. Moreover, feedback from my target audience about my website mock up revealed that Powerpoint lacked the interactivity which is critical for a website to be effective.

I used my digipak’s front cover image as the main image on the home page, and there is also a similar shot featured in my final video. This links my tasks together, which establishes continuity.

In order to put images on my website they had to be a certain size. The maximum size the images could be was 15mb, some of the images I had were raw files, which meant they were too large. Wix also recommended personal images should be: 1920 px in width and 1280px in height. To alter this I used the crop tool in Adobe Photoshop resize my images to these requirements. This enabled me to include what I wanted in the recommended frame. I then saved the files as a JPEG to make sure they were less than 15mb.

Homepage:

This mid shot of the artist on the digipak cover enables the audience to clearly see who the artist is. This in turn provides information to the viewers, so they know who the website is about. The long exposure gives the image a mysterious look and connotes that the album is going to be very thought provoking and unique. The artist’s facial expression is extremely intense and is looking directly at the camera, thus making a connection with the audience and captivating their attention with the mysterious visuals. Moreover, the image is in black and white, suggesting the album will include dark themes, which adds to the mystery of the artwork, as it applies a sinister twist. It could also be argued that the black and white colour scheme connotes that the artist has regrets about his past, thus adding to the sinister undertone of the artwork. There is only a little lighting on his face, which gives an enigmatic connotation to the artists making the audience want to find out what may be on his mind.

The sans-serif typography is large and clearly states the name of the album and the artist. It makes the cover look modern and is emphasised by contrast of the colour of the text (Orange and white) and the black and white image. The sans serif font of the title of the album (Bad behaviour) looks handwritten – so the connotation is that it looks like the artist wrote it on the album at a time of desperation, most likely during one of his mental breakdowns which makes the album feel more personal and unique which acts as a unique selling point and makes it stick out from all of the other albums. The scribbles suggest that the artist wrote this during a time of suffering, intensifying the deep, dark meaning behind the album and highlighting how this music is the artist’s form of escapism. Moreover, the sans serif font (Distortion Dos Analogue) of the artist’s name is distorted and looks irregular, connoting that it doesn’t conform to normal typefaces that display artist’s names. This is reflective rebellious attitude that is often explored in alternative rock music, so the genre of the album is signified to the audience through the presentation of the font. On the music page the same image is used and there is a button underneath that gives the audience the option to listen to the album. My research showed me that this is a standard convention of artist’s websites and acts as a promotional tool.

Slideshow of images on the homepage:

In response to a comment from my target audience, I filled massive gap in the homepage. Initially, I filled it with merchandise like I said I would in the website mock up, however it looked really bad and undermine the professional, elegant and authentic look that I wanted to website to have, so I replaced it with a slideshow of images from the shoot of the music video. I included a slideshow on my homepage, which shows my personal images. These images were from scenes in the music video, connoting that the main focus of the website is the music video. I saw the slideshow as an opportunity to link my tasks to my final video. I included shots from the video, which would build suspense and make them want to watch the video. It also allows the audience to get familiar with the artist. The images have changed slightly to the ones that I had planned from my mock up, additionally in response to audience feedback I have reduced the amount of images that are in the slideshow, in order to keep the main focus of the website on the music video. The first two images are close ups of candles as they play a pivotal role of symbolism in the music video, so they are key scene in the music video and their connotations from the storyboard are still relevant here. These images were taken during the video shoot and link the website to the music video, maintaining continuity. Image three and five depict the past, which is another key theme that is explored in my music video. Again, the connotations seen in the storyboard are relevant here. One image is a close up of the baby picture of the artist and his brother, whereas the other image is a long shot showing the two sitting on a bench at the location that symbolises the past in my music video. There are two pictures showing the past on my homepage to connote its importance throughout my whole media project. The final picture is a high angle close up of the drumsticks hitting the drum – which provides an insight into the action that is displayed in my music video. This attempts to steer the viewer to watch the music video. The viewer can click on any of the pictures to bring up a window that lets them view the images at a much better quality but at a lower resolution.

Social Media:

Included on the website are various hyperlinks to all forms of social media that the artist is on. As I found in my research, most social media tabs are in the top right hand corner of websites so this is where I positioned them as I wanted my website to follow modern conventions so that it looks more professional and authentic. Also, by doing this I am responding to my audience feedback as it makes the website more interactive. I made the hyperlinks by going to the official page and copying the Url (Uniform Resource Locator) from the browser and copy pasting it into Wix’s navigation system. I had to get each individual Url for each corresponding social media platform.

Navigation bar:

The wix template included a generic navigation bar. I changed the bar so that each page corresponded with my website mock up. These buttons make it easy to navigate around the website, allowing viewers to get to where they need to within two clicks. This is important as interest can be lost if the site is too complex. Moreover, my research informed me that the navigation bar is a convention of websites.

Music page + Video:

By clicking the music hyperlink on the navigation bar the audience will be taken to the music page of my website. I have embedded my finished music video from my YouTube channel onto the website. This automatically plays when the music page loads – this instantly grabs the attention of the audience member and draws their attention to it. The auto play feature is also a very easy way for people to listen to the artist’s music without listening to the whole album. It will draw the audience attention and showcase the artist’s talent. I have stuck to my plan of using a grey-scaled image of a swing set as the background for the video – reinforcing the theme of the past. The background picture is a photo of an isolated swing set to reinforce the feeling of nostalgia. The picture is black and white to connote that it is lost and is in the past, which is reflective of the longing for the past that is explored in my music video thereby connecting the two products. I also have a device that gives the audience the option to listen to the full album by clicking the play button, however, it currently does not work and will need to be fixed in the final tweaks to the website. This will be fixed when I adjust the website to the feedback I get from my audience. I have also included the actual retail price of the album to reinforce the realism of the website. Furthermore, I have introduced the new album on the music page as it is the first thing that can be seen, just like it is the first thing that can be seen on the home page, the connotation of this is that it highlights the importance of the music and how the music is more important than the artist. It also acts as a promotional function that websites tend to use to promote new releases from the artist. I also plan to include an image of myself so the audience can identify who the artist is and can put a face to the name. The contrast between the Serif and sans serif font connote that the album doesn’t fit in with a set genre/style, as the songs in the album are diverse and cover a variety of genres, thus highlighting one of the albums unique selling points. The sans serif font above the image of the artist connote that he is a unsophisticated and is a more regular and rough teenager, reflecting the style of music that he plays. The connotation of the bold effect of the font is that suggests that there is something dynamic about this person that makes him stand out, it is alluding to his mental illness (MADD) that is explored and fleshed out in the music video and digipak. The image of the artist will be a long shot so the audience can clearly see him, he will be wearing the jumper that he wore in the music video, and that he is wearing in the digipak cover. This creates continuity between my three media products.

Often people just want to listen to one song before listening to an album. Having a promotional music video draws people in, allowing them to get to know the artist.

Tour:

As requested by my target audience, I have simplified the layout of the tour page and I have also removed the image that was distracting the audience’s attention away from the tour dates. I have also connected the Bandsintown account to the official Twenty One Pilots so that the tour dates on the website are the official tour dates for the actual band. This adds a level of realism and authenticity to the website. I have stuck with the black, white and orange colour scheme in order to establish continuity between the three media products and to promote the artist’s brand (as the colours associated with the artist are Black, White and Orange). These colours ensure that the dates stand out on the page so that they are clearly visible to the target audience.

About:

I have changed the layout of the about page slightly as I wanted to continue using a black background on every page on the website to establish continuity. I have kept an image of the artist but it is a much smaller size, however he will still be clearly visible and identifiable so the connotations don’t change. I have also included a few paragraphs of information about the artist. There are hyperlinks in the writing that the audience can click if they want to know any more about that specific detail. This improves the interactivity of my website, making it a useful resource that provides a detailed background about the artist. I decided to change the font of the title to sans serif in order to coincide with the text on the other pages as it maintains continuity throughout the website.

Merchandise:



The merchandise page looked really bad and my target audience agreed with me, as a result i have decided to remove it as it doesn't add much to the website.

Audience Feedback:

Home page:

“I think you should add a little description of the album in the space underneath the buy now buttons as it will fill the empty space, or include something along the lines of #1 Best seller to fill the empty space as it is distracting and look unprofessional.”

“You should add the logo of the artist (Twenty one pilots) to the homepage, as it is a convention of homepages and will make the website look more authentic.”

“The Homepage is lacking in terms of content, I think you should add something to develop it as in its current state it looks unfinished, include something like the latest news about the artist as that seems to be a convention of website like these.”

“I think you should make the background black and the text white as it would make the site look more classy and polished.”

“I think you could improve the website by making it more navigable, for example making it so that navigation through a page is faster and easier rather than just making it easy to get to the page.”

“The links on the homepage that are suppose to redirect you to the sites where you can purchase the album don’t work, you should add these links as it would improve the websites interactivity.”

Music page:

“You need to change the image on the music page to a picture of you – the current one is not you and is misleading as I got confused about who the artist was”

“You need to change the image of the swing set to one that you took as it is misleading and adds to the atmosphere of the website.”

About page:

“You need to change the image on about page to picture of you as the one there is not you so its unclear who the artist actually is”

Merchandise Page:

“The merch page looks really bad and takes away from the sophisticated design of the website, you should either change it completely or just remove it as it doesn’t add much to the website.”

My Response To Audience Feedback:

Here is what I plan to do change in order to appeal and adjust the website to what the target audience have said:

1. I shall add a small description of the album on the homepage to fill the gap.
2. I will add the logo of the band to the website and put it in the top left hand corner as that is traditionally where the logo of the band goes on the website.
3. I shall add a thread of the latest news about the artist to flesh out the homepage.
4. I have Changed the background of the website to black and the text to white to make it look more elegant, classy and sophisticated.
5. I will add more features to improve the navigation of the individual pages to make the website more interactive.
6. I will fix the links on the homepage that are meant to take the audience to the respected page where they can purchase the album.
7. I will change the image on the music page to a picture of myself to establish that I am the artist and so that the audience can put a name to the face.
8. I will change the image of the abandoned swing-set to one that I have taken and edited.
9. I will change the image on the about page to an image of myself - for the same reasons as why i'm changing the picture on the music page.
10. I will remove the merchandise page.