Posted on

Webpage Draft one and Final Draft with what has Changed

Here is a comparison between my first draft of my webpage and my final completed draft.

Throughout the media course we have used many new skills this has been shown through the 3 media products Music video, Digipack and Webpage.   We have adjusted our webpage from feedback we have been given, we have taken the feedback from our peers and teachers from this we feel like we have completed our webpage and are very happy with the outcome.

First Draft:

Final Draft- click on final draft image to be taken to the webpage

From our first draft to our final draft this is what we have improved:

  • We have changed the colours so they relate to the colours used within the digipack, allowing it to look better to the audiences eye.
  • We have added in links to ticket master for our tour dates page.
  • We made sure there were links to allow you to visit different pages ( on homepage if you click on digipack it takes you to the merchandise page)
  • We have included Social media links which link back to Saint PHNX pages on Facebook ,Twitter, Youtube, Instagram and Spotify.
  • We have added new pages about the artist and the rest of the band allowing you to find out what is going on in their lives this is under the ‘about’ and News sections
  • We have added in background images these are either of our artists or of images taken of the scenery of our shoot.
  • We have created a gallery and added it to the end, this features all of our images and the original ones from digipack before edited
  • I created some more albums using images and making up new names and adding links to merchandise pages.
  • We have made the titles have borders making them stand out more, we did this by adding in a white outline which stood out on the blue.
  • We changed the colour and font of the titles and UK tour dates to make it clearer to read.
  • We made sure everything linked together and that it took you to the relevant page not random

We have made these changes from feedback we have been given, overall this has improved our webpage and I am pleased with the outcomes and differences.

Posted on

Final Draft Webpage

After adjusting our webpage from our first draft we have created our final product, me and Immy are happy with this and believe we have achieved what we set ourselves to complete including all of the features and tabs we wanted to give it a wide variety allowing the viewer to know as much as they know about our band. We have taken into consideration of the teachers feedback and improved a lot of things to make it as good as it can be.

For this draft we have included many more images and added in more sites, we have also added in links so you can view other pages.

(click on image to be taken to the website)


Posted on

Web Page Draft One

Shown below is my first draft of my my webpage. We made a webapge to include our digipack inside of it. This is the product we have produced so far and got feedback from peers and teachers on how we can improve this to get a finalised product.

Click on image to get to the webpage.

I feel like this draft was rather successful, I feel like was an easy site to use making our progress quick and effective. Using other tasks and our preparation towards making a webpage we have included many links to other pages within the site.

Giving our webapge to peers feedback we got back included :


  • The background images are very effective
  • Clear layout
  • News page is clear, short and effective
  • Images on news page are relative and specific to a certain person
  • Store page is simple and the products are clearly shown with good reveals of the other side when hovered over
  • Clear social media links

Improvements :

  • Prices on all products shown on all pages
  • Stadium names on tour dates
  • Purple box on home page isn’t colour relevant
  • ‘Follow and Subscribe’ next to social media links on home page
  • Make the masthead Jordan bigger and better so its the first thing you look at
  • Make music video bigger
  • Make all mastheads on pages bigger or make them stand out more
  • Center the tour dates

Additionally to this we got feedback from our teacher this included:

  • Match the pink from the digi pack and use other colour palettes
  • The site is to promote the digi pack so need more of it featured on the front page and some in the news section about it.
  • More continuity with the font, could use the digipack font on the mastheads
  • Caption some of the images for the photo gallery or add explanation for the images as a short news story by it.
  • Link the albums to some music, or a listen now option
  • Social media links to their real social media sites
  • Make more made up news stories
  • Book now for the tickets – link to ticketmaster
  • About – needs to be higher up on the menu as it introduces Jordan – use the mission statement and embellish it with some more facts and stats about him
Posted on

Web Page Conventions

Using Screencastify we have created a script about the website of Florence and the Machine. We analysed it in far more detail using the correct terminology for a website. We analysed what was interesting and eye catching about it. We also chose Florence and the Machine to analyse as it is a similar genre to ours and we may be able to take some valuable points to how someone of the same genre will display organise their webpage to bring in the audience. When analysing a webpage, we have to think about AIDA; attraction, interest, desire and action so we are able to attract the right audience. We also have to think about the push and pull theory and the “Uses and Gratification” which are; Entertainment, Social Interaction, Personal Identity and Information and to use them throughout the webpage so more of the right audiences visits it.

The display of this website is far different as it is just one continuous page with little links to other pages and no navigation bar. However as you scroll it does make you stop and visit each site.

Here is Florence and the Machine webpage, click on it to get to the page.

click  on image to get to the main link

Posted on

Website Previous Students Work

Here is my previous students work which I have chosen to analyse

We have analysed a previous students work to give us an insight and ideas of how me and Immy can present our website to make it eye catching to the audience. This could allow us to learn the conventions towards the website. I believe this website can be classed under the category of Indie pop/pop, which relates well to our genre and will be the better one for me to analyse. This is due to the pastel like colours, as well as the main image (hero shot) as this has the colours blue as well as the pink inside of it.

The website XX is very accessible and easy to maneuver around as it has a clear navigation bar shown at the top of the page. Also scrolling down below the fold  you have the option of moving onto tour dates as well as media and upcoming shows.

You were able to scroll down to the about section where you are able to find out information about the whole band in general, but not an individual star of the band which this could of benefited from also could of benefited by having more information about the band to allow the audience to create a bigger picture. Next the presentation of this website is effective even though it could do with more. The font used for the masthead ‘XX’ is followed through with the first letter of the headings. This is effective as it keeps it consistent and allows the brand to be followed through without even being placed there. Additionally, in the Discover section there is a lot of branding within the album covers as the use of the X has been continued throughout it all.

The music webpage has an effective use of mise-en-scene creating a young and powerful atmosphere. This is mainly down by the colours and lighting of the page with bold images included. With the use of the long shot for the front of the music video on the front page which has been carefully edited with the use of colours. The cinematography of this genre is shown through the images  using mid shots which creates the audience to take in the emotion which the artist is letting off, however the only non mid shot is the hero shot which is a wide shot of a person. Finally the use of clothing is chosen carefully, there is a majoirty of dark clothing which allows the colour to be bold around an image this portrays a more youth look as this dark emo look is being taken away by the careful editing of the backgrounds.

Furthermore this webpage fulfills Blumler and Katz uses of gratification through the use of the ‘sign up’ at the bottom of the page as it is a contribution of personal identity.