The website provides users with easy navigation and digestible content by providing them with simple and effective design layouts, colours and text. Its consist of 4 links and a Sign Up button. Each link navigates the user to a different page; either a video, gallery or audio page. On each of these pages ‘The Monkees’ home page link is always available so users can easily find their way back. Each link clicked on refreshes/opens a new page so that the user ‘stays with us’, and each page contains the same styles, layout and background to ensure the pages are easily digestible and recognisable throughout the user’s journey. The button drops a modal which allows a user to enter their details to sign up to a mailing list which too is always available wherever the user is on the site.

At the bottom of the page are 3 social links which navigate the user to either the Facebook, Twitter or YouTube home pages. These social links open a new window for the user. The audio and video pages provide the user with the ability to play the band’s music from the site itself. The website contains minimal text and ensures that only what is displayed is necessary for the user. This is to ensure that the pages do not become overcrowded and makes the user’s journey simple, easy and user friendly.

• I am looking for a band that gives the option to book them for an evening for my Christmas party. I have lots to book in so I need the process to be simple. – The first page of the website provides every user with this option. Immediately we see a subheading that reads ‘book us for you wedding and Christmas parties’ and a form below followed by a Submit button. The form allows each user to enter their contact details and date of the event. The structural layout and design of this makes it very simple and intuitive for any user to make use of (front end only, no back end functions added for this as is not required for this project).

• I’ve heard of The Monkees before but have never researched them. I don’t want to spend a long time looking them up, I just want to get a feel for the band and an understanding of their music and build some kind of recognition. – The website provides a large title that reads ‘The Monkees’ as an introduction to the site as well as a background image of the band on each page. The website provides links to the user to be able to listen to 3 of their most popular songs, a music video and 9 photos of the band members together. There is also a Sign Up button which indicates the user can receive information and updates about the band on a regular basis. This provides the user with enough information about the band itself.

• I want a website that has links that can access The Monkees’ social media so I don’t have to do all the research. – At the very bottom of each page of the website there are 3 social links; Facebook, Twitter and YouTube. These are there to provide users with the ability to look them up on social media, all from one source.

• I’ve never listened to The Monkees before and I don’t know any names of any of their songs. I want a site that can provide me a sample. – On the Audio page of the website the user is directed to a page which allows them to listen to 3 of the bands’ most popular songs; each titled with the name of the song. The user does not have to navigate away from the site to be able to listen to the music, they can do so directly off of the site making it easy to use.

The concept behind the project was to capture the attention of the target audience by making the site aesthetically appealing and user friendly. To help achieve this, I used tools such as Bootstrap and Font Awesome. I kept the text on the pages of the website to a minimum whilst providing and keeping very appealing aesthetics to each page.

The text provided highlights the main points and grabs the user's attention through bold, centred text that contrasts and stands out from the background image with added hover affects to create 'life' to the pages. In order to ensure that each page displays the same signs of user friendly activity, I ensured that each one is displayed with the exact same colours, effects and images to make the website simpler to understand and to develop familiarity across the project. Furthermore to making the website as user friendly as possible it needed to be responsive to ensure that the content can be viewed and used across multiple devices.

The website is used for audiences and fans to be able to effectively and efficiently book the band for their wedding and Christmas parties by filling in a simple booking form. There is the option to sign up for any new material as it becomes available through the Sign Up option in the navigation bar.

