NinjaSpaceMonkeys Band Website

This is a website for a fictional band called NinjaSpaceMonkeys. The purpose of this website is to promote the bands material in order to attract potential fans/customers to the band. The website consists of 2 pages which is the main page which serves to pull attention to the band and the merchandise page is to allow for e-commerce of the bands goods such as albums and t-shirts etc.

Design Process

The band has a colour pallete of red, blue and yellow and represents the band members Rook, Gabriel and Sam respectively. These colours are littered accross the website as a form of branding. Since this is a band, the music and videos must be at the forefront of the design, so showcasing it would be a must. The target audience of the band is mostly teenage girls so the overall website design should be more cute and colourful instead of minimalistic and boring.

Features

Main page Header: It has the band logo and also a music player that can play and pause Latest Gig Headline: It displays the latest gig of the band and when clicked, would cause a pop-up form to appear for users to register. Band Member Flip Cards: It showcases the band members with their respective colours. When clicked, it shows the details of how they got into the band etc About Us Section: It describes the bands mission, values, history etc. Youtube Video Player: It shows the music videos that the band has made Footer: Provides links to the bands store, latest gigs and social medias.

Merchandise Page Header: It is the same as the main page header for continuity's sake however there is no music player because the page is merely to sell merchandise Products: It has an interactive product interface where when you hover over the product, it shows the following interactive buttons Footer: Provides links to the bands main page, latest gigs and social medias.

Existing Features

Add animation effects to the existing band member images to make them appear "alive" so that it gives the webstite a more fun and energetic look

Features Left to Implement

Add a member sign up feature to the merchandise page

Technologies Used

Using normal HTML, CSS, JS

Testing

Main page

1. Music player:

   1. Press the music icon button on the heading of the main page
   2. Verify that music plays
   3. Press the muisc icon button again
   4. Verify that the muisc pauses

2. Contact form:

   1. Go to the main page
   2. Click on the "Live@mars" title
   3. Try to submit the empty form and verify that an error message about the required fields appears
   4. Try to submit the form with an invalid email address and verify that a relevant error message appears
   5. Try to submit the form with an invalid phone number and verify that a relevant error message appears

3. Band member cards:

   1. Press the band member cards on the main page
   2. Verify that the card flips to show the back side of the card
   3. Press the band member cards again
   4. Verify that the cards flip to the front side

4. Youtube iframe:

   1. Press the youtube video on the main page
   2. Verify that the video player works fine

5. Footer:

   1. Hover across the footer
   2. Make sure that the footer has animated links
   3. Press the links
   4. Verify that the links are not broken

Merchandise page

1. Product box:
   1. Hover across the products
   2. Make sure that the products are interactive

The website is suitable for 579 x 634 Phones and desktop size. It is suitable for chrome browser.

Credits

How To Make A Music Website Using HTML CSS JavaScript | Add Music In HTML Website by Easy Tutorials by Easy Tutorials Responsive Footer Design using Html & Css by The WebShala Awesome Card Flip Animation using CSS & JavaScript - Easy tutorial by Tyler Potts Create A Responsive E-Commerce Flower Shop Website Design Using Pure HTML & CSS Only by Mr. Web Designer

Content

The text for the about me sections are the famous Lorem Ipsum placeholder text from Roman philosopher Cicero

Media

I drew the band members, crowd and album cover, I also made the video and the song The music note icon is from easy tutorials youtube channel The social media icons and merchanise icons are from Font Awesome Brand Icons

Acknowledgements

I received inspiration for this project from Gorillaz and One Direction

One Direction because it is a boy band and its main fanbase is teenage girls and Gorillaz because it is a virtual band where the band members are actually fictional characters. A mix of both created NinjaSpaceMonkeys.