Interactive design Final Project / Single-Page Website for Your Favourite Artist

23 Oct 2023 - 10 Dec 2023 / Week 9 - Week 16
Leem Sejin / 0362419
Interactive Design / Bachelor of Design (Honour) in Creative Media

Final Project - Single page website

---

LECTURES

Refer to Exercise

---

INSTRUCTION

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

TASK

Week 9

For the final task, we had to select one favorite artist as the subject of our website. It can be a musician, painter,actor or any creative artists, but Mr Shamsul recommend us to choose singer as we are able to get many resources from the internet.

I choose Korean sing a song artist, IU ( Lee Jieun), because I love her lyrics and many of her song is fantasy theme, hence, I feel that it is interesting to add fantasy stuff into the website.

On Week 9, we had to do research and do 5 draft sketches for the website. Since I know my weakness after project 2, I am looking for the minimalist design.

Fig 1.1 Reference board (29/10/2023)

After searching the references, I draw rough sketches in Ipad.

Fig 1.2 Sketches (29/10/2023)

Week 10

Due to the public holiday, we did not have class, so we have to proceed to the prototype.
I worked in Adobe XD for the prototype. However, I cannot choose which design is the most suitable, hence, I did prototype with 5 designs.

Fig 1.3 Sketches (29/10/2023)

In week 10, I received the feedback from Mr Shamsul and have to change in colour script. Using too many colours seems not united, and recommended to use dark purplish colour for the website.

 

Fig 1.4 updated prototype

After finalising my prototype, I proceed to the Dreamweaver for the coding.

I started with adding div and section for each header. I have total of four sections ; home,about,biography,gallery and contact

Fig 1.5

Header

At first, I readjust the size of the icon image because it is bigger than the container, and collapse with the navi bar. I used max-width value in css code to adjust the size.

Fig 1.6

Followed by moving the navi menus at the right side of the website. I added hover to the navi list, and apply the background colour, and make it appear when someone hover the mouse to the menu.

I also applied sticky to place the navi menu on the top whenever scrolling down.

Fig 1.7

Fig 1.8

Main page

Fig 1.9

Fig 1.10

About

About page is simple as I just have to create two div for left and right, and insert the images and texts only.

Fig 1.11

Fig 1.12

Biography

I realised that I need some interactive animation in the website, hence I explore some possible animations that can be done in the biography session. At first, I want to make a album image roate when hover the mouse to the icon, but it seems messy.

Fig 1.13

Then, I decided to create the music player card and apply the hover animation. 

After finding that hover animation is working, i duplicate the code and replace the respective image and the text. Then, I add 'flex' and column:row ; to align the music cards in single line

Fig 1.14

After finding that hover animation is working, i duplicate the code and replace the respective image and the text. Then, I add 'flex' and column:row ; to align the music cards in single line.

Fig 1.15

I find that between the profile picture and the playlist seems empty, so I add button that links to the singer's Spotify profile. I refer to the colour script of spotify logo and add different colour when mouse is hover to the spotify button.

Fig 1.16

Fig 1.17

Fig 1.18

Gallery

For gallery, I collected 9 photos and add the scale and rotation effect when mouse hover. I want to add the extra code to view the original size, but due to the time limit, I failed to add the codes.

Fig 1.19

Fig 1.20

Contact

First, create footer section, and add div for the icons. I insert the downloaded files : facebook, youtube, twitter, youtube, and add <a href> , together with the respective links.

Fig 1.21

In CSS code, I add padding to give a space between the section title and the icons

Fig 1.22

Fig 1.23

Final submission

Netlify Link : sejin-project3.netlify.app

HTML CODE

Fig 1.24 html code

CSS CODE 

Fig 1.25 CSS code

Fig 1.26 Screen grab of Website

Fig 1.27 Screen grab of Website pdf

---

FEEDBACK

Week 11

Do not use many colours for the website. United the colour scheme. Also, recommend to add spotify link and youtube subscribe button.

---

REFLECTION

It takes me a long time to code because I keep experimenting with different css codes. I rely on youtube and websites to find out the solution. Although the website design is a little bit different from the prototype, I am satisfied with the final outcome of the website. I find different code such as rotating and opacity , and make the object appear when I hover the mouse to the image. The The only thing that I feel need more progression is gallery section. Due to time-limit, I just add hover effect to enlarge the size of the photos, but my actual plan was to enlarge to the original size.