Midnight Change

This is a website for the (fictional) band Midnight Change. This website showcases the 60’s rock band music, images and videos. The website also shows that Midnight Change are available to hire for various types of events.

Midnight Change

UX

This website is for fans and potential fans of Midnight Change. The website will also be useful for those searching for live entertainment for their special occasions.

• As a fan of Midnight Change, I would love a place to listen to all the hits from my favorite rock band, see them live and look at pictures of my favorite members in action, so I can reminisce on the good old days.
• As a fan of the greatest rock band, Midnight Change, I would like to know when they release new music so I can keep up to date with them.
• As a bride to be I am searching for the perfect band to make my special day even more magical, I want to listen to music from the band and see what they are like while performing live, so I can make sure I am making the right choice.

Here are the links to the wireframes

Features

Navigation Features

• The navbar consists of links to all the pages.

Homepage Features

Header

• A banner with a sign-up button that allows users to leave contact details to be updated with new music from midnight change.

Meet The Band

• A short introduction to each band member.

Features

• A section with links to the bands upcoming shows, how to contact the band about hiring them, and past events they have performed at.

Gallery

• This section gives the user the option to choose to listen to music, watch videos, or look at images from the band and directs them to the section they choose.

About Us Features

Header

• A banner with a title.

About The Band

• A section about the band as a whole.

Members

• A section with more in depth information about each individual band member.

Contact Page Features

Header

• A banner with a with a title.

Contact Infortation

• A phone number with a link to call the band.
• An address for the band
• An email with a link to email the band.
• Social media links

Map

• An embedded Google Map to the bands address.

Gallery Page Features

Header

• A banner with a with a title.

Images

• A section of photos of the band.

Videos

• A section of videos of the band.

Music

• A section of music of the band.

Footer Features

About the band

• Short section with information about the band.

Music

• An embedded SoundCloud audio player.

Social

• Facebook link.
• Twitter link.
• YouTube link.

Technologies Used

In this section I used the following technologies:

• HTML
• CSS
• Javascript
• Cloud9
• GitHub
• SoundCloud
• YouTube
• Canva
• Gimp

Testing

I have tested this website multiple times and am confident the site works well.

What Works

• Simple for the user to understand.
• All links work.
• No need for the browser back button.
• Responsive for all devices
  • Some images are hidden on mobile devices and everything is resized proportionally.
• Tested multiple user stories with no issues.

Testing User Stories

Example:

1. Fan looking for media:
   1. Locate the media from the navbar (each link will bring you to the desired section of the media page).
   2. Locate the media from the gallery section of the homepage (each link will bring you to the desired section of the media page).
   3. Listen to audio in the footer of the website.

This testing has been done for all user stories.

What Does Not Work

• Facebook and Twitter links are to accounts that do not exist.

Bugs

• Getting the pictures and text to stack properly on mobile view. I ended up displaying images and text on mobile and not desktop and re-sizing them.

Deployment

• GitHub

Credits

• W3schools

Content

• The text for the webiste was written by me.

Media

• The photos and videos used in this site were obtained from Pexels and Pixabay to portay a band.
• The music for this site was taken from Bensound. The music was used for the audio and placed over the band video.
• I created the logo for this website. I also created the band name and all text on the site.

Acknowledgements

• I received inspiration for this project from the tutors at Code Institute, and my mentor Dick Vlaanderen for some Javascript tips.