Fundamentals of Big Band Drumming

Portfolio Project 1: HTML/CSS Essentials

This project is built as part of the Code Institute Full Stack Software Development course. For this course, Dirk Ornée had to built a first Portfolio Project. He choose to built a project that combines his knowledge as a professional musician, with his knowledge gained troughout the course.

Live Site

Repository

https://github.com/DOdrums/PortfolioProjectOne

Fundamentals of Big Band Drumming
UX
Credits
Technologies used
Testing

UX

Business goals

The main goal for this project, is to develop a valuable resource for drummers and conductors, to learn about big band drumming. The website should be able to provide a helicopter view of what big band drumming is like, how it should be approached and what it should sound like. This should help conductors in giving pointers to drummers during rehearsals and should improve the playing of big band drummers who aren't very experienced yet. The second goal is to show my competency as a developer using HTML & CSS.

Target Audience

Drummers and Conductors are the main target audience, since the website really aims to help them specifically in understanding the function of a big band drummer better. The information is also presented in a way, that it is assumed you already have knowledge of music and big band music specifically. However, anybody with some knowledge or just a general interest in big band music should be able to enjoy this website and learn something.

User Stories

As the owner:

I want to share my knowledge about big band drumming and keep everything I have learned over the years in one place (the website).
I want the user to really dive in, get interrested in the topic and get inspired to do more research by themselves.
I want the user to learn the fundamentels of big band drumming through this website, so they can use this information in a pragmatic way to develop their own style and preferences.
I want to build a relationship with users, where they can contact me through the contact form if they have more questions, so I can help them out with anything drumming related.

As a new user:

I want to navigate the site easily and intuitively, without having to wonder what the purpose of the site is.
I want to be redirected through the pages in an intuitive way, having a logical hierarchy to follow in order to learn everything I can from the website.
I came to this website specifically to learn about big band drumming, especially about topics within big band drumming which are hard to find recources for.

As a returning user:

I want to return to the information, to see if I'm already incorporating everything in my playing or conducting.
I want to re-listen to the audio, to see if now that I have tried to use the information in practice, I start to recognize more of the information learned in the audio itself.
I want to contact the author, for any further questions I have.

Structure of the website

The website is designed to give a good hierarchical flow. This means that after reading the homepage, the user will go to the second page (Reading & Playing) and read through this information. On the bottom of that page they will be prompted to continue to the Three Drummers page, which is the logical place to continue, as it builds on the information read in the Reading & Playing page. The pages however can also be used just by themselves, they both contain enough information to stand on their own. Furthermore, the website is made fully responsive, so it functions on any device. That being said, as you'll be reading sheet music on the Reading & Playing page, a bigger screen is more fitting for the type of content.

Color Scheme

The Color Scheme was chosen to represent a somewhat old fashioned look, especially since a lot of the images are black and white, which could look weird on a very modern looking website. To make the website not appear boring, a bright yellow (Safety Yellow) was used. The main color palette can be seen below:

Of this color pallette the following colors were used:

Eerie Black
Cultured
Safety Yellow

A secondary color palette was used for extra colors:

Of this color palette the following colors were used:

Davy's Grey
Pale Silver

Features

Before this project was started, a MoSCoW-method style table was made to see which global features should be added and which features would be omitted or added at a later date. You can see said features in the image above. Let's have a look at the features that actually made it to the website:

Home Page:

The home page is where the user will learn about the project and it's function. Right at the top is a nav bar, making clear which sections the website is divided in. The current active page will be underlined in yellow and user will get a conformation that other links work when hovering over them, by temporarily having hovered link underlined yellow as well:

Right below the nav bar we find the title and cover text, with a captivating hero-image behind it. The cover text is written short and concise, but with a clear explanation of the website's main goal:

Next is the About Me section, which explains quickly who the author is and why he wrote this website. You'll also see a portrait picture, to put a face to the name:

Underneath the about me section, you'll find a video of Buddy Rich playing an impressive drum solo! This video is meant to attract the attention of the user and make them want to learn more about big band drumming:

Finally we have the footer section. This footer section features four socials links, in case user wants to get to know more about the author:

Reading & Playing page

The reading and playing page starts off with an introduction explaining that on this page you will learn how to interpret notes as a big band drummer. It also mentions you should already know how to read sheet music in order to take full advantage of the information on this page. There is an image of famous drummer Sonny Payne with a hyperlink to Wikipedia in case you want to learn more:

