Web Page Draft One

This is our Web Page Draft One of our website.



Based on the feedback that we received from our teacher these are our targets we have compiled together :

  • Create some news articles
  • Insert our mission statement in our bio
  • Delete unnecessary links and social media icons
  • Include some different shots that we’ve taken
  • Hype our album and music video more, also including the digipak for hyping up the album


Flow Chart and Preferred Website template

After researching other music artists websites, we were able develop our understanding on the conventional layouts of a website, and this flowchart we were required to create helped us plan the navigation of our music artists website.

We decided that we had some elements on our home page to scroll down to the different section so we had the ‘Bio’, ‘Tour Dates’ and ‘Contact’ all below the fold on the home page, which we was  a simple but effective layout. However, with the other pages such as the shop and music we had them on a separate page as we felt the audience could engage with the page more efficiently if it were separated, for example, if an audience was searching for merchandise it could also lead on to social media and exploring other medias.

We then signed up to Wix.com which was our website creation platform, we endeavored in our search for template designs and found a suitable one and started creating our website.

This was our chosen template for the start of our website :

Evaluation of web design application

In terms of the process of web design application, there is a lot of things that I have learnt on this process of web design making, with using Wix it wasn’t a site that I was familiar with, however it was a platform that i have heard of before, there were elements that I found were difficult to comprehend at first but gradually got a grasp of for example, how crucial the tabs were on the left of the website creator, this was the core of the website and all elements that I wished to implement on the website came from ‘Add Apps’ section of the bar, an example of me using this feature was on the tour dates table where I was required to use ‘add apps’ and use an add on app to add the tour table in as seen in the image below.


Also features which I found were pretty straightforward was to add media in this instance from YouTube it was pretty easy to use link from the video and paste it in to the media tab, in addition, to adding text was simple as many interfaces by adding in text boxes and typing in the desired text. Also adding in images the options were simple to do by adding in images and uploading them from the computer then adding the image in. In addition, some other features which helped us convey our genre of indie pop and star image was the fonts that we used, there was a variety to chose from however we knew what was conventional of our genre and chose the appropriate font which help us convey our genre, we were also able to convey our star via our merchandise page which we created and portrayed our items conventional to our genre.

Overall, I found the web design interface simple and easy to use, and enjoyed creating our website on the platform.

Website Previous Students Work

For the creation of our very own Website, in this task we were asked to look at a previous students Website, this task will be beneficial for us when creating our own Websiye as we will be able to see how they’ve constructed there own Website and ultimately help us construct ours.

The website I have chosen to analyse is the website for ‘The XX’ which is present below :

I will analyse this work against 5 different criteria to ensure I have met the requirements of this task.


In terms of accessibility as the The XX are an actual indie pop band it was hard to access this website in particular which is understandable as The XX would more than likely have a number of websites and social medias on the internet thus not being able to access this website easily and wasn’t very accessible.


This website is very easy to navigate, when you click on the navigation bar and click on whatever you like it smoothly transitions to the desired page, in addition, you can also scroll down on the home page to the desired section which follows chronologically with with the navigation bar, however the merchandise page is the only which takes you to a new window which isn’t an issue at all and the merchandise page is presented very smartly and neatly thus being able to navigate with ease. In terms of layout it is clear and simple to use and the pages aren’t complex and stuffed with content so to speak which I appreciate thus being very easy to navigate. In addition, to the social media icons being frozen at the right so when you scroll it moves along with it, which mean it doesn’t overlap with anything and is well structured.


The information that I was able find about the Band which is the star in this case was found on the ‘About’ section, what told this me about the band was what genre that they are being indie pop, also where the band was formed being in London in there actual high school. Other information that I was able to find was the band’s tour dates which was useful for the audience if they wanted to go see the band. However, there could still more information provided for example more about the individual band members and telling the audience more about themselves individually, in addition, to more media in terms of music videos for example which is what they are essentially all about which I thought they could’ve implemented in. Also under the ‘Media’ section I was also able to find more about the band with the images which were provided and was able to get more of a feel of there band’s personality with that.


With the website and music video I believe that they share a good correlation in terms of color scheme and the genre of indie pop is evidently portrayed throughout elements such as the mise-en scene in terms of costume conventional of the genre , the color palette with the implementation of vibrant colors. However, I believe that an issue is that between the music video and images of the band which is is under the ‘About’ section is that the performer isn’t the same as the one which is shown to us in the images which overall doesn’t work or make sense altogether. In terms of the digipak, I do believe that they have successfully portrayed the brand image throughout the digipak however because of this very reason the design is very similar to the actual album cover’s of ‘The XX’ thus they haven’t been creative with there digipak design I believe.


