Wednesday, 20 November 2013

Ancilary Task - WebPage

Here is the link for my website, http://www.swfcabin.com/open/1398249390 The video may take a few seconds to load.  


I am creating my webpage in Adobe Flash Player, I have used a stage size of 960x570 px as when I researched the conventions of a webpage, this was the standard size of a webpage. I have chosen to used a scrunched up sheet of white A4 paper, to create a quite authentic look. I took this picture on my mobile phone (Samsung Galaxy S3.) As you can see, I have created several layers to place my features on, this makes it easier to set out, and allows images to be ontop of the background. It also makes it easier when adjusting parts of my page, allowing me to hide and reveal different features.
 Here I have added my banner/website logo. I have followed the conventions of a website, by using a sans serif font, so that it easy to read with no 'flicky' bits. I have also edited a photo of my artist from a previous photo shoot, which I have cropped and edited in Adobe Photoshop, I have chosen this image, as it looks like she is resting on the top of the website, I also think that the picture is very warm and welcoming, and will be a good feature of the website. My logo, is in a quite playful font, which I think will add to the warmness of the website, I have also done this so my artist appeals to the younger generation, as they are more of my target audience. I will add a box around this to make it more sectioned, and add structure to my webpage.

Here I have made a plan where different sections of my webpage will be. I have followed the 'Z' rule, where the audience will start in the top left hand corner (where I have placed my logo) and finish in the bottom right hand corner, therefore seeing all aspects of the website. I have also followed conventions of a website, by adding a 'contact us, cookies & policies' bar at the bottom of the screen, as they are a legal requirement. I want to make my website as authentic as possible. I have added a box where I will place my finished music video, and also another box which will display the album cover for my artist, which I will also be completing for my second ancilary task. I have also decided to add a 'fan pic of the week' making the audience more involved in the website, using a personal approach. I have also added a box for 'news' about my artist, which I will be inserting. The navigation bar will consist of pages that my target audience would like to see, I will decide on these after sending out a questionairre.




Here I have added links to several media platforms, that are real working buttons, some with animations, and when clicked they will connect to the actual website. I have used real social networks, however designing the buttons myself, so there is no plagerism involved in this. I have chosen these social netowrking sites, as they are the most popular ones at this date in time, and also is to attract a younger audience.I have also inserted a header for a section of my website, where there will be my album, I have added the name of the song, and also a button which says 'buy now' and when the mouse rolls over the button, the writing goes from white to black. The album cover will be inserted once it has been designed. Below is a screen shot of what the button looks like when the mouse has rolled over it.
















Here is a screen shot of my navigation bar, with the most popular options from the questionairre (which I will put in a seperate post)


Below you can see that I have added my video, although this is not a compelted one, I wanted to have a completed look of how my website would look, and also make sure that my video was compatible with the software, which it was. Once i've completed my music video, I will be inserting that one onto my webpage.


This is printscreen shows the different layers I used on my homepage, it also shows my library at the side, which I imported images in, in order to post them on my webpage, without them looking pixilated.



 
This is my finished homepage, the video is not the finished video, however, I have added it in order to get an authentic look on how the completed webpage will look. Although my video, and my album are to be in black and white, I dont think this is appropriate for the website, as this is a space for fans to enjoy themselves, and get to know the artist, therefore she should be portrayed as the bright and colourful person that she is.


Here is a print screen from one of my artists pages that are features on the navigation bar, I have created 2 pages with working links, to show both links work, and navigate to the correct page, following the conventions of a website, the 'Jessika Official' links back to the homepage, as this is coherent on most webpages. I have used the background of a pin board, as this is what many people display pictures on in their homes, so this connotes that the audience will feel welcome on my webpage. 








Here is the link for my website, http://www.swfcabin.com/open/1398249390 The video may take a few seconds to load. 


Wednesday, 13 November 2013

Review of Miley Cyrus Website


This is the official homepage of child star and singer Miley Cyrus. The website is quite crammed with pictures and animations, and it is hard to navigate as you are so overwhelmed with information. I do like the idea of pictures of the artist over a home page, however, I think that this one looks messy. Also, they have an animation of a 'joint' which when clicked on, leads to a whole screen of cartoon marijuana leaves, so this website is obviously not child friendly. The website doesn't follow the convention of left to right either, the logo and navigation bare are towards the middle of the screen. Overall, the layout of the website is fairly simple and looks messy.

Review of Lily Allen Website.


This is the homepage for singer/songwriter Lily Allen. As you can see, it is a basic white background with bold black text with her name. The whole focus of the website seems to be on media platforms, such as Facebook, Twitter, Youtube, Tumblr, Instagram, Google +, Sound Cloud, iTunes and Spotify, these social networking sites are displayed through pictures, there are no text to portray what they are, so it must be assumed that the people viewing this website, will be familiar with these websites. There has been a text box inserted for people to write in, however, it has no link to another page and is not a search bar, so I am unaware as to why that is there. There are no pictures of the artist, so it is not a distinctive web page. The whole idea of this website, is to get people to follow and listen to the artists music, there are no links to a gallery, no previous tour pictures and no contact information.

The website is in a basic sans serif font, like most websites, so it is easy to read, the text is bold and big so is stands out. However, the whole colour scheme and lack of graphics really makes the website dull and dissappointing.

Codes and Conventions of a Website.

1. The logo should be at the top left hand side of the page. This would be the artist logo in this case, it is also sometimes referred to as site ID, it should be placed in the top left corner of the site. This is the first place the audience will look to identify what site they are on. People normally use the 'Z' rule, where they read from left to right. 

2. The logo should link back to the homepage. The point is very important on information heavy websites or if the link to the homepage is not clear and easily visible. By clicking on the logo, visitors should expect to go back to your website home page.

3. Links are underlined and in a different colour than the text. Do not rely on colour to differentiate links from 'normal' text because around 10% of the population suffers from colour blindness. Links are usually underlined and blue, but it is a common practice to match the colour to the branding of the site.
- Do not use underlined text for non-links as visitors expect all underlined text to be a link.
- Headings are sometimes underlined, but the line is usually not continuous or in a different colour.
- Many main navigation links arent underlined because they possess other features that make them easily recognisable.

4. The navigation stands out and is consistent throughout the site. Consistent navigation means that is is always at the same place, preferably above the fold, at the top or on the side. It behaves the same way throughout the website and can easily be identified. The page/section the visitor browses is usually differentiated from the others to let them know what they are.

5. If something looks like a button, it should act like on. Form buttons should submit or clear the form, navigation buttons should take your visitors to a new page.