Sunday, 3 January 2016

OUGD504 Further Development of Web Pages (Studio Brief Four)

I have created some rules to follow that have come about when I designed the first page of the website, these are as follows:

  • Smallest type size: 36px
  • Biggest type size: 60px
  • All links will turn red when hovered over. This makes the user experience more interactive, and also helps with the navigation, as links will be easier to find.
  • Most content will be central - such as the navigation, contact etc.

With these rules in mind, I began designing. This is the homepage for the artists website that I decided to take forward further and develop other pages for. The purpose of the website is to give the band some exposure and a place for the fans to visit/find out more information about the band in one place, as the band doesn't currently have a website and only really has a Twitter account and Facebook page. The page will also be useful for people that are already fans of the band to share the page with their friends, thus getting more exposure. I want to keep the design simple through-out, as I find from previous experiences that these are websites that are easy to navigate.

This is what the links at the bottom will look like when hovered over.

To give more fans the opportunity to connect and feel exclusive to the band, I added a 'secret' button. This button, once clicked, will give the user an exclusive code to discount in the merch store, that only someone who was on the website for quite a while would notice.


This is the navigation page that I came up with. It's very simple and follows the rule that links must be red when hovered over and everything is in the centre of the page. This is effective as it leaves a lot of negative space, so the website doesn't look too crowded and it's pleasing to look at.


I struggled thinking of a way of layout out the about page for quite a while, as there isn't too much to write about the band, I just knew that I wanted the about page to be about the members specifically, not about the band (as two of the members are both solo artists and also members in other bands) To do this, I decided I would take screen grabs from the Cry Baby Cry music video 'Go Go' and Photoshop them together. I think the about page looks really slick and the use of distance within the final image works effectively. 

When each member of the band is hovered over, their face will change from black and white to red, and a link will pop up with that members Twitter username / Facebook fan page etc. This is shown below. The links will then become clickable and open up a new window or tab which will go straight to that Twitter account / Facebook account etc. 


Below is how the tour dates page would look. It's very slick and legible, as it clearly shows the date, location and how to purchase a ticket to the event. Once 'Buy Now' is clicked, it would open up another tab or window to the website to purchase a ticket, for example Ticket Master. This page is successful as it is easy to access.


This is the merchandise page that I have designed. It uses a three column grid, which will be useful when I create the website to be used on a tablet and also a mobile phone. I struggled with the links on this page, as it was hard to make the red overlay not look tacky, and also finding the right place to put the text over it - I think this is probably because the image below the overlay has type on it and a very geometrical shape. 

Once the link is clicked, it will take you to a page similar to the page below, where you can read about the item you would like to purchase and add the item to your basket. I considered including links similar to the ASOS website, such as a 'recently viewed' list of items below the item in question, however I thought this could be distracting to the user and they may not go through with the sale. I think this page is very successful because I kept it to just the one item instead of using the page to try to advertise more items.


The music page was a very simple page to create. I wanted to keep it very minimal and so I just added both of the album artworks of the band, which once hovered over, would link straight to the bands Soundcloud account. I considered linking them to Spotify, however not everyone has a spotify account, and you don't need an account to listen to a band on Soundcloud. I thought this would also be a good way of users sharing the music with their friends, as it's easier sharing a link than trying to share a song on Spotify.


The video page would consist of links from Youtube of the band. This could even be a way of fans sharing their videos of concerts - for example, they could use the tag 'CryBabyCryVid' and it would instantly be accessible both on Youtube and on the CryBabyCry website. This would get more people visiting the website and also discovering the band, as people would get excited and share on social media that their video is on the website, not just on Youtube. 

Once the link to the video is clicked, it will open up the video full screen, similar to Youtube. I think the concept for this page is really strong as it would definitely get more and more people viewing the website, and also looking into the band and listening to their music.


The contact page was also kept very minimal and there is a big focus on negative space to draw attention to the email addresses. This page would only really be visited by people wanting to contact the bands manager or agent, it wouldn't necessarily be used by fans.

I think my website is very successful as each page is consistent with the next, and the website is also consistent with the bands current aesthetic. Before I create the tablet design and mobile design, however, I am going to get some feedback as I don't want to waste time if people disagree with my own opinions. 

No comments:

Post a Comment