LO5: Evaluation

Reflecting on the feedback from the user tests I initially found that there was a problem with playing the video on certain browsers. I discovered that this error was not due to the website or the code but that the video's large file size made playback difficult. I rectified this by simply embedding the video  from YouTube rather than the file itself.

Besides that, there were no other immediate problems with the website. All the links and buttons worked in the way they were supposed to and the users seemed to find the navigation features simple to use.

The band's logo is an important part of their identity and brand so it was suggested to me that it should be used more around the website to reinforce the band's house style. As the logo has it's own font, one user remarked that the heading alongside the logo made it look quite clumsy. Because of this I changed the logo, with the client's permission, so that it did not feature the typeface as well. This means that the website now has a separate logo and heading and looks much cleaner.

Despite the fact that a search bar featured in my wireframes, I decided that the website did not in fact actually need one. It is simple to navigate your way around and as users are navigating around the website, the brand, music and merchandise of the client is constantly reinforced; which from a commercial aspect is very important.

LO3: Website

This is the full website in images, this can be viewed live here: http://sullivanellisutcsh.wixsite.com/broken-district-1

This screenshot is from the band's Reverbnation channel, which is linked at the bottom of the website

LO4: User testing

Navigation

It is important that the navigation in a website is very easy to use as this makes it more accessible to its audience. So when testing the reliability of the navigation in my website, I told users to try and reach a particular page. This way I was able to discover how simple the navigation was to use as well as being able to make sure that everything worked the way it was supposed to.

Internal and External Hyperlinks

In my test plan I made sure that the users tested all available links. This included links to other pages on the same website (internal hyperlinks) to ensure that they both worked and went to the correct page, as well as links to external sites such as YouTube and Reverbnation.

Page Load Times

Whilst I did not create a single-page website, I did decide to go a similar route and put a heavy amount of information on the homepage. As this included a lot images and some video I was highly conscious that the loading time may be too long. Long loading times can cause users to become uninterested and leave the website or make a device lose the connection to the website all together so it was important that this did not happen. Because of this, my user tests were done on multiple operating systems and web browsers.

Performance of Website when using different browsers

By making the users test a variety of browsers I am able to test the performance of the website as well as making sure that things such as fonts and particular images work across a variety of browsers, I would also have been able to look for any similarities across the browsers.

Consistency of House Style

As a band, the client's identity is an important part of their brand. Because of this I made sure to use the same colour palette and fonts across every page on the website. If there were any inconsistencies then users were given the chance to mark that down in the tests.

LO2: Website Features

Rotating Carousel

On my website I shall use this feature to showcase different images of the band through a caurosel effect, similar to the one used on the Slipknot website

Tutorial: https://www.youtube.com/watch?v=R0nkkXkrby0 

Quick View Pop up

My website will use the pop up feature so that the viewer can see the product without having to go to an external page, in a similar way to the Five Finger Death Punch website.

Tutorial : https://codyhouse.co/gem/css-product-quick-view/

Fixed Background Image

This feature allows the user to scroll whilst an image stays in one place. This is used on the Issues official website. 
Tutorial: https://www.youtube.com/watch?v=PWoOpJtkyjI

One Page Website

A one-page website gives you all of the information, in one page. This is commonly used for websites promoting a film, but it is also used by the band Periphery for their website. This is not a feature I will likely use.
Tutorial: http://www.webdesignerdepot.com/2014/12/how-to-design-the-perfect-single-page-website/

LO2: Information Flow

LO2: Gantt Chart

LO2: Wireframes

Wireframes are early designs of my website to help me plan out what the final design should look like.

LO2: Legal and Ethical

Copyright

Copyright is a legal right given to any creator of an original work. As any and all images, videos and audio files used in this product have been created by me and/or are owned by the client no copyright permissions need to be sought out.

W3C

The World Wide Web Consortium , or W3C, are an community that create the standards that should be met to ensure the World Wide Web's long-term growth. Their standards tell me what is allowed on my website. By adhering to their rules and regulations I will know that my use of code and audio in my website does not break any laws.

LO2: Learning HTML and CSS

To learn to use code a website I used the Codeacademy. Using HTML I learned to shape the layout of the web-page, as well as how to do smaller things such as alter images and text. With CSS I was able to edit specific areas of the website.

What I have learned will help me when I have to design and develop my own website. This includes developing the layout of the website and using hex codes when creating the house style for my website.

Here I am learning to create headings using HTML, this helps to make certain bits of text stand out on the webpage as clear headings.

LO2: Information

HTML5

HTML (HyperText Markup Language) is a markup language used for structure and create web pages. Web browsers read HTML files and convert them in to visible and audible web pages.

HTTP

HTTP, or HyperText Transfer Protocol, is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation for data on the internet. 

Source code

Source Code is the framework of computer code that enables a web page to function.

This is the source-code for the BBC News website, different tags are used to separate the code and information for the website.

LO2: Moodboard

LO2: Mindmap