Band Project Website

This is my milestone project website for a 1960's rock band (Led Zeppelin) returning to the gig scene.

The site highlights one video and 6 audio files from their back catalogue, has band profiles and a brief history, allows visitors to sign up to a newsletter or contact the band via a contact form to book them.

UX

My goal was to keep the design as simple as possible, whilst making media files easily accessible and contact points stand out.

I opted for a grey, white and red colour scheme that fits with the Led Zeppelin brand.

For fans of the band, I wanted to make sure that audio and video files were easily found and played, whilst they could also contact the band if they wanted to book them for a private event as well as sign up to a newsletter.

User Stories

As a fan of Led Zeppelin I want to contact the band so that I can book them for a private event.
As a fan of Led Zeppelin I want to access the band's back catalogue so I can listen to their music and watch video.
As a fan of Led Zeppelin I want to sign up to social media and a newsletter so that I can be kept informed of tour dates and album releases.

Original mockup here

Features

Existing Features

The site features a Bootstrap 4 navbar that uses jQuery to automatically collapse on mobile devices. This saves screen space and promotes a responsive design.

In addition, using an @media query the announcement banner will move upwards on medium and large devices so that it becomes more prominent and stands out.

Features Left to Implement

In future, I would like to implement a dynamic news section with a variety of sources.

I would also like to implement modal confirmation messages upon successful form completion with full 'post' capability for forms.

In addition, as the site becomes more complex with additional media, a search bar on the navbar would be implemented.

Technologies Used

Bootstrap 4.0 for general layout, positioning.
Font Awesome 4.7.0 for social media and news icons.
jQuery for navbar collapsing on smaller devices.

Testing

Responsiveness

The project was developed with a 'mobile-first' philosophy in mind and was used on a variety of devices to test its responsiveness.

Devices used to test were:

Samsung Galaxy S5
Apple iPhone 7
Apple iPhone X
Apple iPad
Apple MacBook Pro

The project was able to be displayed as intended on all devices and browsers, with full responsiveness.

The fan user stories are split into three parts covering the desire to book, use media and sign up to a newsletter/social media.

1)

This achieved the desired outcome of a user being able to navigate successfully to the Contact Page on any device via the top navbar. If any of the fields on the contact form are not filled out an error message displays promting the user to enter information. If an invalid email address is input then an error is displayed prompting the user to amend. If all inputs are correct, the page will reload.

2)

This achieved the desired result of a user being able to play the video and audio files contained on the index.html page. In addition, the user is able to navigate to the music.html page via either the link in the navbar at the top of the page or via the link below the audio files on the index.html page.

3)

This achieved the desired result of a user being able to sign up to a newsletter via the contact form on the index.html page. If either of the fields on the contact form are not filled out an error will appear prompting the user to fill out information. If an invalid email address is input then an error is displayed prompting the user to amend. If all inputs are correct, the page will reload.

A user is also able to navigate to the relevant social media profiles for the band using the linked icons in the footer at the bottom of each page. When clicked, the user will be redirected to the relevant profile in a separate browser.

Deployment

The project is hosted in my GitHub repository.

The project was developed using Cloud 9 IDE.

Some file paths were changed following deployment to GitHub Pages.

Credits

Content

The text for about.html was copied from the Wikipedia article on Led Zeppelin and the respective band members https://en.wikipedia.org/wiki/Led_Zeppelin .

Media

The photos used in this site were obtained from the following:

Disclaimer

This website is for academic purposes only and is in no way affiliated with Led Zeppelin or any other third parties.

martingr1/bandproject