Approach

To start with I wasn’t sure if I would use a website builder or code the site from scratch. I spent time looking at tools such as Wix, SquareSpace and Bandzoogle and spoke to a friend, Paul, with more experience in this area.

With some initial guidance and ability to ask questions if/when I got stuck I felt able to give it a try to code it myself since it wouldn’t be an overly complex site and I could always fallback to a website builder.

It was also a good opportunity to get hands-on insight into what it takes to build a website from scratch and would therefore benefit my future design work and interactions with developers.

There were two main focus areas:

- the technical setup to build and host the site

- and the web design itself.

Technical setup

Development guides and resources

Having very little previous knowledge of html and css I relied heavily on online reference guides and trial-and-error.

The main reference guides I used during development were css-tricks’ Complete Guide to Flexbox, w3school’s resources for html and css, and online forums to solve specific challenges.

Once I had gotten my head around the different html elements and their appropriate usage this all became a lot easier and quicker.

Online development resources: css-tricks.com; w3schools.com; online forums and blogs

Technical tools

I looked at a few different DNS providers and chose GoDaddy because of their reputation, good prices on domain names and virtual private servers (VPS), came equipped with cPanel, and had a clear online knowledge base that would easily answer most, if not all, of my questions.

To write the code I downloaded and used a free code editor tool, Visual Studio Code, that was recommended to me.

When it came to publishing the site I needed to find a way to transfer the files from my computer onto the VPS. After some further Google searches I came across Filezilla, which I found easy enough to download, configure with the VPS, and use.

Technical setup: GoDaddy; cPanel; Visual Studio Code; Filezilla

Search Engine Optimisation

Once the site was published I wanted to make sure it would be easily found and would show up in online searches. I started by doing some online research into SEO (Search Engine Optimisation) to understand the mechanics of how this worked.

There were three key things I needed to do:

Firstly, I needed to ensure the site was secure using SSL certification and encryption.
Secondly, I needed to add descriptive and keywords metatags to the site code header section to support searchability.
And lastly, I needed to ensure the site was registered and indexed on both Google Console and Bing Webmaster so it came up in their search results, with all other major search engines taking their indexing from these two.

Once that was done the site was consistently the top or second search result for ‘Twenty06’ on both Google and Bing search engines.

Search Engine Optimization: Comodo; Google Console; Bing Webmaster; HTML metatags

Web design

Design inspiration

For design inspiration I looked at websites for existing bands of the same musical genre, for example Kings of Leon and Arctic Monkeys, and example band websites build on Bandzoogle.

Inspiration websites: kingsofleon.com; arcticmonkeys.com; bandzoogle.com

Things to incorporate into my design:

Minimalist design, lots of dark themes used

Focus on giving a clear sense of the band’s musical style

Obvious links to social media as followings are key for getting bookings

'About Us’ is important, but secondary

Clear view of gig dates once available - builds confidence in the band for promoters and agents

Things to avoid:

Anything overly busy or distracting from the recordings/videos

Having to click through pages or navigate to an external streaming service to listen to any music

Layout

In order to give the primary focus on the band's sound and style, the demo reel video is the first thing seen when launching the site.

Social media followings are key for getting bookings and therefore I chose to place the links to these at the top of the page, rather than in the footer, to make them as quick and easy to find as possible.

The main action desired was for promoters and booking agents to get in contact, but the conversion rate for that is heavily influenced by whether a band is already being booked for other gigs as an indication of performance experience and reputation for putting on a good show. I therefore showed the existing bookings straight after the demo reel video followed by the information on how to book the band to build confidence and increase likelihood of receiving booking enquiries.

As an 'about us' section was seen to be important to have available but secondary to the other information I placed this at the bottom of the page so as to not distract from the higher priority elements.

I chose to have a single-page site to minimise navigation and keep the structure simple.

UI style

I decided to emulate the widely used minimalist, dark theme but pick up on the blue from Rob’s guitar as the primary colour as a personalisation of the general style.

I wanted to keep the design very simple and therefore chose not to include any secondary or accent colours.

The font for the band logo, Megrim, was already selected so I chose to reuse this for the tour dates section since the format matched (“Twenty - 06” vs “month - dd”).

When it came to other fonts I wanted to invoke a casual and relaxed feel with links back to mid-2000’s early web design to match the band’s musical style, hence selecting Lobster for the headings/tag-line, Livvic for the main body, and Montserrat for the CTA.

Accessible and responsive design

As the intended audience for the website was a wide range of promoters, booking agents, and music enthusiasts, I felt it was very important that the site is accessible to all and work well across a wide range of devices.

To do so I took the following steps:

Checked all colour combinations met the WCAG 2.1 level AAA contrast ratio of at least 7:1 by using an online colour checker.
Added alt texts to all images.
Used ems, rather than pixels, to define text sizes, margins, etc. so that this would adapt to the user’s settings.
Used wrap flex-boxes to ensure all context adjusted based on available window size to remain easily viewable.
Adjusted the styles for devices with max-device-width: 600px - increased font sizes, added underlines to indicate links, and used larger icons for links to social media.

Takeaways

The huge range of new things I learnt was the main reason I took this project on - from setting up a new domain name and virtual private server with SSL encryption, to search engine optimisation, to html elements and css styling, to accessibility and responsive design.

If there was one main thing I would do differently in future projects it would be to ensure the design is evolved further before starting to code as I did end up recoding a lot of different parts of the site a number of times through different design iterations and reviews with Rob.

I definitely believe that having done this project has increased my understanding of what is involved in web development which will support me in having meaningful discussions with developers in future projects.

Thank you!

Thank you for taking the time to review this project. Any feedback is always appreciated.

Equally, if you have a project you'd like to work on together do please get in touch.

See other projects ->

Promoting the new sound of the mid-2000's

Responsibilities

Tools

Duration