Band-Website

This website is for fans and new fans of the band Scorpions. It will be designed to engage fans into listening to the bands music and potentially purchase the bands music on their iTunes and spotify accounts. Fans will also be allowed view the band photos, check their tour schedule and be able to contact them in order to organise gigs.

The website will allow fans to find most information and content on the Scorpions. The initially home page will be used to promote the bands music and tour schedule but will also have a brief description of the band to engage new fans. There will then be individual pages, for the band's content and other uses. There will be a photos page for their photo collection, a music page for their music catalogue and a hire page to allow the user to contact the band for hire. The website will also be used to promote their social media pages, through the use of external links. There will be links to the bands iTunes and Spotify accounts on the header of each page, and Facebook, Twitter, Instagram and YouTube links on the footer of each page. The website will initially have four pages. It will have a home page which will contain promotions and a brief description of the band. The promotions will include a tour promotional video, tour dates and sample songs from their latest album. There will also be a music page containing songs from three of their albums, a photo page containing multiple photos to view in full, and a hire page where the user can contact the band directly to hire them for gigs.

UX

As a user, I want to use the website to:

• listen to the bands music and watch videos (should include atleast one video clip),
• find links to their social media and other media pages (i.e. YouTube, Facebook, Twitter, Instagram, iTunes, Spotify).
• look at photos of the band on tour and of each idividual band member.
• see the bands tour dates and 'availability for booking' and are able to contact the band to organise gigs.

Prior to beginning the project, I first drew a very basic wireframe for the web page. Here are the sketches I drew:

• Wireframe 1
• Wireframe 2
• Wireframe 3
• Wireframe 4

I designed the wireframes to full fill the user stories. However, during development I made many changes to what was initially planned. This was because I wanted to keep it as simple as possible, and because some of my design plans didn't work out as well as I wanted.

Furthermore, I decided to go for a lightbox wireframe for the photos page.

While developing the project, I used the Iron Maiden website and Metallica's website for further design and content inspiration, however I kept the design as simple possible for this website.

Features

In discussing the features, I will go over in detail on what is contained in the header, footer, the four pages aswell as the use of the color scheme with the features.

The website will have four separate pages, (1) a home page, (2) a music page, (3) a photo page and (4) a gig hire page. Each page will have the same header and footer sections for consitency.

• The home page will display a promotional video, one or two examples of their music, a brief description of the band, including a list of band members and a list of tour dates. This will give a solid introduction to the band for new fans and allows them to try their music.

• The music page will contain more samples of the of the bands music.

• The photos page will contain a vast variety of photos of their previous tours.

• The gig hire page will have a contact form and will contain a list of scheduled gigs and dates of availability for hire. This allows user to have a clear understanding of where the band will be playing and where they will be available for gigs.

Existing Features

Header and Footer

I used the code from for the header and footer sections of the resume project as a starting point to work from.

I kept the same structure of the resume project header but I added an image of the band's logo/name and two external inks for the bands Spotify and iTunes accounts. Having external links to the bands music on the header is important because this website is primarily used to promote the bands music.

The header has links to each page of the website to allow for consistant easy access for the users. On each page, the header indicates to the user which page they are on, by having the related page link button have a lighter background color. All of this is so the user won't be lost when navigating around the website.

Alot of the band's websites have diffent size headers. Some have big mast heads while others are slimmer and just contain the needed functionality and display.

I decided to make the header more medium sized. There is a photo of the whole band on the header. On smaller screens it is on the top and on larger screens it is too the left.
This image gives new fans an idea of what kind of band the Scorpions are.

I made the page links small and slim with extra margin space at the bottom, so that black background can be partially seen at the bottom. This is so the the links feel they are part of the header and not just attched under the bottom.

I also kept most of the structure of the footer (from the resume project) in place. The footer includes a small logo, copywrite text and a list of all their social media pages.

