Web Page Draft 1

Here is our website first draft, click on the link below to view:


Here is the feedback received in the form of a screencastify:

Here are the summarised targets for improvement:

To what degree has it been changed from the template, the logo and certain images needs to be changed

Background needs to reflect album art more

Not all pages are needed, there are too many – contact page can be removed

Typeface needs to be replicated across all pages and should be representative of album art

Evaluation of Web Design Application

To make our website, we used Wix, which is a professional website-designing website. The particular online-software allowed us to use various features to achieve our goals, it was awfully self-explanatory and we could therefore pick up on all we needed to know and do really easily. It allowed us to create our different pages, navigate between them, and provide solid templates for us to base our ideas off of.

Our website contains many conventional features that Wix allowed us to incorporate, which allowed for a useful and quick and easy to use website. Firstly, we were able to create each of our pages and were given previews of what each landing view would look like, we could then edit it from there so we could create effective landing pages to engage the viewer as they arrived at our site. The navigation strip was positioned at the top of each page, and Wix allowed for this to be a constant to remain there on each page, this was also the same for the social media links in the top right corner of the page.

Included in the “music website” template was the option to sell the music online, which gave options of “Paypal” and “Mastercard” etc, then our tracklist could be imported through means of mp3, and a thirty-second clip was allowed next to the purchase icon, this allows more conventions to be identified as it is an easy way for the fans to engage, by purchasing the music online.

Flow Chart and Preferred Template

Here is our flow chart template for our website:

This task was completed so we knew in advance how to structure our website in terms of navigation and especially things located below the fold. The reason why we chose this template is because it is relatively easy to navigate as the titles are clear so the audience can easily be satisfied.

Above is the template we used for our website, this one was selected because it is the closest representative of our genre and is also fit for purpose as a music-selling website template. The layout was also appropriate due to the correct amount of recommended pages and the ability to position albums and songs accordingly.

Website Previous Students Work

Here follows my website analysis of a previous students work:

This website is incredibly accessible, through many means. Accessibility includes aspects such as large, bold text to stand out, potentially if certain people have issue with sight. Another aspect of accessibility is the use of images. In this website, there are a lot of bold images to stand out and break up text, which benefits accessibility because people may easily get bored of block text. Accessibility also encompasses navigation, and there are many easy and obvious ways of navigating through the pages, there is a bar along the top labelled, ‘Latest Video’ (the landing page), ‘About’, ‘Discography’, ‘Tour Dates’, ‘Media’ and ‘Merch’:

These are clear titles for ease of access as they are understandable at first glance, and there aren’t too many to overwhelm the user. The tabs are featured on each page so navigation is simple to return back to previous pages.

There is a bold ‘About’ section, with a semi-brief paragraph highlighting details about the star. The fact they keep it short and sweet means the reader won’t get bored and it is broken up by an image on the right. An interesting font has been chosen to keep interest throughout with the title standing out in bold. In order to have included more detail, they could have used multiple paragraphs to give the reader more detail of the star.

There are various aspects that keep the branding constant throughout the website. The logo is featured on every page, including on all aspects of the merchandise, which reinforces the band’s image and keeps the viewer hooked. Another aspect that is kept as a constant throughout is the background and colour scheme, the blue is representative of the band being quite transparent and clean.

Finally, the website conforms to Blumler and Katz’s uses and gratification theory. The four sections included in this are: Information, Social Interaction, Personal Identity and Entertainment. The user gains information about the star, music and news surrounding them and what they do, the social interaction links to the social media aspect, which allows people to share opinions about the given information. Thirdly, these social factors conform to a person’s personal identity, music is generally quite an important part of people’s lives, especially of our target audience demographic (younger people), so the website appeals to them for this reason because the messages given in the video and alike factors help form their personal identity. Finally, the user is entertained by the music video and alike factors, such as the purchasing of music.


Web Page Conventions

Here is our web page conventions screen castify analysis of another website:


Ben: Andre and I will be analysing the website of the artist ‘Fall Out Boy’, in preparation for making our own website. We have selected this artist, as they are similar to our own in terms of genre, and therefore are likely to share conventions of a website.


Andre: As you reach the home page, you are greeted by a large hero shot filling the majority of the screen above the fold. This has been used to engage with the audience as it draws them in, as they ask what the photo is for and what it represents. Within the hero shot is a link to stream and download the band’s latest single. Also featured here are the band name at the top left of the page, and a horizontal tab selection at the top right, acting as links to other pages. These have been positioned here for ease of access, so the viewer can easily navigate around the pages for an effective webpage experience.


