Interactive Design / Project 3

23.10.2023 - 27.11.2023 / Week 8 - Week 14
Michael Chan Henn Loong / 0363611
Interactive Design / BA of Design (HONS) in Creative Media / Taylor's University
Project 3

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/19K7sai7Rdfy3_GxqSVJlxpkQ_RCjyOUe/preview" width="640" height="480" allow="autoplay"></iframe>

---

PROJECT 3 / DESIGN, EXPLORATION & APPLICATION

So the first step for our task is to do some research and sketch out sketches of how we want our website to look like. So I drew out 5 sketches and also did some research on color usage for the theme R&B.

I also did some research on the artist that I'm going to design a website for his name is Step.Jad and he is a R&B singer who also touches a little bit of Jazz , Soul , Hip-Hop etc.. 

The first wireframe that I thought of using is the one above but sir said that it looks too messy and the design is not really the trend so I went and chose another one with the proper proportion too. As sir said that the current trend is something like having a big picture at the starting if the website and then slowly down are the information and stuff so I tried out another wireframe which is the one below.

After all the wireframes I created prototypes the first attempt is the one on the left, at first glance everything looks okay but after one day I looked back at it and I felt like the composition are pretty bad and the words are too messy in that order so I went and created another design which is the one on the right. After creating the one on the right I felt like everything is in order, so I proceeded to the coding part.

At first I chose two fonts for my website.

I've also changed the profile pic of the artist as the first one looks too old for a young generation artist and I've also changed the fonts for the <h1> and the <p> so that it suits the website more.

I've also put the events in order from the earliest event to the most recent events

As for the discography section I added in overlay effects and also a onclick so that when I hover over the images it creates over lay and when I press on the image I will be transferred to the Youtube link that I've put inside the html code.

This is the CSS part for the overlay I needed to go and search up all the codes from the net as it was pretty hard for myself to code this without any help.

And these are the css and html for the contact section I was struggling at first as the icons keep staying on the left of the website it wouldn't go to the center. But after adding in align items and justify content everything went well and the icons are back to the center.

FINAL SUBMISSION

Netlify Link:

The responsiveness of the embed file would be different based on the devices used and also this file would look different in the chrome compared to here.

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

Html

Css

---

FEEDBACK

-Change the font it doesn't suit the website and it's readability is low.

-Maybe can add in some color so that the website looks more than it originally is.

-Change the profile pic of the artist as the current picture looks like he's a very old artist.

---

REFLECTION

As I've gained some experience in the last task, so for the beginning of this task it's not really that hard but when I got to the part where I need to do the overlay and links and stuff I started to lose control as I didn't really know how to do it so I needed to search on the net to get help and gladly it worked out and I noticed that I'm not really good at choosing the fonts too it took me quite some time to finally find a capable match of fonts even though it might not look great but it's the best combination I have for now. So maybe I'll need to work more on the fonts and discover more combinations so that in the future assignments I wont suffer the same problems again. And I think I should take the time during this sem break to polish my coding skills too as I'm still not familiar with some of the basic codes.