Breanna Shields
Breanna Shields

Elektrik Eel Web Design and Development

Student Work

The website view on laptop The website view on tablet and mobile

Brief

I was required to design and code a homepage for upcoming music festival: Elektrik Eel (fictitious). The genres of the festival were primarily aimed at the electronic music scene for a user base aged between 20 and 35 years of age. The client provided mood boards as well as the brand logo, images, and mandatory text and required me to create HTML and CSS to display the content in a sophisticated manner. The client also required that the site be fluidly responsive for mobile and tablet, and a jQuery script be added to create a drop-down menu (for mobile) that would open/close on click.

My Contribution

I initially created a wireframe of the webpage design using Figma so I had some direction when I began coding. I also needed to consider how the site would appear on smaller screen sizes, like mobile and tablet. For this site, I found that I could use the same layout for desktop and tablet if I wrapped the desktop section in a container so the background would show on the left and right sides of the page.


I came up with the purple, black, and white colour scheme by colour picking from the provided imagery. I then added the image that matched those colours the closest to the hero section of the page. I added a bit of flair to the page title and headings with a font called ‘red rose’, which fits perfectly into the electronic theme of the website. As for the body copy, I chose ‘roboto’ as I wanted the text to be as readable as possible for the user. Adding to the flair of the headings, I added a flicker effect to the page title, which I found online and tweaked to fit with the style and theme of the page.


I found this project to be challenging, addictive and enjoyable, and hope to work more on websites and code in the future.