Interactive Design / Final Project

Week 10 - Week 14 (25/04/25 - 23/07/25)
Felice Jolin (0373636)
Interactive Design  / Bachelor of Design (Hons) in Creative Media
Final Project

---

TABLE OF CONTENT

Lectures 

Instructions

Tasks

Feedbacks

Reflection 

---

LECTURES

Lectures Week 2-3 

Lectures Week 4-6

Lectures Week 7-10

back to top

---

INSTRUCTIONS

  

Module Information Booklet 

back to top

---

TASKS

Click here for link to drive folder

Redesign prototype link : Click here to see the prototype  

Starting from the proposal to the prototype, I've come to design the real website now. The prototype will be my visual guidance to design the website in Dreamweaver.

Click here for website deploy link

Week 10 (25/06/25)

To begin with, I made a new folder for this final project and manage new site in Dreamweaver then I save all required images in one folder. 

Fig 1.0 Image file

I start with the navigation bar. There are some interactivity here. I made the navigation to be on top right and when hover becomes orange color. I also added a link of 'index.html' in the logo so when I click, it will go back to home page. In addition, the placement of logo is fixed on the top left.

Fig 1.1 Navigation code 

Fig 1.2 Navigation result

 

HOME PAGE

Next is the home page first section. I wanted the background image to have one black layer with 50% opacity. However, when I try, it's I'm struggling to stack 2 images. I decided to edit the background picture in Photoshop. I also ensure the text is in the centre. I also add the button have hover effect to change color into orange text and white background. I made a command when clicked, it will scroll to #second-section.

Fig 1.3 Homepage first section code 

Fig 1.4 Homepage first section

  

I continue to work on homepage second section. Here, I want the text to be allign left and the image to be allign right also with blue background colour. Here the button is also interactive,  . When clicked the button, it will scroll to #third-section.

Fig 1.5 Homepage second section code

Fig 1.6 Homepage second section

Week 11 (02/07/25)

Moving on to the homepage third section. I would like to have carousel here. The buttons and dots, I would like it to be orange color. And the dot will have animation from orange circle strokes to orange circular color when click the next button.

Fig 1.7 Homepage third section  code

 

In addition to make the carousel works, java script is needed, below is my <scrpit> code. This is the hard part, my carousel was not working at first, turn out I placed it on the wrong position, I move it to before the body close section, thankful it's working. This interactive part is the hardest on to make it work. I want the arrow button to be on both left and right, also the dot below will change color when turn into next page. In addition, the 'view project' is also interactive, when click, it will bring you to the 'Service' page.

 

Fig 1.8 Homepage third section <script>

 

Fig 1.9 Homepage third section result

Footer

Next, I proceed to work on the last section/contact section which is the footer for all pages. Heading and sub-heading are in the center, followed by subscribe form with 3 column and subscribe button on the right side. Button, while hover change to orange color text and white background. Lastly, I place the logo, contact information, social media icons and a paragraph in a row, so I divide them into left and right classes. The contact with phone number, email address, instagram and physical address is to enhance engagement, and will bring user to a new page when clicked. The footer ends with a centered copyright notice “Copyright © 2025 Cipta Reka Kriya. All Rights Reserved."

 

Fig 1.10 Last section code

 

Fig 1.11 Last section result

 

Week 12(09/06/25)

ABOUT PAGE 

I proceed to do the second page, About first section. I insert the image on the css same as the homepage first section. I also ensure the text is in the centre. Here the button is also interactive, while hover change to orange color text and white background. When clicked the button, it will scroll to #second-section.

Fig 1.12 About us first section

Fig 1.13 About us first section result

 

I proceed to do the second page, About second section. I want the image to be justified left and the text on the right side divided in 3 paragraphs.

 

Fig 1.14 About us second section code

Fig 1.15 About us second section result

Moving on to the About third section. At first I was struggling to have make the 2 column stay at the left andi want it to be vertically rectagle, so I play around with the padding. I want the first blue column to be mission and second blue column to be vision. I changed the CSS for many times, I divide the class into left and right column to make things easier. 

 

Fig 1.16 About us third section code

Fig 1.17 About us third section result

Week 13 (16/04/25)

SERVICES PAGE

Moving on to the service first section. I did the same thing like the previous first section, applying image and make sure heading is in the centre. Here the button is also interactive, while hover change to orange color text and white background. When clicked the button, it will scroll to #second-section.

Fig 1.18 Services first section code

Fig 1.19 Services first section result

 

Next, service second section. Here, I would like to have 3 column with individual image and the information. I used the row and column class for this part.  Here the button is also interactive, while hover change to orange color text and white background. 

Fig 1.20 Services second section code

 

Fig 1.21 Services second section result

 

Service third section layout is just the same thing as the second section.

 

Fig 1.22 Services third section code

 

Fig 1.23 Services third section result

 

PROCESS PAGE

I start with the process first section, same as before, I apply background image and the heading. I also ensure the text is in the centre. Here the button is also interactive, while hover change to orange color text and white background. When clicked the button, it will scroll to #second-section.

