Interactive Design / Project 3

30/10/2023 - 10/12/2023 /  Week 10 - Week 15

Iman binti Kamarudin / 0364014

Interactive Design / Bachelors in Design (Hons) in Creative Media

Final Project: Creating a Single-Page Website for Your Favourite Artist

---

---

LECTURE

For our final project, we first had to decide on what artist to focus on. I chose Alex G as I was currently listening to a lot of his songs. Afterwards, I sketched out a few layouts to see which design I liked more and felt achievable for me to complete in time and that I would still be satisfied with.

Fig 1.1 - Wireframe Sketch 1

Fig 1.2 - Wireframe Sketch 2

Fig 1.3 - Wireframe Sketch 3

Fig 1.4 - Wireframe Sketch 4

Fig 1.5 - Wireframe Sketch 5

I chose the last sketch as my final design. I then proceeded to go on Pinterest and find a few pictures that I felt emulated the feeling and vibe that I was trying to go with for my website. I also tried pinning a few colour palettes from movies that I liked.

Fig 2.1 - Pinterest Inspiration Board

Once I felt like I found enough references, I went onto Figma and created a few layouts with different colour schemes. I mixed a few different fonts together since it felt very...indie? and amateur but in a intentional, cool way. If that makes sense.

Fig 2.2 - Figma Prototype 1-3

I really struggled finding a palette I liked that wasn't too harsh on the eyes but also really felt like 'Alex G' to me. I wanted something warm and nature-y but also eclectic. In the end, I went with a few shades of brown and beige to keep it simple.

Fig 2.3 - Figma Prototype 4-7

After finalising my prototype, I started coding. I struggled a lot more with this part than my past assignments since it seemed like the divs and images weren't behaving the way I wanted them to.

Fig 3.1 - Minimised Window Website Screenshot

I had an issue where there was extra space on the right side of the screen and there was a horizontal scroll bar. Additionally, when you clicked on the jump links, the navigation blocked the headings of the section.

Fig 3.2 - Website Navigation (& Issues)

The image in the biography section I edited myself in Procreate since I wanted it to look like he had been cut out and scrap-booked together. I was particularly inspired by the way the character Hobie Brown is animated in Across The Spider-Verse. 

Fig 4.1 - Biography Header Image

Fig 4.2 - Reference Image

After some feedback, I changed the social media icons to be more cohesive with eachother. I also removed the underline and increased the font size for the description in the home page. 

Fig 5.1 - Adjusted Desktop Website Screenshot

I added space to the bottom of the navigation bar so it felt less cluttered

Fig 5.2 - Fixed Navigation

For the background of the homepage, I decided to add in a music video from Alex G's YouTube. It was a bit tough to get the size to fit correctly but I got it working.

Fig 5.3 - Background Video HTML

Fig 5.4 - Background Video CSS

I also fixed the issue where I had a horizontal scroll bar and got my content to stop overlapping and stack on top of eachother on smaller screens. However, I still had an issue with the discography covers not being aligned in the center.

Fig 6.1 - Adjusted Mobile View

Fig 6.2 - Homepage CSS 1

Fig 6.3 - Homepage CSS 2

For the merchandise carousel, I followed a YouTube tutorial on creating an e-commerce slider and it helped me out a lot, especially since I really didn't know how to write the Javascript for it. The slider also works on mobile devices by swiping.

Fig 7.1 - Complete Slider

Fig 7.2 - Slider HTML

Fig 7.3 - Slider Javascript

I then worked on the little details, like the favicon and centering the discography covers. I made a really simple icon based off the artist's actual one.

Fig 8.1 - Icon Design Adobe Illustrator

Fig 8.2 - Centered Discography Cover CSS

I added hover effects for the album covers and hyperlinked them to direct you to the Spotify site for each album. When the cursor is on top of the image, it zooms in and also brightens up slightly.

Fig 8.3 - Cover Hover Effects

I also added hover effects for the merchandise slider so that the image zoomed in. Each image and text is hyperlinked to lead you to Alex G's official merch shop. For the text, I just made it change colour.

Fig 8.4 - Merchandise Image Hover Effects

Fig 8.5 - Merchandise Text Hover Effects

I also adjusted the spacing in the contacts and added more space on the top and bottom of each section so that the headings could be seen when you click the navigation links. There's also a hover effect that darkens the icon.

Fig 8.6 - Contacts Hover Effects

Final Website

Link: https://imank-finalproject.netlify.app/

Desktop Layout

Fig 9.1 - Desktop Website Layout JPG

Mobile Layout

Fig 9.2 - Mobile Website Layout JPG

---

FEEDBACK

Week 12

General Feedback - Look at Bootstrap for code. For favicon, size should be 21px x 26px. Maximum 8 images for gallery.

Specific Feedback - Sketches are good, decide which layout you want to use. Last wireframe looks okay. Don't use too many carousels.

Week 14

Specific Feedback - Get rid of underline for headings, makes it look like a link. Set homepage text as h1. Fix the extra width, add more white space. Add space to the bottom of the navigation. Use Freepik for icons to make it look more cohesive. Use display: block for mobile.

---

REFLECTION

My experience with this assignment went way rougher than my last ones. For some reason I felt like a lot of minor problems kept popping up that I wasn't quite sure how to fix but I eventually figured it out. I'm quite satisfied with my final website and I found it really fun in the end, although it did feel a bit tedious sometimes.

I've observed that if you plan out everything and think ahead about what you'd need to code during the low and high fidelity phase, it makes everything go a lot more smoothly. Furthermore, I should probably be more humble about my abilities. I unfortunately made the mistake that I was capable of completing a large chunk of this assignment in a short amount of time, and when I encountered issues and mistakes it just made it so much more stressful for me.

I found that sometimes you have to abandon some concepts and ideas that you really wanted to keep in order to make your job slightly easier. For example, I originally wanted to place an image of Alex as the background and make his face the focus on the left side of the homepage, but it was giving me a lot of issues that I decided to just do it the way I did in my resume.