Mastering Service

Putting a lot of time, money and effort into a music production, just to finish it off with a bad mastering can be heartbreaking.

This website target users (like artists, producers, record labels, etc.) in need of professional mastering of audio files for commercial use.

User Stories

All music program offers a form of master preset for a user. The problem with these plugins and presets are that they don’t consider the character of every individual audio file. Every song doesn’t sound the same or have the same need. You most lightly end up with a distorted, unleveled file with frequencies popping up throughout the audio file. Then these audio master files get sent to radio/streaming sites/etc. Here the audio files once again get processed by standard presets the publishing platform uses.

Working with a professional mastering engineer that can handle client’s audio files with the right care and prepared them correctly is priceless. Every project is different. It’s a delicate process between engineer and client. The engineer has to balance the wishes of the client with what is physical possible form the final mix.

The goal with this webpage is to target users in need of professional mastering. To make the Mastering Engineer look appealing to them by showing the variation of music she has worked with as well as providing background information of her. Also explain a little about the process of how to book her, prices and contact information.

As a user, I want to see the previous work of the master engineer, so that I feel confident in my decision to choose the mastering service.
As a mastering engineer, I want the client to easy access, listen and see my previous work, so that they feel confidant while working with me.

Home Page Portfolio Page

As a user, I would like to know what equipment the mastering engineer uses, so that I will know my audio files is being processed professionally.

Studio Page

As a user, I want the website to give me price information, so that I would know the price range of my project.

Price Page

As a mastering engineer, I want the booking request to be easy for the client, so that they will book me for mastering.

Booking Page (Booking Request - To see the booking request you have to click on 'Booking Request' button on the Booking Page)

As a user I would like to know the background of the engineer, so. I would feel more secure and comfortable working with her.

Engineer Page

As a user, I want to have easy access to contact information, so I won’t change my mind consider booking the engineer.

Contact Page

To view the original wireframe with description of every page here is the link; Original Wireframe Project

Features

Every page has a navbar with a logo and links to all the pages. At the bottom address, email links, and social links.

Existing Features

Home: User can see a slideshow presenting of different artist engineer worked with.

About: Users can read about the engineer and see a picture of her.

Portfolio: More extended portfolio where the user can click on links to listen to music samples.

Studio: User can see pictures of the studio and what gear the engineer works with.

Price Page: Here the user can read about the prices of hiring the engineer.

Booking Page: In this page user can read information of how to send a booing request. At the end there’s a button to a pop-up form for the order. Important to fill out all the fields or the user gets an error massage.

Contact Page: User gets information on contact information. The emails are links to send emails to the engineer. The page also provides phone numbers and address information.

Features Left To implement

The page is built to be updated with more sample projects and more pictures. Possibilities to develop payment solution, dropbox, music player, etc.

Technologies Used

Bootstrap - Used for carousel function, image gallery, order form with validation, modal response message, table for price list, some of the navbar code.

GitHub project - Resume - The code for social links from the Resume CI project but modifyed.

GitHub project - Beyond Bootstraps - Background style with dark transbox and navbar ide from the whiskey CI project but modified.

Google Fonts - Webpage fonts from Google Fonts.

Font Awesome - All the projects icons are used from Font Awesome.

W3C - Guides on how to put text on pictures.

jQuery - To help the effects and modal fo-rms function. For now and in further development.

Popper - To help positioning the material for now and future development.

Bootstrap CDN - To support content to run the bootstrap code implemented.

Testing

Home Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps it’s proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

About Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps its proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

Portfolio Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). Here you can see photos of artist that the engineer has worked with. In the right bottom corner of every picture there is a link to the music she has done with the artist. In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps its proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

Studio Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps its proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

Prices Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps its proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

Booking Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). Here you can make an order;

By clicking on the button below the booking request information a booking form pops-up.
Fill out all the fields or you will get an error message.
You will get a verification pop-up message on the screen that your message have been sent.
Then you click Submit.
This booking form is static so you will have to close it manually. Either;
- By clicking at the ‘x’ in the top right corner, or
- By scrolling down to the bottom of the booking form and click ‘close’.

In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps its proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

Contact Page: The navbar links are working to the other pages as well as in the toggler (hamburger menu). The email addresses in the body works and opens to users assigned email account. In the footer, both of the emails open to your mail account to send emails. All the links to engineer social media works. The view keeps its proportions no matter the size of the window. In the smartphone view every link works as well and none of the media Is stretched.

Deployment

To run the project on a hosting platform like Git Pages;

Go to the MS1-MasteringService project site in GitHub.
Go to settings.
Scroll down to GitHub Pages.
Under source you click on ‘None’ and select ‘master’.
Make sure the icon to the right says ‘root’ so all the project information gets published.
Push ‘Save’.
The website is now published (under the GitHub Page label is the link to it.

To run the project local;

Go to the MS1-MasteringService project in GitHub.
On top of the project files you have buttons like; master, Go to file, Add file, Code, etc.
Push the ‘Code’ button.
On the right side of the https://github.com/..... You will see an icon of a notepad.
Click on the notepad icon to copy the file address.
Now go to your terminal and write “git clone (paste in the project code)” and run it.
Double click on the index.html.