Most of the social media links will be kept on the footer only because they are of secondary importance (i.e. Facebook, Twitter, Instagram and Youtube). Having iTunes and Spotify in the header makes more sense because they are of more importance. They are essential for the bands buisness.

In general, having external links on the footer and header will allow the user to have consistent access to them.

Future changes

• I might add more pages to the website, which means I will add more page links to the header.
• With this in mind. I might have to remove the band image from the header to allow more space for page links.

Home Page

The home page page consists of three columns:

• ( a ) A promotion of two songs from their latest album
• ( b ) A list of tour dates
• ( c ) A main section (class-"main-section") which is largest part of the page and will have varied content.

(a) and (b) are stacked on top of each other. On small screens they are below the main section but on larger screens they are pushed to the right as a side bar.

The top of the main section has a video promotion to promote the band's tour. This is for fans to be immediately aware of the tour. Below the video is a brief description of the band and the website. This is for new potential fans to be introduced to the band. Then below the description is a list of the band members in the band, which is also for new potential fans aswell as regular fans.

The new songs promotion and tour dates list are stacked on top of each other. All three sections have different background colours to keep them separate.

I am trying to make the home page as random as possible, while also providing as much previews and important fan content. I got the inspirations from other band websites, such as Metallicas and Iron Maidens, which both also had a 'random content' feel.

For the tour guide list, I used Metallica's tour guide list as a guide on text sizes and designs.

Future changes

I may add other content, such as fan art and music videos the home page. I will either put it on the main section or in the form of another side bar column. I got the idea of Fan Art from the Iron Maiden website. I feel it adds a sense of 'personal aknowledgement' of the fans. With this new material in mind, I may consider adding links to new pages, specifically for each set of content. I will either add the links to the header or on the home page.

In general, I think the home page should have as much interactive content as possible. With this in mind, I may consider removing the band description section and move it to a new page that talks about the band and it's history. I will add a link to this page in the header.

Music Page

I am using this page to display all the sample songs I intend to have available. There will be three albums on display with a picture of the album cover, the album heading and year release and external links to the albums Spotify and iTunes accounts.

Underneath each album display on small screens, I displayed two listenable tracks chosen from the album. On larger screens I pushed the tracks to the right, aligning them next to the album display to the right. For the track listings I reused most of the the code and styling from the music section of the home page, keeping it consistant.

The first Album on display will be latest album and will contain the two tracks from the home page. The other two albums will be two of their classic albums from the 80's.

I took inspiration from other bands Discography pages on their website, particularly on how they display the album cover picture and details.

Future changes

I will consider putting all of their albums on for display, in which the initial music page will just display all the album cover images, aligned next to each other. Each link will link to a new page, that displays the albums full track listings and full production credits. From here the user will be able to read each song's lyrics. I may also add more sample tracks for each album, however I will still have links to the album's Spotify and iTunes accounts. This building process will require a more complex UI wireframe, so I will add links to each albums page that will give the user the option to return to the full album listing and home page. I may also include the same header or footer for consistency.

Many band websites used this type of wireframe, Iron Maiden's studio albums page.

Photos Page

For the photos page I utilized a lightbox system.

Upon opening the Photos page, there is a collection of photos available for the user to see. The user can't see the image at its full capacity, but all the images are matching at the same width and height, without being stretched. They are also evenly alligned at different screen lengths. The images are small enough for the user to get a full grasp of all the images on their first glance.

Upon clicking an image of their choosing, a lightbox pops up. The light box displays the image fully from the top. It displays each image as large as possible, without the user having to schroll up and down to see all of the whole image. The image size increases in size on on larger screens. The image caption is displayed right below the enlarged image.

The enlarged image and image caption are both placed in a parent div. The parent div has the exact same height for all selected images. This was important because all the images vary in dimensions and sizes. The constant changes of image sizes/dimensions (from clicking the next and previous buttons, and clicking other images) doesn't move the remaining page content around (i.e. outside the parent div) because the the enlarged image's parent div remains the same in size.

