Stream 1 -

User Centric Front End Development Milestone Project | The Monkees The Monkees are a 1960 rockband with vast performing experience, and their website should demonstrate that similar experience. What I have created in this project is a functional, easy to use website with all the necessary contents for most of the information new or existing fans would like to know. Information about the band members through their wiki pages, to music and video,a get in touch form for any event a fun might have in mind,this is truly one-stop-shop website the Monkees.

The website uses a mobile-first approach to ensure it is easily accessible on any device, whilst a smart piece of JavaScript ensures that it will always respond appropriately, regardless of input.

UX

Scope Reading through the brief for this project, I devised the following requirements and features as follows:

Necessary Content/Functionality The site must contain video from the band's back catalog and; The site must contain the ability to add/display new material as it becomes available and; The site must contain a callout highlighting the band's ability to perform private events. Important Content/Functionality

The band has provided pictures,audio and video files, so these must be present on the site in an easily accessible location and; Along with a callout regarding private events, there should be the ability to book said events and; The band wants to add links to their social media, so there must be icons to represent this; The band declare the site should be for new and existing fans, and have provided images of the members of the band, so info about them should be easily available. With the above requirements, there are two main groups of people who will use this site:

Existing fans who have listened to and supported the band over an extended period of time and People who have not heard of The Monkees before, or who have just been introduced to them.

As a new/existing fan, I want to be able to listen to The Monkees' music. As a new fan, I want to be able to find out more about the band and its members. As a new/existing fan, I want to be able to contact The Monkees, and book them for private functions.

Structure

No wireframes or mockups were created during the design process,as I would have ended up with about 60 different designs and me not liking any of design.I settled on a single-page website being the best choice. There is media content in the website as well, also using JavaScripts smooth-scroll loading it made sense and easy to put the whole website on one page, so you only need to load the website once,this ensures that the user does not have wait longer to access the page of all contents,also with JavaScript smooth-scroll once they click on the page they looking for, is quickly takes you there without experiencing any delay, which would detract from the user experience.I set up the page sections as follows:

Home - the landing page for the website. Contains a picture of the band in their prime days.

About us - This section introduces users to the band members by displaying a picture, their name, a little background info and the instrument they mainly play.

Events - The band is advertising their ability to perform at private functions.

Contact Us - Here I added a booking form to be able to do that, as well as getting in touch with the band.

Song List - this section contains a video from youtube provided by the band, along with a list of their Top 10 hits songs.

Features

Existing Features

Navbar at top of screen. The navbar is not in a fixed position, since the links scroll to the existing page as opposed to opening new ones. It has the functionality to become a dropdown on smaller screen sizes.

Smooth scroll JavaScript Added to allow smooth scrolling on links to section of the page across all browsers.

Meet the Band This section introduces users to the band members to more about the band as a group, their name.

Our Music

This section uses iframe tags for a video from youtube as the band requested I put on their site. Along with a list of Top 10 Songs.

Booking section There are a forms in this section as not everyone will be looking to book The Monkees for a wedding, christmas party or festival etc, also you are able to get in touch with the band if you wish to do so.

Fontawesome icons

The use of fontawesome icons was made to add a positive user experience by reinforcing what the different sections they are associated with are for (bookings, icons, etc.)

Social Media icons of the band.

Technologies Used

BootStrap Used for rapid creation of a default styled layout. Fontawesome Used to display custom eye-catching icons.

Smooth scroll Used to scroll smoothly between page sections on the website.

Testing

YouTube video plays whenever is clicked.

(ensure smooth scroll to section).

Band information:

Click each band members name with picture on the about us page and it will take you to the individual band members wiki page

Click Meet the Band link in Read more about the band and ensures the wiki page opens in new tab (ensure smooth scroll to section).

New material:

Ensure any links to sections in the website smooth scroll to the sections

For general functionality:

Mobile functionality: Ensure parts and sections change shape and layout based on resolution. Ensure navbar is replaced with a dropdown on smaller resolutions.

I would also have liked to have done the tests mentioned above on both Safari and Opera to be able to cover all bases.

Deployment

I deployed this project to GitHub.

I used the inbuilt git editor within Cloud9 to push my code to GitHub. I had reached a stage where I believed it good enough to display, I went to the settings tab within my GitHub repository for the project and published it to GitHub Pages.

Credits

Smooth scroll JavaScript Taken from https://github.com/cferdinandi/smooth-scroll

Content

The background information for the band members was pulled from their respective wikipedia pages: Davy Jones Michael Nesmith Micky Dolenz Peter Tork

The top 10 hits was taken from https://ultimateclassicrock.com/top-monkees-songs/

Media

Some of the photos used in this site were obtained from a GitHub Repository set up specifically for this project and some from the the monkees wiki page I could not find any video contents from the GithuB Repository, so i just used the version uploaded to YouTube instead.

Acknowledgements

I received inspiration for this project from the following sources:

Friends and Family, I looked at all kinds of music sites. And also I watched alot a vidoes from youtube and udemy in regards to putting this project together.

I am very proud of what I have achieved, it was tough.