Interactive Design - Final Project: Single-Page Artist Website

23.10.2023 - 04.12.2023 / Week 09 - Week 15
Ilhan Rayan bin Khairul Anwar / 0361205
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project - Single-Page Artist Website

---

LECTURES 

Lecture Notes

---

INSTRUCTIONS

---

PRACTICAL

For our final project, we had to create a single-page website dedicated to our favourite artist. This project will help us develop our web design and development skills while allowing us to showcase our passion for the artist of our choice. The artist in question could be any kind of artist, a musician, painter, actor, or and creative individual / group so long as we have a genuine interest in their work.

Our website had to contain the following:

Header: The artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Biography: Include a brief biography or description of the artist's life and career.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.

Originally, I was going to do my website based on my favourite band Testament, a thrash metal band from America but I realised that they already had their own website and I didn't want to copy them or create a worse version so I scrapped that idea. My second idea was to design my website based on my father who's a painter and filmmaker, but I felt that it would be a bit too on-brand for me to do my father so I decided to do second favourite musical artist Ace of Hearts, a band started by my favourite YouTuber Alpharad.

Figure 1.1: First Five Sketches, Week 7 (15/9/23)

I started off by creating five sketches depicting what I had in mind for my website as I wanted to have the layout be a lot more basic so that I don't have to suffer as much as I did for my Project 2. I tried to follow along with the requirements but during the development process I forgot to include a tagline for the artist. I also made some rearrangements with how I was going to present my website, I combined biography with introduction and gave the "Admiration" component it's own segment in the website alongside a music video from the band.

Figure 1.2: Mood / Reference Board, Week 7 (15/9/23)

Figure 1.3: First Prototype (Procreate), Week 7 (16/9/23)

After creating the mood board seen in figure 1.2, I designed my first prototype in Procreate since I was already familiar with the program and just wanted to see what I could create. As seen in figure 1.3, I had to split my website in half since creating one long website would've crashed my iPad most likely.

I presented this to Mr. Shamsul and he told me that the sketches were great but my prototype wasn't that great and that I should recreate it on Figma instead. As I was beginning to design my website in Dreamweaver, I noticed that Mr. Shamsul provided a sample zip file containing a basic website layout for us to practice with and the layout of it was surprisingly almost the exact same layout as I had in mind so I just decided to use it for myself since the basic code was already there, I just needed to change everything to suit what I wanted.

Figure 1.4: Introduction Screenshot, Week 11 (6/11/23)

I started off by changing the text in the header to suit what I wanted as well as changing the colour scheme to a dark-blue and light-blue colour palette since blue was Alpharad's colour and were two of the colours in his first album, Frozen in Time which was my favourite album.

Figure 1.5: Header Hover, Week 15 (7/12/23)

One thing that I noticed was that in the CSS file, you could change the colour of the text whenever you hovered over it so I decided to change it to the red in Ace of Heart's logo to add a bit of contrast. I was originally going to use the soft blue in the website as well but I decided that the red would look nicer with the white to match the logo. As for the logo itself, I traced out the two hearts seen in figure 1.2 in the top right and recreated them in Illustrator before exporting it as a png and adding it into the header. Later on I repeated this process but with the Twitter / X, Instagram and YouTube logo since I didn't want to have to deal with the favicon process all over again.

The hardest challenge for me was trying to make the discography / image gallery section of the website as that required the most amount of coding. My two main sources for advice was ChatGPT and google since both provided good examples and solutions when I needed them and to my surprise, ChatGPT is pretty helpful with its codes sometimes; not all the time as they often forget small bits of code in their samples. After presenting my progress so far to Mr. Shamsul he informed me to just use the image gallery code he provided in Google Classroom so that I can get this section done.

Figure 1.6: Image Gallery Code, Week 15 (7/12/23)

At first the image gallery code he provided for us had all of the images together in one class but when I input this into Dreamweaver, it resulted it a misshapen image gallery that didn't look like how I wanted. But to my surprise, the code function as a carousel as well whenever you clicked on an image which was nice to have as well.

Figure 1.7: Misshapen Image Gallery, Week 15 (7/12/23)

After doing some googling I realised that there were multiple mistakes in the code as well as areas that needed it so I decided to split my html code into two classes rather than one so that it would function more effectively. Once it was fixed, I made some small adjustments to the code and added a hover feature to the image gallery where I simply reutilised code from the headers and changed it so it would scale instead, making sure that when you hovered over the image, it would perfectly line up with the one next to it. 

Figure 1.8: Improved Gallery w/ hover coded in, Week 15 (7/12/23)

One issue that came up when I was adjusting the website to be responsive was with the YouTube video that I added into the website. No matter what code I tried and inputted the video would never become responsive so I had to accept the issue and move on with it since it works fine if you try and use it in horizontal mode.

Figure 1.9: Video Responsiveness Test, Week 15 (8/12/23)

Once everything was nice and looked like how I envisioned, I transferred the project file into Netlify and uploaded it to Google Classroom for submission.

Final Website Link: Week 15 (8/12/23)

https://ilhankhairulanwar-project3.netlify.app/

---

FEEDBACK

Week 9

Using the image gallery as the discography is a good idea and I should try and create an image gallery instead of a carousel since it's easier. Try and add some more stuff to the contact section. Recreate the prototype in Figma because Procreate won't work well for this project.

Week 14

The design so far is good but get rid of the underlined titles, just keep them as they are. I would suggest doing an image gallery instead of a carousel as I already provided a link that already has the code so just copy it into your HTML and CSS and change the images for yours.

---

REFLECTION

Experience

As much as I am not a fan of coding in any way, I found this project to be surprisingly fun which may have been in part due to my admiration for the artist. But also because creating the code and experiencing trial-and-error until it works is surprisingly an entertaining part of the whole process. I definitely improved from where I was with project 2 and the quality in my work clearly improved by a lot, especially since I tried out other codes and added in elements for fun despite not needing to.

Observation

As I was coding the website, I noticed how many codes go into ensuring that the website we design is stable and functions properly and how many individual lines are edited over and over again until one part acceptable before moving onto another section and redoing the whole process all over again. At first I thought this would be annoying but over time I grew to accept it, most likely because I was zoning out and letting myself function on autopilot essentially while I listened to music.

Findings

I found this project to be very educational as I feel I learned a lot more about coding as well as improved by a large amount with my skills compared to what I made in Project 2 which surprised me. While I doubt I'll use these skills much in the future it is quite handy to have an understanding for some of the processing work as well as how website design works as a whole.