Ben: As you scroll down, below the fold, you reach a large image featuring the latest album art. The title, ‘Mania’, is capitalised and is larger than the surrounding text to stand out. Below reads that the album is “out now”, and features a link of “buy the album”. These stand out as the main call-to-action, standing as the purpose of the website, to sell the latest album. At the very bottom of the page features links to various social media sites, such as Twitter and Facebook, which helps the fans more literally connect further with the star, as well as the links to the record company’s websites. Also featured here is the band logo, outlining a position of branding, and a brief sentence about the “Fall Out Boy Fund”, which raises money provide 20,000 elementary school kids in the Chicago area with food education.


Andre: Returning to the top, and clicking the link named ‘News’, takes you to a new page filled with information on the current events and projects the band are partaking in. On this page, a strong white background has been used in contrast to the eccentric purple and grey of the previous page, this allows the text to stand out, as well as the images, including the large hero shot at the top to show the band on tour. This page works to summarise everything on other pages including links to external sites, but also to promote the band’s live action and performances. There are some conventional repeated features on this page, including the tabs for navigation at the top and the social media links at the bottom. Moving onto the tour page, there is another large hero shot to show an impressive tour turn-out, however there are currently no upcoming tours.


Ben: Continuing on, the music page takes you to another purpose-built site to purchase the band’s music. There are options to stream from Spotify, Apple Music and Youtube, and purchasing options from iTunes and Amazon. The band logo is included at the top and a silhouette is included at the back to reinforce the brand. This page is quite simplistic to highlight the matter at stake, this is one of the main aspects of call-to-action on the entire website so it needs to be obvious and accessible. Next, if you click on the ‘Videos’ tab, you are taken to the band’s YouTube page, which features all of their singles and the music videos to accompany them.


Andre: The penultimate page is the ‘Sign Up’ page, which allows fans to leave their email addresses, zip code and country. This allows them to receive news and mailings through their email address, further connecting them to the stars. Also featured on this page is another large hero shot, which again stands out to highlight the live performance aspect as a matter of importance. Finally, the ‘Store’ tab, features all of the merchandise and potentially buying opportunities available from the band. Within this tab, are a further five tabs, namely ‘Mania’, ‘T-Shirts’, ‘Outerwear’, ‘Accessories’ and ‘Music’. There is also the option to select which version of the stores you would like to shop in, the U.K. version or the U.S.A. which improves accessibility for a wider range of people. There is still a prominent purple theme, which contributes to the brand value, but also a white background to allow the products to stand out.

Website Terminology

Here are the various terms used to describe parts of a website:

  • 1) Leaderboard – this is the title of the web page which is always positioned at the top of the web page
  • 2) Hero shot – The hero shot is the frontal image of the subject of the website – be it a person or an item
  • 3) Tagline – this is where adverts are placed on the web page
  • 4) Navigation – this allows you to move around different pages on the web page
  • 5) Skyscraper –buttons on the side of the web page that are usually in a rectangle box, the buttons maybe linked to different various parts of the web page
  • 6) Main Text – the main body text that discusses the topic that web page is based on
  • 7) Above the fold – the top of the page – what appears when you first arrive at the site
  • 8) Below the fold – below what you can see when you first arrive on the page

Digipack Draft 1

Here follows our first draft for our digi pack:

Targets for improvement:

Potentially remove the railing from the images (pages 2 and 3)

Potentially add red squares to the images (pages 2 and 3) to reflect style from front page

Copyright information should be more discrete – it stands out too much at the moment

Spines are missing altogether


Reflection on feedback:

The copyright information can be minimised to make it more discrete, this will be done by making it smaller and ensuring it is at the very bottom of the page. Spines will be added to feature information labelled on the front cover – including the band name and album title. The only concern I have about the targets for improvement is potentially changing the colours on some of the squares on the wall (pages 2 and 3). The images I took were from the 9/11 war memorial in New York, USA, and each blue square is said to represent each life lost in the terrorist disaster. The colour blue is meant to stand for the unity the country showed that day in the face of terror, and each square is a slightly different shade of blue, representing all the different personalities lost that day. I feel that changing the colours would damage the notion the image is trying to convey, and potentially take away the respect shown for those lost. It is acceptable to use these images however because the context of various songs feature the idea of America standing together in unity.