BAND FAN PAGE - NIRVANA

User-Centric Front-End Development Project

In this project, we were asked to create a 4-5 page website for a band. The band was to be from the 1960s and have around 50 years experience, but I stepped away from that a little basing my project on the band called Nirvana, from the late 1980s to mid 1990s. Although being a more modern band, I changed some key parts of infomation to fit in with the "1960s" and "50 years exeperience" theme. For example, changing the date of birth for the band members and not acknowledging the fact that one of the members has died, "Kurt Cobain".

UX DESIGN

For this project I have used the Framework known as "Bootstrap 3.3.7" for the layout and added my own CSS for the look of the website.

This website is aimed at not just loyal fans but new ones, looking for infomation and a chance to book their favourite band for venues, such as "Birthdays". It is easily navigated with an easily understandable navigation bar. All infomation is displayed clear and easy to see. All media such as "< img >" and "<iframe>" has been sized accordingly.

All Mock-Ups and planning I did for this project can be found here Mock-Ups.

FEATURES

All pages on this site include the "Header" and "Footer". The Header consists of the navigation bar and logo. The Footer has links to Official Nirvana social media pages and "Terms/Privacy" pages.

I chose "Gold" and "Black" for the main colors as they are used for Nirvana's actual logo. The colors used in this project were:

• "#fab824" (Gold. Text Color)
• "#a3730c" (strong orange(brown)/strong gamboge. Hover Effect)
• "black" (Background)

I have imported the fonts from Google: "Abril+Fatface" (For the main Nirvana logo located at the top left). "Gloria+Hallelujah" (For the main text spread across the whole site). I chose "Abril+Fatface" as it resembles the actual font used for the real Nirvana logo. I chose the "Gloria+Hallelujah" font as I thought it fits well with the "rock/grunge" band genre.

index.html

This is the opening page, where fans are will notice a video that plays automatically and the current tour the band is on.

On this page I have used multiple links, such as:

• Youtube
• Spotify
• Image

Footer Links applied to all pages:

• Facebook
• Twitter
• Youtube (All YouTube videos have been copied from here)

The Image [gig-poster] was taken and saved from googled images.

about.html

This page is dedicated to giving fans a little infomation on not only the band, but each band member.

On this page I have copied links from social media, YouTube and other sites:

• Image
• RockHall
• Image
• Image
• Facebook
• FooFighters
• Image

music.html

This page is where fans can have a listen at some of the best songs the band has produced.

On this page, all video links have come from:

• Youtube

bookings/contact.html

This page is where fans can use the forms provided to either, book the band for special occassion and/or contact the band with any questions they might have. Also gives fans the ooportunity to sign up for News updates.

TECHNOLOGIES

Here are links to each techonology I have used:

• HTML5
• CSS3
• Bootstrap 3.3.7
• JavaScript
• Font Awesome 5

TESTING

I conducted tests on a wide selction of browsers/devices to ensure User's can successfully use the site and it's features.

Tests conducted:

• Checking the responsiveness
• Making sure each link worked porperly
• All images resize appropriately

These tests included browsers/devices:

• Edge - laptop
• Mozilla - laptop
• Chrome - laptop and Iphone
• Safari - Iphone
• Internet Explorer - laptop

DEPLOYMENT

Whenever I thought that a page was finished, I deployed it to "GitHub Pages" using version controls found here - GitHub.

All my commits and project be found here milestone-project-one.

CREDIT

All content/media copied from other sources has been noted above.

ACKNOWLEDGEMENTS

I received inspiration for this project through being a long fan of the band Nirvana. I used this passion to create the site.