Upon Wonder - The Band

This is a website to promote the fictional band Upon Wonder, including videos, photos, information about each band member, tour dates and a contact page to get in touch with the band. The goal for this page is to please both new and existing fans from all over the world to satisfy their individual need of reaching the information they want when visiting the page.

My motivation for this web page comes from my own need to quickly and easily find the information I am looking for about a band I like. This include a list of uppcoming tour dates and where to find tickets, videos and images of the bands latest performances and a contact form through which I can send my complimenting letters of admiration to tell the band how big of an impact they've made for me (Even though they might now answear, because they're a band, busy doing band stuff).

This is the first Milestone Project in Code Institutes Fullstack Developer Education, and the requirements are to make a responsive website using HTML and CSS3. This project was also made with Bootstrap which was an option to use in the project as well.

View the live project here!

UX

The main purpose of the website is to break all information into smaller peaces in to their own pages to make it easier for the visitor to find it without getting lost in sections he/she does not want to go to. The ideal visitor for this web page is not only fans who already know about the band, but also people who are potential fans and people who want to book the band for a show.

The business goals for this website are:

Build awareness about the band to new visitor/potential fans.
Drive ticket and merchandise sales.
Increase the number of views on the band's Youtube and Vimeo channels.
Increase the number of streams on the bands Spotify.
Increase traffic to the band's shared and personal social media channels.
Make it easier for companies that want to book the band to get in touch with them.

UX goals

Make navigation easy and clear for any visitor with good UX structure.
Make all information on the page easy to find and understand.
Customize the web page to be fully responsive to fit all devices.
Reflect the band's image through good color choices and fonts that accompany to all pages of the website.

User stories

As a new visitor I want to get easy access to information about the band, each bandmember and where I can listen to their music.
As a visitor I want to get easy access to information about uppcoming tour dates and where I can buy tickets.
As a fan of the band I want to be able to buy merchandise or be directed to where I can buy it.
As a fan I want to get access to view high quality images and videos of the band.
As a fan/new or returning visitor I want to get an overall good feeling of the bands image throughout the whole page.
As a fan I want to be able to send a message to the band.
As a potential client who wants to book the band I want to be able to send a message with prioritization.

Design Process

Strategy plane: My strategy for this website was to offer a website with clear navigation to the information of which the visitor wants to reach. The original strategy plane was based on the first five user stories above. The aim was to give a clear picture to the visitor about the members behind the band, their image and what they do while making it fun to navigate through the website.
Scope plane: The key features I wanted to add to my website was information about the members and images of them each, a gallery with photos of the band performing and a clear list with information about upcoming tour dates followed by a link to a ticket reseller. All of these features would mimic a real band website to make it look realistic.
Structure plane: When the key features was set I decided which pages I was going to add to my website. I originally decided to design my structure into four pages: an index page, about page, gallery page and a tour dates page. The index page was going to activate the visitor and welcome them while the other pages was going to give the visitor more context in the form of information along with images.
Skeleton plane: As mentioned in the structure plane, I wanted to make the index page a little different from the other pages. I knew I wanted to make their visit more of an experience than just showing plain information straight ahead. I decided that I wanted to cover the index page with a picture of the band, with the band logo and a button on it that the visitor gets to press to enter the 'website'. The button would link to the about page. The purpose of this structure is to evoke a feeling that the world of the band awaits on the other side of the page. The rest of the pages was going to have a footer at the bottom of the page with social links and a fixed navigationbar at the top with links to the other pages. The navigationbar was going to be visible there at all time to make it possible to quickly navigate to another page at any time.
Surface plane: When all the structure of the site was set I just had to come up with the theme for the website.
- I started with browsing Unsplash where I searched for potential images of people who looked like they could be in a band, and found this picture. After that I could finally decide the rest of the theme for the website.
- To come up with the color scheme for the website I used the generating function of Coolors. The colors I was going to use to reflect the bands image throughout the entire page was the following: #0A014F (The dark blue color to use in navbar and footer) and #DB3069 (The bright pink color to use on all buttons)
- The logo was then made with the website Hatchful.
- The two fonts that I was going to use throughout the whole website was Unica-One and Roboto.

