I was tasked to design and build a responsive website for a music artist, with a focus on the implementation. I chose Avicii because I have been a fan of him for years. Sadly, he passed away in 2018, so I wanted to create something in memory of him.
My process involved creating wireframes and mockups in Figma, programming the website in Visual Studio Code, and deploying it on Github.
There are two stand-alone official websites that already existed for Avicii: the official site mainly hosts the Avicii Memory Board and his Instagram photos; the official store sells Avicii-related products. They combined still don’t offer comprehensive resources to everything related to Avicii.
Therefore, I researched what resources were available on the internet and decided to host them in one place, which include facts about him, music, photos and videos, merch, and concert history. With a list of information that my site needs to cover, I began wireframing and making mockup screens.
Considering the style of the official websites, his character, and the loss and grief associated with his death, I decided on a dark theme. I also added a pop of color, yellow, for his vibrant music style.
Let’s take the Concert History page as an example. By default, the page shows a table with 11 rows. When a user clicks the “SHOW MORE” button, the table expands to show more concerts and the button becomes inactive.
This was implemented with JavaScript in the following steps.
To allow users to listen to music and watch videos directly on the site, I choose to embed the resources. This was implemented with the HTML <iframe> tag. Spotify’s Embed for Music widget has a dark theme that fits perfectly with my site, compared with the light theme of Apply Music.
On the Merch page, users can filter items shown on the page by clicking the tab labels. The category that is active should have an underline below the label to indicate that. These two features made it necessary to assign IDs to merch items and classes to categories in HTML.
Using JavaScript, I made certain items visible by matching their IDs with the class of the chosen category and hid the rest. Then, I added a bottom border to the chosen category while removing the other ones to indicate the active state.
This project allowed me to make a concrete connection between design and implementation and develop a deeper understanding of the importance of consistency in colors, grids, spacing, and UI components. I also practiced my skills on color accessibility by following the WCAG AAA standard.
It was extremely rewarding to see my design deployed as a live website which I coded line by line.
On the coding side, there are certainly opportunities to make my code cleaner and to perfect the details of the site. In addition, although I used the Bootstrap framework to enhance responsiveness, I did not focus on building an ideal experience for mobile devices, and thus this could be further optimized.
In terms of design, I would like to explore ways to incorporate motion, which will both support usability and create a more delightful experience.
