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

Creative Critical Reflection 1

 ‘How do your products use or challenge conventions and how do they represent social groups or issues?’

Below is my CCR1 where I have evaluated the question ‘How do your products use or challenge conventions and how do they represent social groups or issues?’  I have created this through google slides to illustrate the conventions of music video, digipack and webpage and show how they are all individually important and how they all coincide together.

Posted on

Creative Critical Reflection 2

‘How do the elements of your production work together to create a sense of branding’.


Below is CCCR 2 where I have analysed how we created the sense of branding within out 3 media products; music magazine, digi pack and music video. We created a sense of branding through our clear consistent colour scheme which flowed effectively through all of their products making them all easily identifiable.

Posted on

Creative Critical Reflection 3

‘ How does your products engage with the audience and how they be distributed as real media products’.

Below is our CCR 3 where we have done it in a vlog format attempting to convince Sir Allen that our products were a good quality for him to invest in us. We used this to analyse the question ‘ How does your products engage with the audience and how they be distributed as real media products’.

Posted on

Creative Critical Reflection 4

‘How did you integrate technologies- software, hardware and Online- in this product?’

Below is my CCR 4 which is a reflection task of all the work which I have completed we also used it as a task to identify the Software, Online and Hardware programmes I identified this through a key displayed at the top of my Piktochart. Throughout the Pictochart I was able to analyse the work done in the research and planning, production and post production of all three of the products music video, Digipack, and webpage. I was able to display it as a timeline and the dates of which I began to do this to when I completed the Media coursework in November 2018. The piktochart gave me the opportunity to analyse each element of the porcess to get to my final product.

Click here to see the PiktoChart 


Posted on

Evaluation of Web Design Application

Doing this task of creating a web page I have learnt a lot of skills and media terminology such as, the importance of above the fold and below the fold, a landing page which is where a link would take you to and the meaning a hero shot gives to an audience to gain their attention.

I can now use the correct terminology for areas I’ve been trying to explain in the past, for example, the menu choices at the top of the page with options to get to other pages is called a navigation bar, the terminology I now know make it quicker and easier to analyse work and know that people would understand what I am talking about.

With never using I had a lot to learn making my website most successful it could be. Wix was not very complicated however if I got stuck on any aspects I would go onto YouTube for help.

Below I have added numerous different pages within my website, these would be the landing pages when an option was clicked from the navigation bar.

Next, I was able to add different elements such as ‘buttons’ this would take you to a different option when clicked on. I used this numerous times within the website as it was an element which the audience would find interesting to look for more. There were also options to create ‘strips’. I used this on the news page as I was able to get information on the page without making it big and long. Also I used the ‘interactive’ button as I was able to include sub slideshows within the page to give more information without having to scroll down to get to the information.

Additionally, I was able to add these 2 pop ups, which came up once clicked on the pages and reached the landing page, It was extra information that the audience had to read or see. We may include more of these such as the digipak as this advertises people to buy the digipack and they have to look at it with no choice.

I was able to add in the digipack and music video made on photoshop and premier pro into my website as people would’ve like to see them.

This website task has been very enjoyable and allowed us to be creative with making the projects as well as designing our merchandise, also I feel like my first draft has gone successfully and is beginning to look like a professional music website which I am personally pleased about.


Additionally I used specific techniques to represent the Indie Pop genre, I did this to convey the band image. I did this through the use of colour, we used pastel like colours as this followed our Indie Pop genre, also we have used this colours throughout the media product as they were used on the digipack as well as music video. These colours flowing throughout all the pieces were effective as they allowed the audience follow and relate them all together. We also represented our band in our webpage through the use of fonts, the fonts followed through from the digipack, we attempted to keep all of our fonts similar as they would flow through and be minimal change as this was consecutive and effective. Finally we did it through our images, the images throughout all of our work flowed and were used together. In the webpage we featured many images of our star as he was a clear and eye catching element relating them all together. We also featured a lot of images from the music video in our webpage, also we used the colour of the hexagons throughout our webpage. This impacted on our band as it related them all together effectively and you could distinctively identify them.

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.