Web Page Draft One and the Final Draft

We have completed our first draft of our website, so far its very conventional, it has tour dates, media, biographies, merchandise and convergent social media links. We also tried to follow the Uses and Gratifications, Entertainment, Information, Personal Identity and Social Interaction in order to create an effective website, this was done by adding the aforementioned conventions. As per conventions, the website general follows the style of the latest album that has been released. Expect to see rocks, black and white and bold fonts. As social media links being part of the navigation bar, there are present on each web page, so the social interaction need is fulfilled on each page. There are some photographs of the first draft of the website right below.

First page, the music video is above the fold while the mission statement is below the fold. We have the music video out on front, its a convention as it allows the audience to quickly release if its in their preferred genre of music. The mission statement would fortify what genre it is.

The “Band” page, which is a biography section. We used a bit of green in our photographs in order to break up the imposed monotony, its a subtle act of rebellion, a convention of indie rock. We made sure that we used language appropriate to genre and the middle aged energetic audience. This page helps to fulfill the information, entertainment and social identity needs, this done by the unique style present.

A typical tour date page is present. It fulfills the information need. Nothing much else to say.

The Media Page which splits of into a “Photos” subsection, which has photographs with some fitting descriptions. The first page has links to Spotify and the music video below the fold. Again, needs such as entertainment, information and personal identity.

Following conventions, we managed to add a merchandise page which we hope would amplify the band’s image as cheeky and questioning society. This done by the fact some of the merchandise, such as “invisible shirts”, don’t really exist. Fans would see this as a joke, and some more keen ones would understand it as a statement about our consumer society, we have a tendency to buy intrinsic worthless objects. Both interpretations would help to create a brand image that the fans can use a part of their personal identity. Other then that, the information aspect is fulfilled.

Looking at our website critically, one major problem is that the font and display is all over the place. Some of the text you can’t read, especially on the merchandise page when you select a product, and the font is not consistent. The layout could be improved, sometimes there’s too much space or too little, and some of the objects need to be reorganised, maybe a picture of the digipak on the front page instead of the video, it’ll present the band much faster. The website is also lacking website features such as animation. We should add some at the very least.

Our teacher had send us some feedback on the first draft.

  • News stories on a news page?
  • Watch the order of the pages in the menu…contact would normally come at the end?
  • More merchandise?
  • Previous albums x 3 that link to music?
  • Introduce the video and DP and include more of the DP art?
  • Rocks might need even more introducing somewhere as random pebble art although I like the introduction of Sediment.
  • Love the green…why not have it in the title of the page high up?
  • Top page thumbnail of the album is squashed.
  • Centre opening page copy as you have done with the band biographies.

Although good suggestions, some of them are unreasonable for the time restraints we have, writing out several stories would take up some time. We can’t add other albums, its the band’s debut after all.

From form our self analysis and feedback, our main targets for improvement are:

  • Move up the digipak the above the fold in the front webpage
  • Improve the merchandise page
  • Reorganise the navigation bar, the contact at the back
  • Include more images for album art.
  • Add some animation
  • Consistent font
  • Reorgnise the display

After implementing the suggested changes, we think we’re ready for the final draft.

The front page, with the digipak is now above the fold, we feel it presents the better overhaul, as it presents their cheeky side, while the music video below the fold will present their serious side. The general font fits now along with the rest of the website. Animation is now present throughout, the digipak swooshes in. This will present the band as energetic.

Not much has changed in the bio page.

There are much more tour dates now available.

The media page now goes to a center media page, which splits into “Music Videos” and “Photos”, this would make it easier to navigate. The font now follows the style of the website, black and bold.

The navigate bar has been reorganized to follow conventions, the contacts page is nearer the back. We also added a media page

The display of the merchandise has changed substantially, we changed the font and changed the colour of the shapes to be in line with the websites style, its now possible to read the font.



Website Previous Students Work

You guessed it, we have to analyse and critique a previous students work in the hopes of the things we need to avoid are going to be nailed into our head. Being a website, different things will be assessed. The things are:

  1. How accessible is the website?
  2. How easy is it to navigate?
  3. What information were you able to find out about the star?
  4. How did the branding of the website communicate a consistent brand image as portrayed in the music video and digipack?
  5. How far does the Website fulfill the audiences’ uses and gratifications (Blumler and Katz):
  • Information
  • Personal Identity
  • Social Interaction
  • Entertainment

For this task,  I decided to do the website below.

  1. How accessible is it?

Searching up “ama lou singer” does not come up with the intended website, only the real artist’s website appeared first. There was no sign of it further on the pages either, which means its not accessible at all.

2. How easy is to navigate?