This makes for a good user experience and does not cause confusion.

There is also an x button on the top incase the user wants to go back to the main page, where they can navigate through the website again.

I chose to use the lightbox system because it is commonly used on many websites, Iron Maiden's gallery page.

For further information on the technology of the lightbox please view the Technologies Used section below.

I also used the same color schemes from the Music Page to keep the website as consistant as possible, however the main-section (grey background is alot wider than on the Music Page. This was to keep as many of the images as possible in view.)

Future changes

Below the enlarged image on the original light box used was a collection of images from initally opening the photos page. This was to allow the user to search through the images without closing the lightbox.

I removed this because it was making the design overtly complex for the user. I wanted to keep it as simple as possible especially considering I am using some images that are quite large.

I may however bring it back for future development.

Hire Page

The hire page is used to promote the available tour dates.

It contains a Bootstrap contact form, which requires the user's email, first and last names, and a message. The message textbox's placeholder asks the user to give specific information on dates, venue, type of event and other relevent information. This type of information is for the band's interest and helps the booking process.

Above the form is a paragraph of information which reminds the user about the up and coming tour and requests that the user refers to the 'dates available for booking' list when sending a message.

'The dates available for booking' is set in a list column simular to the list of Tour Dates on the home page. The list of Tour Dates are also included on the hire-page right below the 'dates available for booking'.

The two columns, while consistantly stacked on top of each other, turn into an inner side bar on wider screens (the side bar is located inside the 'main-section class div' for this page). Each column has a different background color to keep them separate.

I added the tour dates list to this page because I felt it was related to subject of band hiring and it is helpful for the user to be aware of the booked tour dates and booked locations.

Future changes

I might add more required form inputs to the form (i.e. locations, dates, type of events) and I might change the design of the tour and dates for hire listings. I will also add a pop up for when the message is sent. The only reason I didn't put it in this project is incase of potential cross platform bugs.

The following is my work in progress for a pop up:

    var input1 = document.getElementById("exampleFormControlInput1");
    var input2 = document.getElementById("exampleFormControlInput2");
    var input3 = document.getElementById("exampleFormControlInput3");
    var textarea = document.getElementById("exampleFormControlTextarea1");
    var submitButton = document.getElementById("submitButton");
    submitButton.onclick = function(){
        if (input1.value !== "" 
            && input2.value !== "" 
            && input3.value !== "" 
            && textarea.value !== "") {
            alert("submitted!")
        };
    }

Color schemes (of all pages)

Originally had more a variety of colors, but somebody on on Slack made a suggestion to me to use a max of three colors. I took his advise mostly but I decided to have more variation in colors.

For secondary background colors, I chose three main colors which I used consistantly. I used Grey and Black and a dark red for most of the backgrounds. However I also used a dark green and a lighter red for the 'dates available for booking' and tour dates list.

When I started designing the website, I first used the background color of the footer image (the black color) as the backgound color for the footer. The main purpose for this was to blend the image background to the footer background. I then reused this color for the header background to keep the website consistant in color tone.

I only use black as the background color of the footer and header to keep them distinguished from other parts of the website. The only other use of black was for the background of the lightbox in the photo section. This was because it didn't use the header or footer.

On the basis of using the color black, I decided to use mostly darker colours for other parts of the website to keep it consistant in tone. This is why I used dark red and grey. I used a dark color red for the page links to keep them differentiated from the header background. For the page link button that links to the page in use, I used a lighter red background. This is to give an indication to the user where they are on the site.

For the main section (undr the class 'main-section') of each page, I used a dark grey for the background color. The use of a dark gray keeps it separate from the header and footer. However the use of black and dark grey blend well together in tone.

I reused the dark red (from the page links) as the background color of each page (parent div of '.main-section'), except for the home page because it didn't have any right or left margins. I set the background color of the home page to grey to keep the main section blended in with the background.

