Monkees Band Website

This project is a website for the Monkees Band.

Content Table

1. UX
2. Features
   • 1. Existing Features
   • 2. Features Left to Implement
3. Technologies Used
4. Testing
5. Deployment
6. Credits
   • 1. Content
   • 2. Media
   • 3. Acknowledgements

UX

1. This Website is for the Monkees Band who want to connect with fans and potential fans through:

   • Latest news about the band
   • Information about tours and concert dates
   • Getting to know the Band and its members through profiling
   • Visitors will be able to Join the Fanclub or login to their account if they are already part of the Fanclub
   • The is also an option to sign up for newsletters
   • Visitors will also be able to follow the band via official social media handles

2. Sales: On this website visitor will be able to:

   • Purchase cheaper tickets to up coming concerts.
   • Listen to the monkees music on website and purchase music.
   • Purchase monkees merchandise from the website shop page.
   • Book the band to perfom at their wedding.

3. Colours : I selected black as the theme color of the website because "Black adds a sense of luxury and value" and “ Black is timeless & classic”. Also yellow, gold and orange give a mix of excitement and attention to the important information and the buttons to buy

4. Pages : Instead of having a home page, then tours page and news page i decided to have all these important features on the same page. This was meant to make the home page informative at first glance and it was also meant limit the number of pages that were going to be on the website. I didn't want the users to have too many pages to go through and end up boring them or making the user lose interest. More over the shop caters for all the purchases the user/fans may want from merchandise, downloading and music ordering.

5. Other UX : I put a hovering effect on the first back ground photo to give users a good experience when the mouse hovers over the picture or the booking button. As a user i wouldn't want a website that gives information and get me involved as a fan as well which i think both these matter have been addressed through the sign up for newsletter and joining the fan club.

6. Mock up : https://app.moqups.com//[email protected]/7aw4CB4xje/edit/page/ad64222d5

Features

Existing Features

• Feature 1 - I copied a inverse navbar from getbootstrap.com which i twirked a little bit to put a Band Logo image.
• Feature 2 - On the website users/fan will have an opportunity to join the fanclub by clicking the join the fanclub button. I also put the login button for fans who are already members of the fan club. Both buttons a modal forms which i learned in this coarse. I edited the form to fit to make it easy for fans to sign up and login.
• Feature 3 - the main image has a zoom out effect to give fans a special feel on the new promotion of the band perfoming at weddings
• Feature 4 - I made sure that all the news and tours are on the same page as this keep the fan informed about upcoming events and news without having to go through many pages
• Feature 5 - On the footer we tr kept it simple and clean. I returned the wedding booking button on the footer to give the fans and future customer license to go through all the pages and have the oppotunity to book for the wedding on what ever page they can be. This also would give the client(Monkees Band) to be able to get more chances to get wedding booking. Also had social media links that open on a separate page so that we don't throw our trafic off-course
• Feature 6 - There is also the a page dedicated to monkees music and albums were fans can listen to the band's music on the click of a button
• Feature 7 - There is a page dedicated to the band were the fans get to read and know more about the bandmembers a click on the band members name directs fans to a seperate wikipedia page that has more information abot the specified band memeber
• Feature 8 - The media page is were the fans access the band latest photos and videos. the video are embeded for youtube link and also there is a Carousel which fans wiil use to flip through the pictures
• FeatThe 9 - The Shop as the name says it all is the money spinner for the band were they will sell merchandise and music hard copies or through downloads. there is a button to buy hard copies and the dowload button also will eneble customers to buy with their credit cards

Features Left to Implement

• Addition now features would be adding a maps to direct fans to where the shows will be.
• Also to have 3 tiers of memberships which will give different benefits to the fans depending on the level tier they are.
• We also hope to develop and app for the fans to access all the band material and give the and exlusive insight in the band.

Technologies Used

• On the project i used bootstrap to structure the website columns and make it fully responsive.
• I also used font-awesome to give some nice decorations when necessary
• i used bootstrap Carousel for photo navigation
• Modals Forms:
  • also modals forms for the login and Joinfanclub button
• Javascript onclick event : for the music on click music button

Testing

• The website is responsive on all pages and though there is gap on the home page when its on the mobile size screens.
• Modal also works well on all the screen sizes
  • If you go and click the login button on top of the website page.
  • Try to submit a fake email without @
  • An error message will be run to ask for the address with @
  • Then try and submit a correct email then it goes through
  • This applies also with button for fanclub
• Music page also play music on all the sizes

Deployment

• This project was done in cloud9 ide and deployed with bash terminal using git to push the codes to github. https://github.com/TapiwaDivine/monkees-band-website

Credits

Content

• The navbar for the project was copied from getbootstrap.com and the modifying tips on rendering logo were learned from stackflow
• The footer was copied from bootstrap.md and adjusted a little as well
• The modal was copied from the bootstrap-miniproject on this course.
• The javascript was copied from w3schools.com and with minor adjustments to the final product.
• The Carousel was copied from getbootstrap.com with none adjustments.
• All the content that on the band and albums were copied from wikipedia article about the specified band member respectively

Media

• All image that i have in this projects were acquired from different sources via random google search

Acknowledgements

• I recieved inspiration from the rollingstones.com and zacbrown.com
• I also acknowledge the influence of stackflow in this project and web zone youtube channel for the zoom out effect code which i modified a little
• Also the review and advise from Mentor