megananne / thewho Goto Github PK

#The Who

######This project was to create a front-end website for a band in the 1960s. I have choosen to recreate The Who's website. I wanted to make the website look as modern as possible so i decided to use some bright colour through out the website. I have created several pages that show a lot of content about The Who. Initially i was not going to create a merchandise page but half way through creating this project i felt like it was ideal for the website. I have used similar colours to the bands original colour scheme. However i have used quite a calm background throughout so the content stands out. I have a few pages you can navigate through using the nav bar, that includes of th home, about, gallery, merchandise and tickets pages. I have also used bootstrap social icon buttons on my nav bar to link to their offical sites. I wanted to focus on the theme on the website and implement lots of images and videos to influence my audience. It took me a long time to get the website responsive and for the content to be placed in the right position on the page. I have tried to add as many different features that can show off the code and the website itself.

#UX

######For this project i wanted to cater for both young and older adults. The website needed to be simple so everyone could navigate around it but also interesting so the audience carries on looking through the site. I started working on the home page first to get the overal theme of the website created. I knew i wanted a big image covering the top part of the home page which i decided to use again in the abouts page. Initially a bands website is for users to 'check out tour dates', 'keep up-to-date with the latest music', 'buy band merchandise', 'read about a band member', 'watch videos of their favorite band' and lots more, so i wanted to make sure i had enough content for everyone. I decided i needed links to relevent websites to keep in with social media, so i made it easy to find with a direct link on the nav bar and social wall. I think i have managed to create a website that will be helpful to most users and allow them to perform an action to achieve a goal.

#Features

######For my homepage i decided to add a row of album covers to show the audience the bands history. I have used a carousel to show off the social media sites. I have used Youtube videos to allow the user to interact and watch things. I decided to use a fixed nav bar throughout the website so it is simple and you can navigate around easily. I used a marquee under the top image on the home page to advertise to the audience that the band now perform at special occasions. For my dates page i decided to use a table to show all the tour dates, this way eveyrthing is order and easy to understand. I have used buttons such as 'buy' and linked them directly to the selling site so it is easy for users to navigate from my site to others. I have also used effects on my buttons such as the hover effect on the nav bar to give the website a bit of extra features. Throughout the site there is several images and videos of the band that have been used from the internet.

#Technologies Used

*JQuery - I have used jQuery to simplify DOM manipulation *Bootsrap - I have used bootsrap for icons and effects *Font Awesome - I have used font awesome to add some different font onto my website. *Cloud Nine - To create the project. Testing

#Conducted Tests

#Initial Tests

*does the website show images and music of the band? *does the website show the band are performing at special occasions? *does the website display any up-coming events? *does the website have links to social media sites? *is this site responsive?

#Nav Bar *click each button, does it take you to the correct place? *When button is pressed does hover work? *does the nav bar stay the same throughout each page?

#About Page *Can you read all the content? *Is all the content in the right place? *Are the images showing? *Is the page responsive? *Does the page show all appropriate content?

#Home Page *when navigating around the home page, does each feature work? *When you click on 'read more' does it take you to the charity page on the official website? *when you load the home page does the marquee work? *does the 'All music' button link to the videos page? *when the video is pressed to play does the video play? *When you press the controls for the social wall, does the next image load? *Does the page show all appropriate content?

#Merchandise Page *When clicked on 'buy' button, does it take you to the merchandise page on the official website? *When video is pressed to be played, does the video play? *Is the page responsive? *Does the page show all appropriate content?

#Tickets Page *when the 'buy' button is pressed, does it take you to the 'ticket master' official website? *Does the page show all appropriate content?

#Videos Page *Do the videos load and play when clicked on? *Does the page show all appropriate content? *Is the page responsive?

#Footer *Does the footer stay the same throughout each page?

#Deployment

#Content

*Most of the text in the website is used from The Who's official site.

#Media

*All images are from Google or The Who's official website. All videos are from Youtube.

#Acknowledgements

I have recieved help from Niel, Mohammed and Jim on this product. I was inspired by their official website to keep it modern.