Wireframes

Changes I made throughout the project

When I started to build my website in HTML and CSS I started to notice flaws in my structure. Since this whole planning process as a developer is new to me, I realized quite quickly when I started building the website in code that the structure I originally made in Wireframes would not last in the end. The lack of continuity of the different pages of the website was clear which led me to make changes to my original idea throughout the project. During the project I also chose to add two more user stories (Number 6 and 7 in the User Stories list) which then led to the creation of a fifth page. The changes included the following:

Adding a fifth page, the contact page, that was going to include a form to make it possible to contact the band.
Adding a footer to the index page, to make the access to social links easier without having to go to the next page.
Move the navbar links to the right to get a better balance to it.
Adding a hero images followed by a page heading text to all pages for a continuous feeling throughout the site.
Change the image gallery layout to an image slider working as a hero image for the gallery page. For a cleaner look.
Adding videos to the gallery for some variety in the media content.
Making the list of tour dates cover the whole page with a white background.
Adding a map to the tour date page.

Features

The project has a total of five pages. The index page, about page, gallery page, tour dates page and a contact page. Four out of the five pages features a responsive navigation bar that contains the logo to the left and four options of which page the visitor wants to go to.

Each page has a footer with social media icons linking to the bands social media pages (As the band is fictional, the links only leads to the social media start pages.), and a text of copyright information.

Index page

The index page contains of an image of the band that covers the whole viewport, the logo, a heading text and a button. When you click the button you will go to the about page.

About

The Tour Dates page starts of with an alert section on top of a hero image of the band to inform the visitor about the new merchandise that is to be released. The hero image also has a logo on top of it (not visible on phone devices). The page includes a heading text with the title of the page, information about the band itself and also a presentation of each band member together with an image of them each.

Gallery

The hero image section in the gallery acts as an image slider, with four different images from different concerts. The page includes a heading text with the title of the page and some text under the heading that contain links to the bands Youtube and Vimeo. Next there is some media content of three videos with a descriptive text about each video.

Tour Dates

The Tour Dates page starts of with an alert section on top of a hero image to inform the visitor about the cancellation of the 2020 tour. The message also includes a link that will redirect them to Ticketmasters webpage with information regarding the cancellation and rescheduling of live events. Under the hero image the list of tour dates for the year of 2021 is presented. Each performance follows by a pink button with the text "tickets" that leads the visitor to Ticketmaster where they can purchase tickets to the shows. Under the tour dates list, there are two columns where the one to the left contains a text that encourages the visitor to check out the map in the second column to find out where the next show will be.

Contact

The contact page contains of a hero image followed by a heading text with the title of the page and some information about how to get in touch with the band. Next follows a form with required input fields, a checkbox and a button to send the message. In this case when you press the send message button an alert sign will appear that tells the visitor that the bands inbox is currently closed.

Features Left to Implement

To make it possible to send a message that actually goes somewhere.
To make a page with the bands merchandise that the visitor would be able to purchase.
To make it possible for visitors to sign up for a newsletter subscription to get regular newsletters with information about upcoming albums, tours and other exclusive updates and information from the band.

Technologies Used

Languages

HTML5 - language for the project.
CSS - for styling the HTML code.

Libraries

Bootstrap - mainly used for the responsive grid system byt styled accordingly to the theme of the website.
FontAwesome - all icons on the website.
Google Fonts - used for the "Roboto" and "Unica-One" fonts.
Unsplash - all images used on the page (credits to the photographers further down).
jQuery - was used for the built-in Javascript to work in Bootstrap.

Technologies

Gitpod
Github
Google Chrome Developer Tool (built in the Google Chrome browser)
Firefox Developer Tool (built in the Firefox browser)
Balsamiq - used to make wireframes
Coolors - to generate the color scheme for the page.
Hatchful - used to create the logo for the band.
Embed Google Maps - used to embed google map address.
Vimeo - used to embed videos in gallery.
TinyPNG - used to compress images.
Free Formatter - used to format the html code.