Starstruck Music Festival

Visit the live prototype.

Website Development

Website Design

Branding Design


Project Introduction

Starstruck is a theoretical music festival that was created for my Level 3 Media course. The unit required to make numerous marketing materials, including posters (lineups and headlines) and creating a fully working and field-tested 3-page website. The approach I took to create the website was by designing initially inside of Adobe Experience Design then moving over to Visual Studio Code & GitHub to code the website in of HTML and CSS (programming languages).

Starstruck Music Festival Home Page

Branding and Design

The brief for this project was to match a typical music festival house theme with suitable fonts and colours to the genre of the festival. Indie music follows a bold and more friendly tone which is represented by the stylescape chosen. I browsed through Google Fonts to find a suitable typeface that would represent the brand well. I decided on using Mansalva as the heading of ST*RSTRCK and using Assistant for any paragraph/secondary text.

Colour palettes and typography used in the Starstruck Music Festival design.

Developing the Design

The layout of the website had been heavily based around the use of images to be engaging to appeal to the audience more heavily. Following the design language that is common around other festivals, such as Reading, Glastonbury and Download, I stuck with the use of imagery and increased the weight of the fonts to draw attention to particular parts of typed content. I wanted each page to be unique, resulting in them each having different background images/videos.

A key part of festival websites is the booking system, which I developed last to ensure it had all the necessary inputs and matched the rest of the website. I decided on having the selection page of the tickets matching the selection page of the merchandise.

Design blueprints of the Starstruck website.

Website Optimisation

Another point on the brief is to ensure the website loads quickly and is responsive to all major devices (desktop, laptop, tablet and mobile). As I coded the website, I was able to access all the CSS classes and add the appropriate media queries to change the way that each element looked individually for each device size.

As the website was custom coded, I could add or remove any unnecessary code that is baked into website builders such as Wix and most stock WordPress themes. By using static HTML, the page loads quickly and is efficient on any device with an average broadband.

After testing the website on 2 reputable testing websites, GTMetrix and Pingdom, the website was reported at an A 99% speed.

GTMetrix Score of 99% showing outstanding page loading speeds.