In terms of how the website fulfills the audiences uses and gratifications from Blumler and Katz I believe that does provide the information required to the audience, for example, it does inform the audience about the tour dates for the band, and a little section about the band however, I don’t believe this a sufficient amount for the audience, the website I believe could include more about the individuals in the band themselves. In addition, it could also include some more information about there albums, latest releases/tracks, which could then lead on for the audience if they want to purchase the album via the merchandise page.

In terms of personal identity the website fulfills the audiences uses and gratifications via the ability for them to purchase merchandise and have that identity of being a supporter, a follower, a fan or whatever they want to it be thus creating a personal identity for the audience, the merchandise available includes hats, posters, CD/album, tank tops, t-shits and bags, which is a number of items that the audience can you use to shape there personal identity.

In terms of social interaction the website does allow the audience to reach the band via the social medias which is present with the icons of the relative media’s on the right bar on the site, whatever social media suits the audience they able to interact with the band via those platforms.

In terms of entertainment the only thing present is the music video itself on the front page, that’s it which is why I believe that they’ve included more entertainment which could be in the form of just audio tracks, or even videos showing more in depth about the individuals themselves there background and more.






Website Terminology

We have now produced a music video and now a digipak, our next product we are now required to create is a website, in order to this it is fundamental that we understand the conventions of a website and this task required to identify them. I went out and analysed other artists websites of the same genre as ours to understand how they’ve portrayed and laid out there websites to get out what they want to there target audience which could be via technical conventions such as a leaderboard which is basically the masthead of a website which has similarities with a magazine, also similar between the two is the hero shot of a website and the main cover star which is of a magazine.

Digipak Draft 2

Here is our Draft 2 of out Digipak :

Front Cover


Left Panel
Right Panel



Back Cover


  • We changed the masthead and the changed to font of it to make it aesthetically look better.
  • We changed the text of the tracks so it doesn’t cover the model on the back cover.
  • We changed the right inside panel, which we manipulated in Photoshop to create that image that is now on our final right inside panel, also we played around with the stone which was a target of ours which we managed to do.
  • Centered the text on the spine.

We then got feedback from 3 of our peers to tell us what they liked and targets for improvement, here is what they said :

Peer 1 

  • Images suit the genre well, and theme of the tracks.
  • Conventionally well presented and suited.
  • Positioning of model is great.


  • Maybe fix the back cover looks a bit stretched.
  • The text at the bottom of the back back cover is hard to read.

Peer 2 

  • The fonts are well chosen and suits the digipak
  • Color scheme is well chosen.
  • Great manipulation of images on right inside panel.


  • Maybe do some color corrections on the back cover.
  • You could change the color of the text of the tracks to white to match the color scheme with the front cover.

Peer 3 

  • Clouds are well manipulated in inside right panel
  • Drop shadow on masthead is a good choice and looks good.
  • Good color palette choice.

Improvements :

  • Could re position the masthead on the front cover, so have the album at the top and artist name at the bottom.
  • Different picture selection with the manipulation of the heart shaped rock, looks the same image as the front cover.


Digipak Draft 1

Front Cover
Left Panel + Right Panel
Back Cover

What we’ve changed from our previous draft is that we’ve included in our right panel is that we’ve included the image of the rock and manipulated it in Photoshop so that it looks the heart shaped stone is broken, portraying an heartbroken theme, we’ve also changed the masthead and the size to make it look much better in terms of appearance, we’ve also changed the text of the tracks on the back so they don’t overlap with the star.


Here is a screencastify from our teacher giving us feedback on our digipak draft 1.


  • Nice, fresh, nature feel to it, fits the genre.
  • Likes drop shadow on name.
  • Lovely picture for back cover.
  • Spines are good.
  • The heart shaped stone is well constructed.


  • Make the star bigger.
  • Bit too plain for masthead.
  • Maybe change text on back cover so it’s not over model.
  • Text on spine don’t look centered.
  • Change size of text for masthead.
  • Inside right isn’t good, too much of model.
  • Play with stone.

Evaluation of shoot or graphic design

We have now completed our first shoot for our Digipak, now it’s time to evaluate on our photoshoot, and our digipak design so far. Also with the evualtion we will be able to assess where we could improve our product overall.

Overall, we were happy with our photos that we took on our shoot, we had a variety in terms of distances of shots which enabled us to have the joy of choosing a suitable photo for our digipak and website, with the freedom with the number of photos that we had. Below is some of the photos that we took from our shoot.

However, when it came to our design, we had found suitable images for our front and back cover in addition the left inside panel, in contrast we did not have a suitable image for right inside panel which is where we had to come up with something which was suitable for the panel, we should’ve had more clarity on what we wanted for that panel, but this problem gave us something to work towards.

Most importantly we had the images for us to use and manipulate for our digipak and website and ovreall we were happy with the outcomes of the shoot and the graphic designs that we had manipulated.