Further more, the use of black, dark grey and dark colors are well suited for a metal band / heavy rock band website.

All three colours are the most consistently used background colour schemes of the whole website, although sometimes in darker or brighter tones.

I reused the darker red for the song sample list on the home page and for text color of the external links. I reused the lighter red for the Tour Dates List background (on both the home page and hire page). I chose these colors for these sections because I wanted to reuse them.

However, it also made sense to use of dark red for the external links to keep them consistant with the page links color.

I used the dark green for the 'dates available for booking' to add a slight variation and because green is a positive color. I wanted to attract the attention of the user to this column becuase it is important information regarding bookings.

For most text colour, I used the colour white. This is to make it read-able for the users on the dark background colours, and to keep the text consistant with the color of the header and footer logo's color. The use of 'plain' white is suitable for static content.

The text color of the 'dates available for booking' list is a darker red. I used a dark red color to make the lists readable over the green background. The dark red color keeps the website consistant the other uses of dark red.

I set the copywrite text to a dark grey because it is the least important part of the website for the user. However it is a bright enough color to keep it readable for the user.

I used a bright turquoise green colour for the track headings of audio files (on both the home and music pages.) This adds importance to the text because it's associated with the interactive parts of the website.

For all links and the form submission button, I made each turn bright yellow when hovered over. For the page links background, I also added a timed animated transiton of color (from dark red to bright yellow). This gives it a sense of importance over other links because it keeps the user on the website.

To help me provide suitable colour schemes, I used paletton's color pallet.

Features Left to implement

I will add more pages to the website, with their related page links added to the header. The following is a list of pages I intend to add:

• Fan Art
• News feed
• Music Videos
• Merchandise
• A forum

I may also add a search bar.

Technologies Used

• For assistance in deciding on color schemes, I used paletton's color pallet.
• For the photo lightbox I used w3schools's lightbox.
  • Upon utilizing this code, I removed the column class and column css styling, and used bootstrap column grid system instead.
  • This was to keep the website consistant with its use of Bootstrap.
  • I removed the photo selections from the modal because it was adding too much page height.
  • I made several changed to the styling ( see the Existing Features above).

Testing

Automation testing

Used the following validators to test the code:

• CSS Validator
• HTML Validator

UX user stories

The following is my feedback after testing the UX on the website. I will go over each user story discussed in the 'UX' section above, followed by further information on the development of this page.

The user should be able to...

1 - watch videos (should include atleast one video clip)

• The promotional video on the home page (index.html) can be played on iPhone and iPad devices, aswell as Safari, Google Chrome and Firefox browsers.
• The Video is wide enough for all sizes of devices and can be opened on full screen.

2 - listen to the bands music

• The sample tracks on the the home page (index.html) and music page (music.html) have all been tested on iPhone, iPad and large screen devices aswell as Chrome, Firefox and Safari browsers. From each platform/browser the tracks can be played and paused and from initial load of the page, they do not play automaticaly.

• Track titles for each audio track are provided, aswell as the name of the album in which they came from.

• On the music page, the album cover is displayed.

• The user is provided with as much information as possible about the songs they are listening to.

• External links to the bands Spotify and iTunes accounts have also been provided (see the next user story for more information) .

3 - find links to their social media and other media pages (i.e. YouTube, Facebook, Twitter, Instagram, iTunes, Spotify).

• External links to the bands social media and other media pages are provided and can be opened on a new blank page upon clicking.
• Listening to the bands music is the first priority of the website so the Spotify and iTunes links are provided in the header on all four pages(index.html ; hire.html ; photos.html ; music.html ).
• Spotify and iTunes links are also provided with each of the albums on the music page (music.html), in which they link to each album's specific Spotify and iTunes accounts.
• The Facebook, Twitter, Instagram and YouTube external links are all found on the footer of each page.
• All the external links change to a bright yellow collor when hovered over, telling the user they are interactive.
• All these links and animations have been consistantly working with Safari, Chrome and Firefox browsers, aswell as iPhone, iPad and large screen devices.

