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.

Website Mock up

I created a mock-up of my website using PowerPoint. The purpose of this mock-up was to develop and experiment with my ideas. I also wanted to get an indication into which layout I would be using.

Homepage:

The first thing seen on the website is the new album from the artist. This is deliberate as the music is the unique selling point of the artist and it tends to be what the audience like the most about the artist. As a result of it being the first thing seen on the website, it informs the audience of the release of the new album. However, the album produced on the mock up website is rather small, so it needs to be enlarged as it is the main point of attraction. I may also decide to centre the album on the page to signify that it is the main point of attraction. This also acts as a form of promotion for the album. This is a common strategy that is implemented in most modern music websites. This in turn encourages more streams and downloads which in turn will increase the revenue that the artist and the label will receive.

Moreover, feedback from my target audience has shown that they don’t like the font of the artist’s logo, as it looks too childish considering the genre of music. In response, I will change the font to a more simple and rugged/ sharper font to reflect the connotations associated with rock music, being associated with aggression and violence. Furthermore, the audience also didn’t like the empty space on the home page, so in response I will make the digipak larger and feature some merchandise in order to fill up the unnecessary space.

Also, I have provided links to websites where the album can be purchased as this tended to be a convention, which I gathered from my previous website research. I researched My Chemical Romance’s website in the past which used their newest album on the home page so it can be considered to be the inspiration behind the layout of my website. By following conventions and having a layout like this, my website becomes closer to a realistic media product which in turn makes it look more authentic.

I have used a white background on the website to contrast the dark colours featured on the digipak to enhance the artwork and to make it stand out. From my research, I learnt that, most websites have a horizontal navigation bar across the top of the page for easy navigation around the website. So, I too have used a horizontal navigation bar across the top of the page that utilises hyperlinks on my website so that the audience can find what information that they are looking for easily and quickly. It also enables the audience to find the artist’s music instantly. I learnt that the use of hyperlinks are a convention of music websites from my research so once again my product is close to a professional and realistic website as it follows conventions.

From my research, I learnt that the primary photo on most websites is one of the artist. This can be the photo that is used on the cover of the artist’s newest album, or a collage of photos from tours, gigs and photo shoots used for the promotion of their album. In some cases the main image on the website isn’t linked to their newest album, for example, if they are an established artist and have been successful for a long time, their image might be one that generally matches their known star image and style, like P!NK’s website. So, I have decided to feature a picture of the artist on the homepage, which can be seen on the cover of the digipak, this instantly creates a connection between the artist and the brand name so the audience can put a face to the name. the artist will also be wearing the same clothes as the ones he wore in the music video in order to create a sense of continuity and brand between the three products.

My website research showed that the artist’s logo is usually consistent with the font and colour of their most recent album cover. This is used to promote their new album, as the artist will want to gain as much exposure as possible to increase the sales of their new album/song. The logo also tends to match the overall theme of the website. As a result I have kept the same font and colour scheme of the artist’s logo on the website and the digipak, moreover I have used the same black and white colour scheme for the two products too. However, my target audience didn’t like the font so both will be changed to a different font that is more suited to appeal to my target audience.

Additionally, there are the artist’s social media links on the homepage. The social media tab is full of hyperlinks, which will take consumers to Twenty One Pilots’ social media account pages. This includes; Soundcloud, Spotify and Youtube. Consumers will be able to find the artist’s music on these sites. Furthermore, Facebook, Twitter, Instagram are featured, these sites enable the audience to keep up with the artist’s lifestyle.

The black and white colour scheme continues throughout the website to create a sense of continuity. It also connects it to the digipak as they both follow the same colour scheme; this reinforces the idea of the two products being a part of a brand.

Music - Slide 2:

My website research taught me that more often than not, there is a page dedicated to music videos, or videos of live performances. This use of multi-media encourages the audience to view more of the artist’s content, especially on YouTube, because YouTube views have recently become another measure of popularity and success, as well as album sales. Sometimes the music videos are restricted to one page on the website, however, other times the music videos are a feature on the homepage, where consumers can view them in a small section.

In response to this I have created a page dedicated to my music video in order to follow modern music website conventions. By doing this my website looks more authentic and genuine.

Clicking the music hyperlink will take people to the music video page. For the mock up I have just put in a screenshot of a video that is about to start playing so that I could get an idea of how the spacing would be. As of right now my video can be activated by the clicking on it, however, for my final website I want to make my videos play automatically as it will hopefully draw the attention of the audience to the music video which is the main focus of the website. The music video will be from YouTube and will be embedded on my site. This will be the final version of my music video and will link the three tasks together.

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.

Gallery - Slide 3:

This will be a slideshow of some pictures from the music video shoot. However, feedback from my target audience showed that they thought that there were too many pictures so I will no be including the close up of the artist or a picture of the student’s room. Instead I will have a close up of the artist on the about page as it seems more fitting. This will provide an insight into the actual music video and some of the visuals that are included in the video.

Tour - Slide 4:

The ‘Tour’ hyperlink takes the consumer to a list of dates and venues. I used an image of the official twenty-one pilots band on tour however, my target audience didn’t like this as they said it was distracting and the main focus of the tour page should be the providing the consumer with the dates of the tour. In response to this, I will remove the picture and fill up the space with extra tour dates when making my final website.

About - Slide 5:

The ‘about’ hyperlink will take the consumer to a page of information about the artist with an image of him in the centre to show that he is the main focus point and centre of attention of the page.

Slide 6:

The ‘Merch’ hyperlink will send the consumer to the official Twenty one Pilots merchandise page where they can buy official merchandise form the band.

Audience Feedback:

Good:

- They liked the Colour scheme, they said it looks very sophisticated in Black and white

- They liked the way I promoted the digipak on the home page as it is the first thing being seen

- They also liked the pictures


Improvements:

- They said that the website could be more interactive – My response will be to make the website more interactive by imbedding links onto the site so navigation is easier. By doing this the website also becomes more interactive

- They said that there were too many images in the gallery section, so many that it was distracting the audience from the main focus of the website, which is the music video – My response will be to reduce the number of pictures in the gallery section on the website so that the focus is restored back to the music video

- They also commented on how I should fill up the empty space on the home page – My response will be to fill this space with some merchandise which will act as another form of promotion which in turn may boost sales of the artist’s merch

- One member of my target audience suggested that I could create a slideshow for the pictures that are in the gallery section – My response will be to use this idea in my final design for the website as it will make the website look more professional and authentic

- One member of my target audience said that they didn’t like the cover image for the digipak as it was too grey and looked bland and boring – My response will be to use a lighter shade of black and white so that the greyscale is not overpowering.

- As seen on the digipak feedback – some members of my target audience didn’t like the font that was featured on the digipak as it looked childish – My response will be to run a tally with 15 people from my target audience to see which font they like the most and the winner of the poll will be used in the final design. By doing this I know that I will be appealing to the majority of my target audience even though the sample is small.

- They also didn’t like the image on the tour page, they said it was too big and recommended that I either remove it or use a smaller image as it distracting – My response will be to remove the image as it is too distracting from the main focus of the page, which is the tour dates.

Target Audience Feedback Tally:

Conclusion:

My results show that the majority of the Target audience like the font Bad behaviour, so in the end I wont be changing the font. However, by doing this I now know that I am appealing to the majority of my target audience.