Next, user will start reading all about big band drumming and get sheet music examples to see what a drum sheet looks like, with explanations about what everything on the sheet means:

Sroll further and user will find the first audio example. These audio examples are used to give a live example of what the drumming sounds like and to connect the theory to the practice:

At the end of the page multiple, lists are introduced to sum up some simple best practices for playing big band music. These lists give the user a clear overview of what is important to remember about big band drumming and is a good place to return to a second time, when refreshing their knowledge about the topic:

Notice that on the side of the page, there is a little button with an arrow in it. This button will bring you back to the top of the page when clicked:

Three Drummers page

The three drummers page is similar in layout and features to the Reading & Playing page, sporting an intro, text and audio examples. On this page though, instead of sheet music, you'll find nice oversized images of each drummer covered on this page:

Contact page

On this last page, you'll find a contact box where the user can input their information and ask the author a question. For the author's convenience, a 'Profession/Instrument' box was added, so author can tailor make his response to any questions.

Future Features

Styles

In the three drummers page, three different ways of playing big band music are discussed. However, these three different ways all fall inside a quite similar big band style. There are different styles of big band music and playing, that fall outside of my expertise, but could be added in a seperate page to at least familiarise the user with them.

Sounds

On the three drummers page, the drum kits that are used by the drummers are briefly discussed. A seperate page dedicated to the sound of several different drum kits kind could be made, covering how to tune your drum kit in different ways as well as what to look for in a good jazz cymbal.

Technique

This page would be specifically for drummers and discusses what kind of drumming techniques to use to get a good swinging feel and sound.

Hamburger Menu

Since Javascript wasn't used inside this project, a hamburger menu couldn't be made. In a future release (outside of the course), this could be added for better usability on smartphones.

Differently sized sheets for smartphone sizes

Although the sheet music is readable on a phone when held in landscape mode, it doesn't read nicely when in portrait mode. This could be mitigated by cutting up the sheets in smaller portions, and aligning these portions underneath each other. However, with the sheets that are currently used, this could not be done, since the resolution was not high enough and the pictures were slightly warped (new sheet music could be custom-made to mitigate this).

Working Contact form

Although the contact form is build up properly, there was no back-end section in this project. This means the information is not sent anywhere. In a future update this functionality could be added, so the author actually recieves any input from users.

Credits

To be able to built this project in gitpod, I used the template made by Code Institute, as found here: full template

Other websites I used for inspiration and general coding examples and knowledge:

Code

Nav bar inspiration and code for hero-image animation was taken from the love running walkthrough project
The CSS code margin-left: calc((100% - 600px) / 2); to center paragraphs on page 2 and 3 was taken from the NYtimes website, which uses this code to center text in their articles
The CSS code to make the youtube video responsive for screen sizes 767px and under, was taken from this website: make youtube video responsive
The javascript code for the back to top button was taken from this website: https://codeconvey.com/floating-back-to-top-button-html/

Images

Several images were taken from other website:

Reading and Playing page

Sonny Payne image

Three Drummers page

Contact page

Count Basie Big Band image

Any other images displayed on the website were shot by the author.

Media

Audio examples were taken from author's personal music library.

Technologies used

HTML - for basic structuring and semantic markup of the document.

CSS - to provide styling to all the pages.

Preview (Mac) - for converting images to smaller file sizes.

Color Palette generator for generating the color schemes.

Font Awesome - for items used in footer and back to top button.

Awwwards - for the heading font.

Gitpod - used to connect a browser based VScode to github.

Github - used for version control and deployment of the website.

Multi Device Website Mockup Generator - to create an image of the website shown on different devices.

Testing

Functionality testing

Throughout the development of this website Chrome developer tools was used to solve issues and try out new styles. Since you see the results immediately, it is a faster way of working than adding code to your project and refreshing your page after every step. Every once in a while I'd open the website in Safari, to make sure it was also functional in this browser, since Safari is notorious for having the worst HTML support.

Compatibility testing

The site was tested by myself on an iPhone 8 and a 15 inch Macbook Pro. Friends and family also tested the website on Windows Desktops, the original (small) iPhone SE, and Android devices. The website was also tested in Chrome, Firefox and Safari. No problems or responsiveness issues were found.