Fig 1.24 Process first section code

 

Fig 1.25 Process second section code

 

Moving on to the process second section, same as before, I copy the <script> from homepage to here because this page has carousel too. I tried to copy and change the headings and other text, grateful that it work. 

 

Fig 1.26 Process second section code

Fig 1.27 Process second section result

Working on the process third section, here there is also carousel. I thought if I copy the html code from section 2 and just change the name, it will work, but it's not. This got me frustrated, I tried to change the class, but it's not working too. After several trials and error, I change the <script>, so it's different from the one in home page. Some of the lines were doubled as there will be 2 carousels in the process page. The CSS code is the same as the process second section as I used the same class name. 

Fig 1.28 Process third section code

Fig 1.29 Process third section result

CONTACT PAGE

Moving on to the last page,  I start with the contact first section. Same thing as the other pages first section, I edit the bacjground image first in Photoshop. Then in Dreamweaver, I ensure headings is in the centre. Here the button is also interactive, while hover change to orange color text and white background. When clicked the button, it will scroll to #second-section.

 

Fig 1.30 Contact first section code

 

Fig 1.31 Contact first section result

 

Next, moving on to contact second section. This was one of the hardest one too, it took me long time to make tidy. First, I need to resize the icons in photoshop so it wouldn't appear enormous in the website. Then I need to make sure that all the 4 icons inline in a row, I modify the css many times for this part. Finaly I managed to get the result I want. Below the icon, I would like to have 3 different section, which I name "orange-text", "contactsmall", and "orangie-text" respctively from top to bottom.

 

Fig 1.32 Icon image resize in Photoshop

 

Fig 1.33 Contact second section code

Fig 1.34 Contact second section result

Lastly, the conatct third section, here, I will make a form with blue backgorund color. I was at first struggling to make the 4 boxes in 2 rows and 2 columns with the message box width larger at the botom, trials and errors we made during the process. Nevertheless, I managed to get this clean and tidy layout. In addition, the button is interactive, while hover change to orange color text and white background. 

 

 

Fig 1.35 Contact third section code

 

Fig 1.36 Contact third section result

 

Week 14 (23/07/25)

 

RESPONSIVENESS

 

Overall there are 3 specific sizes for the responsiveness as below:

 

Fig 1.37 Media query code

 

Mobile Layout

 

At first, I was stuggling to fit the first section of every page because my image is landscape and mobile layout is portrait. Below is the looks of draft #1 and #2.

 

Fig 1.38 Mobile layout draft #1

 

Fig 1.38 Mobile layout draft #2

 

In draft #1, the image appear repeatedly, so I change the code to backgroung repeat: no repeat. However, after I changed, draft #2 image looks so big. This was quite frustrating I tried so many times and at last I managed to fix it... Below are some of the important codes to fix. 
 

Fig 1.40 Mobile layout media query code

Fig 1.41 Mobile layout media query result

Moving on, the carousel layout in desktop, I don't think it will look good if the exact layout is on mobile, as it will look too packed 4 images in a column, so I decided to make it all in a row to prioritise clarity and readability. Hence, I remove the dots and button for mobile. 

Fig 1.42 Mobile layout media query code

Fig 1.43 Mobile layout media query result

The same thing applied to the one on process page.

Fig 1.44 Mobile layout media query result

 For the form , it is all alline in a row for mobile. 

Fig 1.45 Form code

 

 Fig 1.46 Mobile layout media query result

 

Smaller Mobile Layout

 

 Fig 1.47 Smaller Mobile layout media query code

 

 Fig 1.48 Smaller Mobile layout media query result

 

Ipad Layout

 Fig 1.49 Ipad layout media query code

 Fig 1.50 Ipad layout media query result

 Fig 1.51 Ipad layout media query result

 

Testing 

I tried to open my website from different browser. Firefox, Edge, and Chrome.

 Fig 1.52 Browser testing

 

 

Website deploy link : https://felice-jolin-final-project.netlify.app/

Drive folder link : https://drive.google.com/drive/folders/1Ac1Zj4tJzM50CvP_zYu15kI4Tvs_4-A1?usp=sharing 

back to top

---

FEEDBACKS

The overall website design is consistent!

back to top

---

REFLECTION  

Experience
Step by step I've gone through all exercises and tasks to finally accomplish this final project. It was a long, tough, challenging, yet valuable journey. Time and dedication was to it's maximum for this module, it was not easy, as I am a newbie in coding. Despite the struggles, I am very grateful to complete the final task on time. 

Observation
Working with other peers was a good idea, there might be some layout I'm struggling with that my friend could help and vice versa. Feedback from Mr.Shamsul was a great help to improve on my work. From what I observed, this module requires me a lot of patience, to get the desired design, there should be the specific codes, and the journey to form that codes need a lot of trials and explorations.

Findings 
At the end of the day, I am able to enhance my coding skills and gain new insight about websites. Trial and errors are important to get the best outcome. Redesigining the website, I am now able to understand that it requires a lot of steps from the start. From analyzing users needs, experience and the solution to produce an accesible website that prioritize usability.

back to top