4 - look at photos of the band on tour and of each idividual band member.

• While the header shows profile picture of the whole band, the user can view more photos from the photos page (photos.html).
• Upon entering into the photos page, the user views rows of images the same size.
• On large screens, user doesnt have to scroll to view them and can see all of them on full screen.
• The user can click each image, in which opens up a modal where the user can see the image in its full view and can view the image in whole without having to scroll.
• From the Modal the user can scroll through all the images through the user of 'previous' (white arow to the left) and 'next' (white arrow to the right) buttons.
• The user can escape the modal by clicking the white 'x' button at the top right corner of the modal. The X is easy to find because it is on the top right corner.
• The photo's contain 5 photos of individual band members (1 for each) and 7 band tour photos.
• Upon testing this page on Safari, Chrome and Firefox browswes, aswell as iPhone, iPad and large screen devices, I found all interactive features to be consistantly working.

5 - see the bands tour dates, and availability for booking and are able to contact the band to organise gigs.

• A list of tour dates are provided on the home page (index.html) and hire page (hire.html).

• A list of dates available for booking (around specific areas) can be seen on the Hire page.

• Both lists, provide the user of an idea of the bands locations for booking.

• A paragraph promoting the bands up and coming tour can be seen above the form.

• All this content is clearly visible on the webpage on all devices and browsers.

• The form consists of four inputs for the users first name, second name, email and message, aswell as a submit button.

• Upon clicking Submit, the page refreshes aslong as all fields are entered in and are correctly written. (through further development of this site it will send a message to the bands email and notify the user that an email was sent)

• If a field is missing, the form indicates to the user of any missing fields without refreshing, through Bootstrap's form validation.

• All the functionality works on all browsers and devices.

Other information on user support

• The header also contains 4 page links to navigate the website.
• They are for all all pages( index.html ; music.html ; photos.html ; and hire.html ).
• After testing the these links, I found them to be the most efficient way to navigate the webpage because they are consistantly there when the page loads.
• These links have been tested on iPhone, iPad and large screen devices aswell as Firefox, Chrome and Safari browsers and have been found to have no errors.
• Uppon hovering over these links they turn to a bright yellow color indicating to the user that they are interactive.

Testing on different screen sizes

• All pages (index.html, music.html, photos.html, hire.html) have been tested.

Small screens

• All columns and content are stacked on top of each other, and are consistantly to the user when scrolling.
• The header and footer don't cover over any important content and there is no margin or padding issues related to them.

Large screens

• On wider screens, the content is more spread out, with more columns/content aligned next to each other.
• Content is also not too spread out, as I utilised the Bootstrap offset classes (on the largest screen sizes) for the main section.
• All content is atleast partially visible on a full computer screen.
• Content at the bottom of the screen can be seen in full once the user scrolls to the bottom.
• The photos page(photos.html) was the only page where I was able to get rid of the schroll bar so all content is visible at full computer screen.
• The header and footer don't cover over any important content and there is no margin or padding issues related to them.

Testing for warnings and errors

• I tested each page on each browser, for warnings and errors through the browser's console.
• I found one error in the Firefox browser. After searching the error it indicated to me that I had to add this meta tag to the head: ''

The ways I tested the website

• I consistantly tested the page in developemt for Chrome.
• After each GitHub commit, I would test the hosted website on Chrome.
• I uploaded my website on Slack for other users to test it multiple times.
• I also sent it to my mentor a few times for testing.
• I took their recommedations onboard and made changes to fix the problems as much as I could. For example, a user told me that on large screens that there was white space space below the footer. I fixed this immediately by using '100vh' for page heights and having the section and '.main-section' lay under the header and footer on large screens ( through the use of padding and margin changes).
• After I felt confident with the project, I tested it out on Safari, Chrome and Firefox all together. Unfortunately, I had to compensate some of my design decisions to make it work on all browsers and devices. This was particularily in relation to image/link sizes, page heights and div padding/margins.
• A friend of mine tested the website on Internet Explorer and said there were no problems with the webpage.

