This site is for fans of Pink Floyd. It shows their songs, their best pics, their bio and also the ability to book them for an occasion.It is a one page site, so everything is on one html page. Navigation occurs through the menu buttons where you can visit each section of the site individually from any section of the site.

I decided to go for a single-page look for ease of information access. The information i wanted displayed is minimal, and adding extra pages just bulks it up unnecessarily. The website is for fans of Pink Floyd. This covers all age groups, and so the UX design aims for the general public. Those visiting a band site come to learn more, to book, or to view more. This means that the aesthetic of the site is important here. It is simply divided up into different sections useful to the audience: Initial video on the top of page to engage users immediately Navbar right beneath it contains the options for the important sections: About Us Contact Us Gallery Listen to Us Sections a, b and c respectively I chose a dark theme in tune with the band itself, and to make it look more modern. The background is black, with every second section having a ‘snakeskin’ look design behind which is subtle but adds texture.

Fan wants to see the latest photos of Pink Floyd. They click on the website, and click on the ‘Gallery’ section. From here the user can swipe through images. Fan wants to book the band for a Wedding on the 4th August 2020. They click on the site, click on ‘Booking’ section. They enter their enquiry including the date, and click ‘Submit’. Depending on information being correct, the form will have been sent.

In this section, you should go over the different parts of your project, and describe each in a sentence or so. Navbar - The navigation bar contains links to other sections of the site, and also a Pink Floyd logo that leads to the top of the page. When used on smaller devices, the menu items fold into a hamburger menu dropdown where clicking on it allows you to access About, Contact Us and Gallery. Header - In this case the header is an embedded video on the site. It is muted and autoplayed by default for user experience. Booking Form - Used for booking the band out for an event. Fields include the Name, Email address, Message and suggested date for the event. It is a simple bootstrap form, which is very tidy and easy to read. The form includes validation on all mandatory fields. This is a necessity to ensure the correct information is there. A message appears when the criteria is not met. Gallery - This is for the pictures of the band itself. This is done with the Bootstrap carousel, which automatically flicks through the photos every 5 seconds. This also has arrows on each side of the carousel to allow users to click through the images themselves. This gives more control to the users rather than choosing when to show the next image. Listen to Us - This section includes Spotify’s functionality. It is an iframe attribute containing a spotify playlist link. The player is compact, neat and contains enough information required for showcasing the best songs for users to listen to. Footer - This contains links to all social media accounts. This is a replica of what is in the hamburger menu. From a UX perspective, this is so when the user scrolls down to the bottom of the page they clearly have links to everything they need.

For this project I used HTML5, CSS3 and Bootstrap. HTML5 - As it is required to create a web page. CSS3 I used CSS for the styling of the web page. Bootstrap Some parts of the website I used Bootstrap to speed up development, and to make the site more responsive. The sliding carousel was done with bootstrap, which is an integral part of the site. The hamburger menu used bootstrap for the purpose of making the site responsive. When a mobile device uses the site, the navbar is compressed into the hamburger menu making it easier to use. The form was done using bootstrap, making it quicker to create, more responsive and also visually pleasing.

Browsers this site has been tested in: Internet Explorer, Microsoft Edge, Mozilla Firefox and Google Chrome. Devices this site has been tested on: Android, iOS. In order to check that the site behaves as expected on different screen sizes, i used the Chrome Developer Tools changing the size of screen. I also tested on the different devices available in the developer Tools to ensure that they all look as i intended them to. I used the w3 validation tool on my site once it was deployed to check for any errors in my code. I also used the error window in chrome developer tools ensuring that i there are no issues.

This site was deployed on github pages

The photos used in this site were obtained from google

I received inspiration for this project from the Manchester Orchestra website. I thought that this was a really good website for a band. I liked the idea of the hamburger menu and having a video appear on arrival on the site.