JEZZEBELLE

The main purpose of this website is to provide and online presence for the band that looks sleek and professional and matches their image and music style. It should provide easily accessible information for fans such as images, music, video, news, tour dates and social media links.

UX

• A listener who heard the band on the radio / in a movie and want to hear more.
• A gig goer who saw the band live and wants to find out about more shows.
• A fan who wants to find links to the bands social media.
• A fan who wants to join the bands mailing list.
• A booker / journalist who wants to book / get in touch with the band.

Visitors to this website are;

• Looking for more info on a band they saw / heard about.
• Looking to further connect with a band they’ve heard / seen.
• Looking to book the band for a show.
• Looking to interview the band.

This website is;

• Clean, clear, concise, sleek and professional.
• Easy to navigate.
• Minimalist.
• Fast loading.

Client stories:

• When I visit this website I want to see images, hear more music and see videos of the band.
• I want to contact the band.
• I want to quickly see where and when the band are touring and if tickets for shows are required I want to know where to get them.
• I want to find the bands Twitter handle (or other social media).

FEATURES

Each page features an identical header with logo/title and navigation menu. Each page also features an identical footer with social media links.

• Header title (band logo) is the same on each page and a simple design, band name on a white background.
• Navigation menu is a large coloured button style and is used to give an app feel to the website, as well as a change from the norm. The buttons remain the same size on all screens but change location slightly to allow them keep their presence.
• Footer social media links are round style with a hover effect.

The Home page features an image carousel with three strong band images on rotation. Other than the header, this is the first thing visitors to the website will see. The home page also features a mailing list sign-up button. The Home page also has a ‘featured content’ section with three features; latest music (with link to an .mp3), latest video and latest news. Each feature contains a snippet of information on its subject, with a ‘read more’ link to view the rest of the content.

The About page features a band bio.

The Tour page features a table of upcoming shows. The information provided is the minimum needed; date, city and venue. There is one link at the bottom of the table to purchase tickets for upcoming events.

The Contact page features a contact form with inputs for name, email address and comments. It also features a check box to allow the user to specify they are a real person before submission.

TECHNOLOGIES USED

• HTML
• CSS
• Bootstrap
• JavaScript
• GitHub & GitPod
• Font Awesome
• Google Fonts
• Cloudflare

TESTING

• Site was tested on Chrome, Safari, Edge, Mozilla & Firefox.
• Site was tested on various screens / sizes including desktop, laptop, iPhone & iPad.
• All links and buttons were tested and are active.
• Code was checked here: https://validator.w3.org/.
• Site was forwarded to friends and family for feedback on user experience.

DEPLOYMENT

This website was developed using GitPod, committed to Git and pushed to GitHub.

This website was deployed to GitHub Pages in the following manor:

• Log into GitHub.
• Select the Project-1 repository from the list.
• Select ‘settings’ from the top menu.
• Scroll down to the ‘GitHub Pages’ section.
• Select ‘Master Branch’ from the ‘source’ drop-down menu.
• The page will refresh and they website has been deployed.
• The link to the website appears within the ‘GitHub Pages’ section.

FUTURE DEVELOPMENT PLANS

• Music page featuring an embedded music player with latest songs / unreleased tracks.
• Video page featuring an embedded video player using a YouTube API or similar.
• Online shop selling CD's, clothing and other band related merchandise.
• Gallery page featuring much more band images.

CREDITS

CODE

• The idea and basic code structure for the main nav menu came from the ‘Resume’ site in the code institute course content.
• The idea and basic code structure for the featured content section came from the ‘Whiskey Drop’ site in the code institute course content.
• The code for the carousel, mailing list sign-up, table and contact form is from bootstrap.
• Bootstrap modals are used throughout for buttons that don't link anywhere yet.
• Bootstrap buttons are used throughout.
• The styling of the social media links came from code institute course content.
• Icons from Font Awesome are used throughout.

ACKNOWLEDGEMENTS

• Code Institute – design ideas and code structure.
• Gerard McBride – mentor.
• Gary Burke – designer.