errors and warnings encountered

• Upon testing the webpage on Firefox, I came accross the following error: "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol."
• After searching this error online, I discovered I needed to attach this meta tag to the head of each page: ' '
• After attaching it, the error dissapeared.

Deployment

• I first set up a GitHub repository on my GitHub account. I named it 'band-website'.
• After my first stage of developing my website on Cloud9, I deployed it to the GitHub repository.
• I first pushed my index page and css file, and then added more files later.
• I then set up GitHub as a master branch, allowing it to be used as a GiHub page.
• the webpage is now hosted on a GitHub page.
• I still have the website hosted in development under my C9 account: tommyjackson85
• The difference being, it is not hosted publically, like it is in Github. The public version (the Github page) can also contain errors due to security. This can happen with sensitive information, such as third hand API's. This is why I re-tested the webpage from GitHub pages.

Credits

Content

• The text from the Home Page was copied and edited from a Wikipedia article on The Scorpions.

Media

promotional video

• The video on the Home page came from the Scorpions YouTube Channel.

music credits:

• Artist: Dark Meat; audio tracks: Dark_Meat_-05-Last_of_the_Frontiersmen.mp3; Dark_Meat-07-_Flaps.mp3;
• Artist: eddy; audio tracks: eddy_-03-All_The_Way_Up.mp3; eddy-04-_Machinery.mp3;
• Artist: Maeth; audio tracks: Maeth_-01-Everything_is_an_orchid.mp3; Maeth-03-_but_I_am_shafts_of_light.mp3; (all tracks came from the Free Music Archive and are used for non profit and educational purposes; Website: Free Music Archive. )

Photo credits:

• album1982.jpg

• album1984.jpg

• album2015.jpg ( copywrite: The Scorpions. )

• crazy-world-tour2017.jpg
  (copywrite: Claypaky twitter account @ClayPakyNews. )

• klaus-meine.jpg ( copywrite: source: Ethan Miller/Getty Images North America; secondary resource: Zimbio; )

• matthias-jabs.jpg (copywrite: https://www.gettyimages.ca/photos/matthias-jabs?page=10&sort=mostpopular&phrase=matthias%20jabs&family=editorial.)

• melbourne-2016.jpg (copywrite: Silver Tiger Media and Roger Brooks Photography; )

• mikkey-dee.jpg ( copywrite: Metal-Hammer; Photo credit: Sarah Fleischer (www.sarahfleischer.de). )

• pawel-maciwoda.jpg ( copywrite: Zimbio; Photo credit: Ethan Miller/Getty Images North America ; ;)

• rudolf-schenker.jpg ( copywrite: Getty Images and Apollo ; ;)

• scoripions-logo3.jpg ( copywrite: Teepublic and Scorpions ; ; )

• scorpions-name.png ( copywite: The Scorpions - Backstreet Merch and The Scorpions; ; )

• scorpions-on-tour.jpg ( copywrite: Romanian Insider; ;)

• scorpions-on-tour2.jpg (copywrite: ImgCop; ;
  )

• scorpions-on-tour3.jpg ( copywrite: U Discover Music; ; )

• scorpions-on-tour4.png ( copywrite: The Nokia Theatre at L.A. Live on July 31, 2010; ; )

• scorpions-on-tour5.jpg ( copywrite: Rock Music Timeline; ; )

• scorpions1.jpg ( copywite: Getty Images, The Scorpions; ; )

Acknowledgements

• I received inspiration for this project from
• the Iron Maiden website and the Metallica website, however I also received inspiration from a broad range of band websites.