For my User Centric Frontend Development Milestone Project I have decided to create a website for one of my favourite new bands The Snuts. You can view my project here

The Snuts are a classic example of a British indie-rock band but with an energy and style completely new and unique. I have designed this website to reflect that energy and style whilst still delivering the main project goals, those being to promotote the band to new and old fans alike with an informative and easily navigated website.

The colour scheme was inspired by the band's previous album artwork and the signature colours used on their tour which are instantly recognisalble to their fans. I took great care in selecting the exact colours by using https://imagecolorpicker.com/en/ to pick out the exact RGB colour codes, these being:

• #fff1d7 selected from the artwork for their album Mixtape empty
• #e8b015, #ed1894, #123680 and #189e95 selected from the band's promo poster for their 2021 tour

By combining these colours I have created a consistant theme that reflects the energy of the band and also in-keeps with their established identity and branding. The Ranchers font that I have selected to be used on the sites headings is also consistant with previous promotions released by the band, so that provides another link to The Snuts brand. I selected two further fonts from Google Fonts; Caveat which was used to give style to review quotes, and Roboto Slab which I used for clarity on text content.

• As a user, I want to be able to navigate the website easily
• As a music lover, I want to find out who The Snuts are (where are they from? What kind of music do the play? How long have they been together?)
• As a music lover, I want to find out about their songs and where to listen to them?
• As a Snuts fan, I want to find out when and where they are playing and how can I purchase tickets?
• As a Snuts fan, I want to be able to view pictures of the band and of gigs they’ve done
• As a Snuts fan, I want to find out if they have any merchandise for sale
• As a Snuts fan, I want to find out how to connect with them and follow them on social media
• As a music promotor and venue owner, I want to find out about the band’s popularity, fan following and reputation
• As a music promotor and venue owner, I want to be able to contact the band to enquire about bookings

I used Balsamiq to design wireframes for the Home, About, Tour, Music and Gallery pages.

There is a strong and eye catching header that remains at the top of the browser on every page to maintain a consistant style and also aid intuative navigation. The header consists of the band name, which also acts as a link to the Home page, above four dual function over-sized navigation links which navigate the website and also imprint the band’s signature stylings onto every page. Each navigation link becomes highlighted with a subtle underline when that page is in use, which assists the user in knowing their place on the website.

Like the header, the footer provides style as well as function so it is pinned to the bottom of the browser on every page. Coloured in a strong & vibrant pink, the brightest of the band's signature colours, the footer brings much needed colour and energy to the website.
The footer contains:

• a link to the band's merchandise shop https://thesnuts.bigcartel.com/
• links to the band's social media pages using universally recognised icons provided by Font Awesome
• has a link to the contact page (non-functioning).

• An image featuring the artwork from the band's first album. Clicking the image takes the user to an external website where the album can be purchased.
• Review quotes
• Links to music industry campaign's and charity appeals

• Information about the band
• Two promotional pictures of the band

• An image of the band's promotion of their 2021 tour
• Information about the tour including live links to google maps and ticket websites

• A display of the artwork used for all 6 of the band's released singles
• Live links to listen/view each song on Spotify, Apple Music and YouTube

• A display of twelve photos of the band performing live

• A carousel type feature to showcase the varies singles and album artwork
• Add more pictures to the Gallery
• Add a fans gig review section
• Add more content to the About page, possibly an interview

• Balsamiq to design the wireframes
• HTML5 to structure and present the content
• CSS3 to style the content
• GitHub to host the project
• GitPod to develop the project
• Image Color Picker to select the colours
• Google Fonts to provide the fonts
• Font Awesome to provide the icons
• Am I Responsive? to visually display the responsiveness of the website

As well as my own thorough testing, the website has been tested by friends and family and the feedback was that the site looks good and is easy to navigate, all images, links and features work well on a wide variety of devices and browsers. The full testing log can be seen here

This project was deployed to GitHub pages as follows:

1. Login to GitHub and open the repository
2. Click on Settings
3. Scroll down to the GitHub Pages
4. Below Source, change the drop-down selection from None to Master Branch
5. The automatically refreshes and the site is now deployed

I used only one branch for this project.

1. Click on 'Code' in the GitHub repository menu and copy the given URL
2. In your command prompt type 'cd' followed by the director you wish to store your repository in and press enter
3. In your command prompt type 'git clone' followed by the URL copied in step 1

• The text for the About pages was taken from the Daily Star Last.fm and Scottish Music Network
• The contact form was taken from https://mdbootstrap.com/docs/jquery/forms/contact and customised for purpose

The photos used in this site were obtained from:

• Discogs
• TotalNtertainment.com
• myTicket.co.uk
• Genius.com
• list.co.uk
• thecourieronline
• gigslutz

I received inspiration for this project from The Snuts. Thanks to:

• Precious Ijege for invaluable mentoring advice

• The Code Institute tutor suport team for technical coding advice

• W3 Schools

• StackOverflow

• The Code Institute Slack community

• Sara, Ffion and Ted for helping with testing on various devices, providing feedback and much appreciated support