Interactive Design / Final Project

23.09.2024 - 04.01.2025

GAN YI KIAN / 0374572
Bachelor of Design (Hons) in Creative Media
Interactive Design / Final Project

INSTRUCTIONS

Based on the prototype of the previous Project 2, I need to create 3 main pages in this Final Project, namely the Homepage, the login page, and the service page.

At first, I really didn't know how to start, until I asked my relatives to help me. Together we figured out how to use Dreamweaver to code.

Homepage

Sample

First, create the navigation bar, footer and chat button, because the same design will be used in other pages later.

Also add CSS to make them more beautiful and interactive.

Add a "learn more" button where I want it, before the image.

This is also a bit challenging because I need to adjust the position of the button step by step.

After that, add the content in the middle

This option bar is the most difficult part because need to adjust the displayed logo, the sliding distance, etc.

There were no other obstacles and everything was completed smoothly.

There is a Quick link section at the end of this page. The distance between the arrow and the text below also needs to be adjusted visually to make the distance between the two even.

Navigation Menu

This page is the menu option that appears when you click "about us" in the navigation bar.

Sample

This page is relatively simple because it is not very long. It is worth noting that there is a cancel button in the upper right corner, which will close this menu when clicked.

Contact Us

This page is the page you entered by clicking "keep me updated" in the Navigation Menu.

The same thing here is the navigation bar,footer and chat button so just copy the code and it's done.

Sample

It was a bit difficult here. My relatives and I didn't know how to restore the original prototype, so we searched for tutorials online.

The final result is not bad. Although it is a little different from the prototype, I think it is also good.

Login page

The difference between this page and the previous one is that the previous page is for leaving contact information, while this page is the login page.

Sample

The first thing to note is that the navigation bar is different from the previous one. There are no options in the middle of the navigation bar on this page, only the logo, search button and back button.

Although the prototype here does not have a chat button, I still added it, so I copied the previous code and added it to this page.

Service page

This is the last page, and also the most challenging page. I also made some minor adjustments that are different from the prototype.

Sample

Similarly, the navigation bar, footer, and chat button also use the code that has been created before.

Next is the content part. The first challenge is to make text inside the picture. I searched online for tutorials on this, which was a big challenge for me. Finally, I solved this problem.

Next is the design of these two blocks. I think this looks better than the prototype, so I put it like this.

Next is the design of these five blocks, which is also the difficult part to achieve. I only did research online to figure out how to make them.

This part is the same as the previous one, but the positions of the text and pictures are swapped.

Next are these three blocks, the same operation as above

The two blocks are on the left and right, and some blocks have pictures on the top and text on the bottom. There is also a "learn more" button.

This "Quick link" is also added above the footer on the homepage, so just copy it from there

The problem here is the lines above the text. I didn't know how to deal with it at first, and then I looked for tutorials online to figure out how to add lines above and below the text.

Lastly, put the file on netlify.com to generate a connection

Contact Us Entrance