Starstruck Music Festival

Visit the live site

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).

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.

Starstruck Music Festival Home Page Starstruck Music Festival Website 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.

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.

Get in touch!

Are you interested in working on your digital appearance or have general questions? I'm available to contact via a number of platforms. For business enquiries, contact me on LinkedIn or via email, or if you want to contact me for a non-business related matter, direct message me on Instagram!


Contact Me LinkedIn Instagram
Hey, this website uses cookies! Is that okay? Sure!