To be able to ensure I was certain that my outcome reached this level I brainstormed my ideas (images for these mockups can be found in a directory within the project code - the mockup for Videos displays only x1 video, during development I decided 1 was not enough and added 3.

Displays a large, dimmed background image of the band. In the heading there are four links ‘Sign up’, ‘Videos’, ‘Gallery’ and ‘Audio’. Just below this is a large title of the band that acts as link for this page. The rest of the body of the page consists of a form and within the footer, the links to social media.

This button drops a modal which allows the user to enter their contact details in order to sign up to a newsletter containing information about live updates on the band.

This page contains everything within in the Home page, the only difference is that the form is removed and in its place is an official music video to Daydream Believer.

As with the Videos page, the Gallery page contains the same contents as the Home page. However the form is removed and a selection of 9 different images of the band take its place. Each image enlarges when hovered over.

Same as the above, the Audio page is very similar to the Home, Videos and Gallery page. The difference here is that instead of a form, video, or gallery the audio page displays 3 songs side by side with an image of the single above. The song can be played right off of the page.

• Booking form – This feature allows users to enter their contact details to book the band once submitting the form.

• Sign Up Modal – This allows users to enter their contact details to keep up to date with the band’s whereabouts, new features and upcoming music.

• Social links – These navigate the user to the social platforms that the band exist on by clicking on either the Facebook, Twitter or YouTube icons and navigate them to the corresponding web page.

• The Monkees title – This link follows the user wherever they are on the site and always directs them back to the home page when clicked on.

• Music video – This allows the user to watch the official music video to Daydream Believer when pressing play.

• Audio – These 3 audio plays allow users to listen to music from the band straight off of the website when the play button is clicked. Users can also download the song(s) when clicking on the dotted icon in the menu.

• Another feature idea is that the page could contain a link within the header that directs the user to an online shopping area that allows them to browse and shop for branded merchandise of the band. Items such a t-shirts and CDs, or digital downloads would exist here.

• HTML o The project makes use of HTML to structure the pages’ main contents.

• CSS o The CSS language allows styling of every page to create the aesthetics of the project.

• Bootstrap (V4.0.0) o http://getbootstrap.com/ Bootstrap was used in order to manipulate the responsive design aspect of the project. Bootstrap was also used to create the modal as well as any buttons on the website such as the Submit form details button on the Home page (CSS was then used to overwrite any of the stylings to fit my own needs).

• Font Awesome o https://fontawesome.com/ Font Awesome was used to create the Facebook, Twitter and YouTube icons for the social links at the bottom of each page.

• Google Fonts o https://fonts.google.com/ Google fonts was used to style the font for the modal, links and subtitle

The testing side of the project focused on the links functioning as expected whilst maintaining the styling on each page, responsive design, playback of audio and video as well as the modal.

The booking form on the home page and sign up modal do not submit – this is project is based purely on frontend, no backend code was required.

To test the links, I copy and pasted the code from the home page onto every other page. From here, I clicked on each available link on every page it was available on to ensure that the outcome was expected. Once confirmed I moved on to testing out the modal to ensure it dropped down and covered the page as expected. From here, I tested out the video and audio playbacks by ensuring that the play button was working and that volume could be changed. I clicked on each social link to ensure that it took me to the corresponding social media home page.

On the responsive side of the project, I used the developer tools to change the screen size to ensure that the page would be user friendly on small to large devices; starting from the smallest screen size. I checked to ensure that the text and images we readable and the content on each page was acceptable; that nothing was overhanging and that there was a clear separation between each feature.

When testing the project on different screen sizes, I noticed that the images in the Gallery section were not lining up properly and did not provide a great sense of symmetry. In order to achieve this I used the developer tools to look into the code and find out where the containers for the images needed to be in order to make them respond well. Once I found the solution to the problem I copied the code into the workspace.

Throughout the project, I committed each ‘large’ section of work to Git. Any section of the project that I felt I had worked hard on or struggled was committed right away to ensure I did not lose the code. At most stages I had push the code to GitHub so I could see how the files were displaying themselves to anyone who may wish to clone/download or look into the code. The site is hosted on to GitHub. The project can be cloned using the clone option/link.

The background image and gallery images of the project was found on Google images, saved and copied into the project with some edits put in place. https://www.google.co.uk/search?q=the+monkees&source=lnms&tbm=isch&sa=X&ved=0ahUKEwi-_f3PtvTdAhXLK8AKHbiQAjwQ_AUIDygC&biw=1280&bih=703 The videos were taken from YouTube: https://www.youtube.com/watch?v=xvqeSJlgaNk https://www.youtube.com/watch?v=WQ6LmrP3vK8 https://www.youtube.com/watch?v=sUzs5dlLrm0 The audio was taken from here: https://github.com/Code-Institute-Org/project-assets/tree/master/stream-1/band-assets/audio

I received inspiration and influence for this project from genuine existing band sites found on the web such as Walking on Cars, 30 Seconds to Mars and Greenday. I looked into the layout and styles of each of these sites, made a note of what aspects were most common, effective and the ones I liked the most, and developed my own project based on some of these aspects. In particular the aspects I made note of are the use of a large title, a clear, faded background image of the band, a sign up form, links at the top of the page, social links within the footer, having all content centred/in the middle of the page, the use of imagery and lack of text.