The navigation bar is placed at the top right, quite conventional. Although its quite small, it scrolls down along with the page, meaning that the customer does not need to scroll up back to the top. This makes navigation swift, however, the navigation bar goes on top of the some of the content obscuring the content and in some cases the navigation bar. As example below, its impossible to see the Tour section of the navigation.

On the side lies a bar with convergent links to social media, which also moves with the scroll of the page. Unlike the navigation bar, it does obstruct the content of the website.

Another quirk is that on the front page, its has link to music video. Instead of teleporting you to another page of the website it just scrolls you down were the music video is present. If the music video is at the bottom of the page, why didn’t just replace the link with the music video? Its very unconventional.

Overall the navigation is fair and conventional, although it sometimes does obstruct the content of the website.

3. What information were you able to find out about the star?

The “Bio” section of the website gave out a paragraph of information about the star, meaning that the rest of the information about the star could only be gained by the look and feel of their work. Thankfully there’s a gallery present with pictures of the star and the dark theme of the website, the wide variety of images tell me that the star is an emotional, self engaged and expressive. A list of tour dates is present as well, a convention that needs to be ticked of the list.

However, aside from that the information is quite lacking, it requires support from other forms of media, in this context, the digipak and the music video need to be seen to have a full picture of the star.

4.  How did the branding of the website communicate a consistent brand image as portrayed in the music video and digipack?

Overall its quite consistent. The music video has gritty, dark and realistic imagery (such as waves crashing rocks, smoking in right of the camera) which contrasts against the bright and sometimes abstract imagery present (such as the time when the star stares at the screen) while idyllic, young star dawdles around the coastal landscape. Occasionally, we are presented with a shot of the star in a room staring into a giant screen with random imagery, from small random screens being whizzed past to a shot of a middle eastern city. In mine interpretation, the star is stuck in a dull and grey world while she yearns for something more idealistic.

Whatever the interpretation, the imagery of the music video is present in the website. After all the hero shot of the website is dark with the star standing in some unrecognisable abstract location. In the gallery, there’s more examples of this. There are multiple medium – close up shots of the star either in bright clothing being idyllic in some cosy, artistic location or in an alleyway with a cigarette. The overall colour palette of the website is also consistent, mostly dark, grey, with the colour red occasionally piercing through the dark.

The website also changes the colour of the convergent links into grey, which is a nice touch in keeping a current theme.

In terms of the digipak, its also very similar.

Dark, grey and red are present, with the star being idyllic in both shots. There’s a one thing missing however, the bright and abstract locations. Compare the above with these images from the website.

All the digipak has is the coast and some ominous clouds straight that look like an intro from some dark fantasy movie.

Aside from that, the digipak and the website are faithful to each other.

5.How far does the Website fulfill the audiences’ uses and gratifications (Blumler and Katz):

  • Information
  • Personal Identity
  • Social Interaction
  • Entertainment

In terms of information, as I mentioned before its lacking, with a paragraph and a few images, the audience is pushed to use the convergent links on the social media sites in order to get the information. This could be intended, in the hopes of the audience going over the social media sites and get in touch, hopefully resulting in a loyal customer. As business student can tell you, loyal customers bring in free advertising and will buy all the latest releases. The more, the better.

Its easy to see an attached Personal Identity to the website brand. There’s consistent theme of dark, something, which is pierced by the random intervals of colour and energy

Social interaction is quite possible on this website, with the convergent links to social media being present and direct contact available, that aspect is fulfilled.

In terms of entertainment, its easy to acquire some form of entertainment. A music video is present along with a gallery for all the fans to see, however not much is present. There will be probably in some disappointment in learning that the music section of the website is a page with links to other convergent media sites were the music is hosted. Its waste, going to a new part of the website only to learn its totally redundant, even the image used is present in the gallery. There’s also no merchandise shown either. Fans like that sort of stuff, having none might make some fans disappointed. There’s no interactive widgets to play around with either, leaving the website a bit dull. Barring that, the entertainment part of it is fulfilled, although only inaptly.

Although the themes are consistent and generally easy to navigate, its a dull website. Watching one music video and a small gallery can only hold a visitor’s attention for such a small amount of time. Some parts of the Uses and Gratification aren’t completely fulfilled, such as the entertainment and information, while social interaction and personal identity.

From this task, its clear to see that this piece of coursework is not going to rely solely on “eye candy” factor. There has to be some technical aspects as well, programming an interactive website is going to be tested on this coursework as well.


Web Page Conventions

To further cement our understanding of music websites, we have been tasked to group analyse a website and its conventions. Me and Matthieu have analysed Green Day’s website, as all the inide rock band we know of were quite bland and not much to analyse. Below is our screencastify, and further below is our script in case you prefer to read text instead.


Skip to toolbar